JAVASCRIPTG Advanced Functions

JavaScript advanced functions

• Lazy Load function
• function currying
• cascading functions

This is not comprehensive, just a few major ones.

Lazy Load function

Lazy Loading indicates that a branch performed by a function is executed only when the function is first dropped, and in the first call, the function is overwritten as another function that executes in the appropriate way, so that any calls to the original function will not have to go through the execution of the branch.

Write a function to create a XMLHttpRequest object, a browser compatibility reason, and write the code through a large number of if judgments or try,catch statements to direct the function to the correct code.

code example:

function createxhr () {    var xhr = null;    try {        //Firefox, Opera 8.0+, safari,ie7+        xhr = new XMLHttpRequest ();    }    catch (E) {        //Internet Explorer         try {            xhr = new ActiveXObject ("Msxml2.xmlhttp");        }        catch (E) {            try {                xhr = new ActiveXObject ("Microsoft.XMLHTTP");            }            catch (e) {                xhr = null;}}    }    

Each time you call this function, you must first check the browser capabilities, first check whether the browser supports the built-in Xmlhyyprequest object, if not supported and then check the version of the ActiveX-based XMLHttpRequest, each call to this function is the case, In fact, when the first execution, if the browser supports a particular XMLHttpRequest object, then the next time the implementation of this support will not change, there is no need to do one side detection, even if there is only an if statement, the execution is certainly more than not slow, if we can let if statements do not have to execute each time, The execution speed can be increased in the case of frequent calls. And if not handled after multiple createxhr, it is also very easy to cause a memory leak. The solution is lazy loading . When you have judged what the current browser is, let createxhr = = XHR;

function createxhr () {var xhr=null; 
      if (typeof XMLHttpRequest! = ' undefined ') {xhr = new XMLHttpRequest ();　　createxhr=function () {       return new XMLHttpRequest ();          }else{try {xhr = new ActiveXObject (" Msxml2.xmlhttp ");         Createxhr=function () {return new ActiveXObject ("Msxml2.xmlhttp");            }} catch (e) {try {xhr = new ActiveXObject ("Microsoft.XMLHTTP");            Createxhr=function () {return new ActiveXObject ("Microsoft.XMLHTTP");            }} catch (e) {createxhr=function () {return null; }}}} return xhr;} 

At the first execution of this lazy loaded CREATEXHR, each branch will be re- assigned to CREATEXHR, overwriting the original function, returning the XHR object , and the second execution will call the rewritten function directly. This eliminates the need to perform a re-detection of each branch.

function currying

In computer science, Curry (English: currying), also translated as Cary or add-in, is a technique that transforms a function that accepts multiple parameters into a function that accepts a single parameter (the first parameter of the initial function) and returns a new function that accepts the remaining parameters and returns the result.

Speaking of the function of curry, I understand that it really cost a great deal of power, first of all the code is not understood in many parts, such as slice, call (), apply () "will write these three." After understanding this, you will naturally be able to understand the general implementation of the Curry:

code example:

function currying (FN) {    var args = Array.prototype.slice.call (arguments, 1);    return function () {        var Innerargs = Array.prototype.slice.call (arguments);        var Finalargs = Args.concat (Innerargs);        Console.log (Finalargs);        Return fn.apply (This,finalargs);}    ;}

1. Improved applicability

   code example:

   function Square (i) {    return i * i;} function Dubble (i) {    return I *= 2;} function map (Handeler, list) {    return List.map (Handeler);} Each item of the array is squared map (square, [1, 2, 3, 4, 5]); Map (square, [6, 7, 8, 9, 10]); Map (square, [20, 30, 40, 50, +]);///. Each item of the array Double Map (Dubble, [1, 2, 3, 4, 5]); Map (Dubble, [6, 7, 8, 9, ten]); map (dubble, [10, 20, 30, 40, 50]);

   Example, a map general function is created to adapt to different scenarios. At the same time, the same processing functions are repeated in the example: Square and Dubble.

   There are more things in the application that need to be handled. The enhancement of generality inevitably brings about the weakening of applicability. But we can still find a balance in the middle.

   Look below, we use the curry transformation:

   code example:

   function Square (i) {    return i * i;} function Dubble (i) {    return I *= 2;} function map (Handeler, list) {    return List.map (Handeler);} var mapsq = currying (map, Square), mapsq ([1, 2, 3, 4, 5]), MAPSQ ([6, 7, 8, 9,]), MAPSQ ([Ten,, +, +]);//... var mapdb = currying (map, dubble); mapdb ([1, 2, 3, 4, 5]); mapdb ([6, 7, 8, 9, ten]); mapdb ([10, 20, 30, 40, 50]);//...

   Curry reduces versatility and improves applicability.

3. deferred execution

   continues to curry, accumulating incoming parameters and finally executing.

   code example:

   var add = function () {var _this = this, _args = arg            Uments return function () {if (!arguments.length) {var sum = 0;            for (var i = 0,c; c = _args[i++];) sum + = C;        return sum;        } else {Array.prototype.push.apply (_args, arguments) 
    return arguments.callee; }}}add (1) (2) (3) (4) ();//10 

   currying:

   var curry = function (fn {var _args = [] return function CB () {if (arguments.length = = 0) {return fn.apply (this, _args        )} Array.prototype.push.apply (_args, arguments);    return CB; }} 

5. Fixed variable factors

   The characteristic of Curry determines that it can fix the variable factor, pass the parameter in advance, and generate a more definite application function. The most typical representative application is the BIND function used to fix this variable object.

   Function.prototype.bind = function (context) {    var _this = this,    _args = Array.prototype.slice.call (arguments, 1 );    return function () {        return _this.apply (context, _args.concat (Array.prototype.slice.call (arguments))    }}

But in fact, I still do not have such a thorough understanding of the function of the curry, should wait until other knowledge mastered more proficient, understanding will be easier

cascading functions

Cascade functions are also called chain functions, the method chain is generally suitable for a continuous operation of an object (centralized in a code), to some extent the related properties are linked together to reduce the amount of code, the disadvantage is that it occupies the function of the return value.

function Myclassa () {this.name= ""; this.age= ""; this.sex= "";} myclassa.prototype={setname:function () {  this.name= "Katherine";  return this; }, Setage:function () {  this.age= "";  return this; }, Setsex:function () {  this.sex= ' girl ';  return this; }}var me =new Myclassa () Console.log (Me.setname (). Setage (). Setsex ());//Myclassa {name: "Katherine", Age: "$", Sex: " Girl "}

This whole two days to finish, but still some do not understand the function of curry, I think only in the future development, slowly contact the project to unlock the understanding of the "Bay stretched out"

　　

JAVASCRIPTG Advanced Functions