A story to tell-JavaScript technology stickers

Objective

As the article title shows, the publication of this article originates from an article of knowledge. The article links to the following: If you want to rely on the front-end technology to mortgage, you can not even this. This article is a group of water group when others hair, like me as a rookie role will not be able to know ~ ~ ~. This article is mainly about an interviewer interview front-end of a his own feelings, the author of Vivid image (the word Middle school Chinese which paper has not been written?) Description of the current front-end developers of low and low levels, of course, not to say that we are low level, is the level of those who interviewed him. He is in the article two questions, I think the second is still very interesting, from this to send this article.

Digression: Last night was the boss's deep rebuke, said I was too lazy, do not move the brain is not active work, always thinking to let others teach, take off-the-shelf. What to do, Bo master too lazy is not false. Novice entry, just came to practice, the first week was developed, looking at the developer documentation, I le a go, too official, unable to understand, stepped on a lot of pits, in the custom menu there, silent authorization, and so on, anyway, the first contact, and no development experience, are confused, I am the front end, the idea of the backstage too deficient Although backstage is Nodejs, but still do not understand Ah, after all, service side. It's been a week. The developer features currently required are almost complete. I want to write and write the development of the pit, which functions need how to set the kind of, see this piece of knowledge has become a hair this article. Premise

1. This article is a Vue widget feature, you need to have VUE experience and learn about Vue's components.

2. This article will post a pirated jquery.queue function, this function is read the JQ source code to write their own, is to steal the JQ, compared to JQ strong, but the basic function is still there.

3. This article is not suitable for beginners oh, if you are a novice programmer, you can not understand the OH.

Note: The test path of this article is not given, afraid of the black boss of my server has been blown.

Cut into the body

Here are the questions, let's read the requirements:

1. First, there is a module, this module includes an input, two button

2. The module realizes clicking A, sending the URLA request, and changing the input value to the value returned by the request, click B, Duplicate

3. The user clicks A, b,input first needs to change the value returned by the Urla request, and then changes the value returned by URLB. It is similar to a synchronous request.

The code is as follows:

<div id= "App" > <my-component></my-component> </div><template id= "TPL" > <div> <input type= "text" v-model= "Inputdata" readonly= "readonly" > <p> <button @click = "Request1" > Button a</button> <button @click = "Request2" > button b</button> </p> </div> </templat E><script src= "Https://unpkg.com/vue/dist/vue.js" ></script>//resource.min.js self-downloaded <script type= "Text/javascript" src= "./resource.min.js" ></script><script> vue.use (Vueresource) New Vue ({el: ' #app '              , components: {' my-component ': {Template: ' #tpl ', data:function () {return { Inputdata: ' Default ', Ajax2:null}}, methods: {Request1:fu                Nction () {var url = ' My test address: sleep 2 seconds and return value ' this. $http. Get (URL). Then (function (res) {   This.inputdata = Res.data             THIS.AJAX2 ()})}, Request2:function () {this.ajax2 = Funct                  Ion () {var url = ' My test address: Sleep 1 seconds return value ' this. $http. Get (URL). Then (function (res) { This.inputdata = Res.data})}}) </script>

I have defined a Vue instance that is valid within the #app element. Define a component, give the component a Inputdata property stores the data in the input box, and defines a function that ajax2 a property to store the request when the B button is clicked. After we click on the return value of a, call Ajax2 this method, so that the need to achieve the above, of course, only to achieve the above requirements, and the code looks very ugly, because we have to implement this function has to add a ajax2 on the model of this very chicken middle, in order to make the code more beautiful , more powerful, do not try a trial queue to solve.

The role of the queue

Not only do we have to implement this simple example, we need to achieve a stronger effect:

1. Alternately Click the A, B button to display the return value in sequence to input

2. Each click generates an AJAX request, but it is not launched immediately, and is requested sequentially according to the order of clicks.

