Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to serialize chain structure in JavaScript". In daily operation, I believe many people have doubts about how to serialize chain structure in JavaScript. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to serialize chain structure in JavaScript". Next, please follow the editor to study!

I. Overview

In JavaScript, chained mode code, too much, as follows:

If_else:

If (...) {/ / TODO} else if (...) {/ / TODO} else {/ / TODO}

Switch:

Switch (name) {case.: {/ / TODO break;} case.: {/ / TODO break;} default: {/ / TODO}}

Question: what if we want to flatten the chained code like the above? As follows:

/ / fn1,f2,f3 is the handler function _ if (fn1). _ elseIf (fn2). _ else (fn3)

Next, let's try to achieve it.

Second, chain code flattening

Suppose, now we have the following chain code:

If (name = 'Monkey') {console.log (' yes, I am Monkey');} else if (name = 'Dorie') {console.log (' yes, I am Dorie');} else {console.log ('sorry, over for endingering');}

All right, now let's flatten it step by step.

In fact, look at the above code, it is not difficult to find, if... The format of else is actually a single linked list in the data structure, so you can initially use JavaScript to implement a single linked list, as follows:

Var thens = []; thens.resolve = function (name) {for (var I = 0, len = this.length; I < len;i++) {if (This [I] (name)! = 'next') {break;} thens.push (F1, f2, f3)

Where F1 force f2 and f3 is the judgment function, and we assume that if things such as F1, f2, and f3 return 'next', they continue to look down, otherwise, stop looking down. As follows:

Function f1 (name) {if (name = 'Monkey') {console.log (' yes, I am Monkey');} else {return 'next';}} function f2 (name) {if (name =' Dorie') {console.log ('yes, I am Dorie');} else {return' next';}} function f3 () {console.log ('sorry, over for endings') }

Okay, this is the mode of the linked list.

But our ultimate goal is to achieve something like this?

/ / fn1,f2,f3 is the handler function _ if (fn1). _ elseIf (fn2). _ else (fn3)

You might say, wouldn't it be nice to change the above code like this?!

Thens.push (F1). Push (f2). Push (f3). Resolve ()

The push method of But,JavaScript returns the new length of the array, not the array object.

So, then we can only write a new add method, which has the same effect as push, but returns an array object. As follows:

Thens.add = function (f) {if (typeof f = 'function') {this.push (f); return this;}}

The test code is as follows:

Var thens = []; thens.add = function (f) {if (typeof f = = 'function') {this.push (f); return this;}} thens.resolve = function (name) {for (var I = 0, len = this.length; I < len;i++) {if (This [I] (name)! =' next') {break } thens.add (F1) .add (f2) .add (f3) .resolve ()

However, there is a disadvantage. We bind the add and resolve methods in the global variable thens, so we cannot copy and paste the methods every time we create an array, so the refactoring code is as follows:

Function Slink () {this.thens = []; this.thens.add = function (f) {if (typeof f = = 'function') {this.push (f); return this;}} this.thens.resolve = function (name) {for (var I = 0, len = this.length; I < len) Next' +) {if (This [I] (name)! = 'next') {break;}

Obviously, it is unscientific for a public method like add,resolve to be created every time it is instantiated. So, which uses prototype to continue to transform on the original basis, is as follows:

Function Slink () {this.thens = [];} Slink.prototype = {add: function (f) {if (typeof f = 'function') {this.thens.push (f); return this;}}, resolve: function (name) {for (var I = 0, len = this.thens.length; I < len) Next' +) {if (this.thens [I] (name)! = 'next') {break;}

The test code is as follows:

Var thens = new Slink (); thens.add (F1) .add (f2) .add (f3); thens.resolve ()

Yes, but this way, we have to manually new a Slink every time, which is a bit troublesome, so we encapsulate the new Slink process into a function, just like jQuery, as follows:

Function $go (f) {return new Slink (f);} function Slink (f) {this.thens = []; this.thens.push (f);} Slink.prototype = {add: function (f) {if (typeof f = 'function') {this.thens.push (f); return this }, resolve: function (name) {for (var I = 0, len = this.thens.length; I < len; iTunes +) {if (this.thens [I] (name)! = 'next') {break;}

The test code is as follows:

$go (F1) .add (f2) .add (f3) .resolve ()

All right, it's done, and then there's the question of grammatical sugar drops, and the code is as follows:

Function _ if (f) {return new Slink (f);} function Slink (f) {this.thens = []; this.thens.push (f);} Slink.prototype = {_ elseIf: function (f) {if (typeof f = 'function') {this.thens.push (f); return this }, _ else: function (f) {return this._elseIf (f);}, resolve: function (name) {for (var I = 0, len = this.thens.length; I < len; iTunes +) {if (this.thens [I] (name)! = = 'next') {break }} return this;}}

The test code is as follows:

_ if (F1). _ elseIf (f2). _ else (f3). Resolve ()

Of course, in addition to using arrays, you can also use closures to achieve chain flattening, as follows:

Var func = Function.prototype; func._else = func._elseIf = function (fn) {var _ this = this; return function () {var res= _ this.apply (this,arguments); if (res=== "next") {/ / Boolean return fn.apply (this,arguments);} return res;}}

The test code is as follows:

Function f1 (name) {if (name = 'Monkey') {console.log (' yes, I am Monkey');} else {return 'next';}} function f2 (name) {if (name =' Dorie') {console.log ('yes, I am Dorie');} else {return' next';}} function f3 () {console.log ('sorry, over for endings') } f1._elseIf (f2). _ else (f3) ('Dorie')

Third, asynchronous code chain flattening

What we are talking about above are synchronous processes. What if there is async in chained calling functions?

What does it mean? As follows:

Function f1 (name) {setTimeout (function () {if (name = 'Monkey') {console.log (' yes, I am Monkey');} else {return 'next';}}, 2000);} function f2 (name) {if (name =' Dorie') {console.log ('yes, I am Dorie');} else {return' next' }} function f3 () {console.log ('sorry, over for endings');}

We make F1 asynchronous using setTimeout. According to the logic of the above code, we should decide whether or not to execute f2 after F1 is fully executed (including setTimeout execution), but is that really the case?

The test code is as follows:

_ if (F1). _ elseIf (f2). _ else (f3). Resolve ()

The result of executing the code is that nothing is output.

Why?

Because JavaScript is a single thread.

What should we do about it?

Since there is asynchronous code, and the subsequent chain must be processed after the asynchronous code, we wait for the asynchronous code to be executed before executing the subsequent chain, as shown below:

Function F1 (name) {setTimeout (function () {if (name = 'Monkey') {console.log (' yes, I am Monkey');} else {/ / processing successor chain this.resolve (name, 1); / / 1 represents the position of the next handler in the array}} .bind (this), 2000);}

Well, since we use this in the function, which represents the Slink object, and changes the resolve method, we need to fine-tune the Slink constructor and prototype chain, as follows:

Function Slink (f) {this.thens = []; this.thens.push (f.bind (this));} Slink.prototype = {_ elseIf: function (f) {if (typeof f = 'function') {this.thens.push (f.bind (this)); return this }, _ else: function (f) {return this._elseIf (f.bind (this));}, resolve: function (name, flag) {for (var I = flag, len = this.thens.length; I < len) Next' +) {if (this.thens [I] (name)! = = 'next') {break;}} return this;}}

The test code is as follows:

Function F1 (name) {setTimeout (function () {if (name = 'Monkey') {console.log (' yes, I am Monkey');} else {/ / processing successor chain this.resolve (name, 1); / / 1 represents the position of the next handler in the array}} .bind (this), 2000) } function f2 (name) {if (name = 'Dorie') {console.log (' yes, I am Dorie');} else {return 'next';}} function f3 () {console.log (' sorry, over for endingering');} _ if (F1). _ elseIf (f2). _ else (f3). At this point, the study on "how to serialize the chain structure in JavaScript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.