3. The use of a queue object to achieve, so that the code becomes more concise and beautiful.

The code is as follows:

  <div id= "App" > <my-component:q= "q" ></my-component> </div> <template id= "TPL" > &lt ;d iv> <input type= "text" v-model= "Inputdata" readonly= "readonly" > <p> <button @click = "R Equest (' Test address 1: Sleep 2 Seconds ') ' > button a</button> <button @click = "request (' Test address 2: Sleep 1 seconds ') > button b</button> &L t;/p> </div> </template> <script src= "Https://unpkg.com/vue/dist/vue.js" ></script> <s Cript type= "Text/javascript" src= "./vue-resource.min.js" ></script> <script type= "Text/javascript" src= " Http://git.oschina.net/xuazheng/myJquery/raw/master/queue/queue.js?dir=0&filepath=queue%2Fqueue.js&oid  =b23c3bf7212ff41aad350bdb505a1afc59929ce6&sha=d0298a8907c9ed1cf25c176807fadbcd14c3e571 "></script>       <script type= "Text/javascript" > Vue.use (Vueresource) New Vue ({el: ' #app ', data: {Q:queue () }, components: {' my-component ': {         Template: ' #tpl ', data:function () {return {inputdata: ' Default '}                }, Methods: {request:function (URL) {this.q.queue (' FX ', function (next) {                this. $http. Get (URL). Then (function (res) {this.inputdata = Res.data next () })}.bind (This)}}, props: [' Q ']},}}) </scrip T>

My queue was introduced, and on the Vue instance, a Q attribute was created to store the queue object and pass it to the child component. In a subassembly, we add a function of an AJAX request to the FX queue each time we click a button, and in jquery, the FX-type queue stores animation functions that can handle the orderly execution of an asynchronous function queue. This value is not passed as the default FX type, so you can also pass a method directly in the queue method.

So, we used the queue to improve our needs, great.

The code for the queue is as follows:

; function Queue () {//Data cache object var = {};      var queuelist = {//type default is FX, is the animation queue queue:function (type,data) {var args = arguments;      No parameters are returned directly if (!args.length) {return;      } var q = null;        Only one parameter and is a function if (args.length = = 1 && typeof type = = = ' function ') {data = type;      Type = ' FX '; } q = Cache[type] | |      [];      Add cache if (data instanceof Array) {q = data;      }else {q.push (data)} Cache[type] = q; If it is an animation queue and there is no starting animation, perform the first animation function if (type = = ' FX ' && q.tostring (). IndexOf (' inprogress ') = = = 1) {Queuelist    . Dequeue ()} return q;        }, Dequeue:function (type) {var fn, queue; Type = Type | |        ' FX ';        Queue = Cache[type];        if (Queue.length = = 0) {return;        } fn = Queue.shift ();        if (fn = = = ' inprogress ') {fn = Queue.shift ();         } if (FN) {if (type = = = ' FX ') {   Queue.unshift (' inprogress ');          } fn.call (Null,function () {queuelist.dequeue (type);      })}},//delay using settimeout to implement Delay:function (Type,timeout) {if (!type) {return;        } if (arguments.length = = 1) {timeout = type;      Type = ' FX ';        } if (typeof timeout = = ' number ') {var q = Cache[type];        if (!q) {q = cache[type] = [_delay];      }else {Q.push (_delay)}} function _delay () {setTimeout (queuelist.dequeue, timeout);    } return this; }, Get:function (type) {type = Type | |      ' FX ';    return Cache[type]; }} return queuelist;}

This does not explain that, compared to the jquery source code, it is very simple, jquery has done a lot of processing, but bloggers are not so powerful, can only write this simple. JS basis should be able to understand, if you want to learn the JQ source code, recommended Alan Aaron's blog Park.

Thanks for reading

Leave each of their footprints, the future whether it is a success or failure, this is a memory.

A story to tell-JavaScript technology stickers