The first part of the Extjs series + function Extension, one of the extjs Series

The first part of the Extjs series + function Extension, one of the extjs Series

Opening part:

I have been using Extjs for more than three and a half years. Now my project has been transformed to an Internet product for more than half a year, and I have transformed js to the jquery series. I would like to write some summary and records on Extjs in my blog, at the same time, we know new things for the sake of warmth.

The Extjs3.4 version is mainly used. Versions later than 4.0 have been used, mainly because of the complexity of browsers in China and the slow replacement of XP systems, the loading speed on browsers of earlier versions after 4.0 is not satisfactory.

The introduction below is based on the most familiar version 3.4.

Since it is the beginning, it introduces some general-purpose knowledge that is not easily discovered and used by the majority of extjs developers in the early stage. It is also the essence of a js library, is an extension function such as array function. Let's take a look at function extensions today.

Function Extension:

In the API, you can see that Extjs has five function extensions:createCallback createDelegate createInterceptor createSequence defer .

1. createCallback
Official Note: Creates a callback that passes arguments [0], arguments [1], arguments [2],... call directly on any function. example: myFunction. createCallback (arg1, arg2) Will create a function that is bound to those 2 args. if a specific scope is required in thecallback, use createDelegate instead. the function returned by createCallback alwaysexecutes in the window scope.Purpose: Create a function to bind a parameter to the function. be careful that the specified scope of this function points to the global range of window. If you need to specify this, you can use createDelegate instead. Example:
var sayHi = function(name){    alert('Hi, ' + name);}// clicking the button alerts "Hi, Fred"new Ext.Button({    text: 'Say Hi',    renderTo: Ext.getBody(),    handler: sayHi.createCallback('Fred')});

In the example, after clicking the button created through extjs, the parameter fred is set by default.

Source code analysis:
createCallback : function(/*args...*/){        // make args available, in function below        var args = arguments,            method = this;        return function() {            return method.apply(window, args);        };    },

The window object is applied directly.


2. createDelegate
Official notes:
Creates a delegate (callback) that sets the scope to obj. Call directly on any function.
Example:this.myFunction.createDelegate(this, [arg1, arg2])
Will create a function that is automatically scoped to obj so thatThisVariable inside thecallback points to obj.
Purpose: Create a function to bind a parameter to the function. The function returns a function similar to the previous one. Additionally, you can pass the function object, that is, this point in the function. Example:
var sayHi = function(name){    // Note this use of "this.text" here.  This function expects to    // execute within a scope that contains a text property.  In this    // example, the "this" variable is pointing to the btn object that    // was passed in createDelegate below.    alert('Hi, ' + name + '. You clicked the "' + this.text + '" button.');}var btn = new Ext.Button({    text: 'Say Hi',    renderTo: Ext.getBody()});// This callback will execute in the scope of the// button instance. Clicking the button alerts// "Hi, Fred. You clicked the "Say Hi" button."btn.on('click', sayHi.createDelegate(btn, ['Fred']));

In this example, point this to btn and you can get this. text.

Source code analysis:
createDelegate : function(obj, args, appendArgs){        var method = this;        return function() {            var callArgs = args || arguments;            if (appendArgs === true){                callArgs = Array.prototype.slice.call(arguments, 0);                callArgs = callArgs.concat(args);            }else if (Ext.isNumber(appendArgs)){                callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first                var applyArgs = [appendArgs, 0].concat(args); // create method call params                Array.prototype.splice.apply(callArgs, applyArgs); // splice them in            }            return method.apply(obj || window, callArgs);        };    },

The source code processes the parameters and then wraps the logic in a function to return the results.

3. createInterceptor
Official notes:
Creates an interceptor function. The passed function is called before the original one. If it returns false, the original one is not called.
The resulting function returns the results of the original function. The passed function is called with the parameters of the original function

Purpose: execute a function before the original function and create an insert function. If false is returned in the insert function, the original function is not called, otherwise, the newly generated function executes the insert function before executing the original function, and returns the original function. Example:
var sayHi = function(name){    alert('Hi, ' + name);}sayHi('Fred'); // alerts "Hi, Fred"// create a new function that validates input without// directly modifying the original function:var sayHiToFriend = sayHi.createInterceptor(function(name){    return name == 'Brian';});sayHiToFriend('Fred');  // no alertsayHiToFriend('Brian'); // alerts "Hi, Brian"

If the inserted function is false, the original function is not executed.

Source code analysis:
CreateInterceptor: function (fcn, scope) {var method = this; return! Ext. isFunction (fcn )? This: function () {var me = this, args = arguments; fcn.tar get = me; fcn. method = method; return (fcn. apply (scope | me | window, args )! = False )? Method. apply (me | window, args): null ;},< span style = "color: # FF0000; "> Additionally, when false is returned, null is returned. </span>


4. createSequence
Official notes:
Create a combined function call sequence of the original function + the passed function.
The resulting function returns the results of the original function. The passed fcn is called with the parameters of the original function.
Function: adds a function execution after the original function. Example of returning the original function:
var sayHi = function(name){    alert('Hi, ' + name);}sayHi('Fred'); // alerts "Hi, Fred"var sayGoodbye = sayHi.createSequence(function(name){    alert('Bye, ' + name);});sayGoodbye('Fred'); // both alerts show

Source code analysis:
CreateSequence: function (fcn, scope ){
Var method = this;
Return (typeof fcn! = 'Function ')?
This:
Function (){
Var retval = method. apply (this | window, arguments );
Fcn. apply (scope | this | window, arguments );
Return retval;
};
}
To wrap a function, call the original function, save the returned result, call the new function, and return the saved value.

5. defer
Official notes:
Callthis function after the number of millseconds specified, optionally in a specific scope.

Purpose:
The execution of the function in milliseconds is actually a simple delaytask or a convenient settimeout version.

Example:
var sayHi = function(name){    alert('Hi, ' + name);}// executes immediately:sayHi('Fred');// executes after 2 seconds:sayHi.defer(2000, this, ['Fred']);// this syntax is sometimes useful for deferring// execution of an anonymous function:(function(){    alert('Anonymous');}).defer(100);

Source code analysis:
Defer: function (millis, obj, args, appendArgs ){
Var fn = this. createDelegate (obj, args, appendArgs );
If (millis> 0 ){
Return setTimeout (fn, millis );
}
Fn ();
Return 0;
}
You can see that settimeout is called in a simple combination.


To sum up, there are only a few lines of code in several function packages, but they are very practical. I often use createdelegate defer.
Note that the source code is distributed in 4 src core ext-more.js in different src core ext. js and 1 createSequence
There are also five corresponding methods on the Ext object and Ext. util. Functions. The usage method is slightly different and the function is the same.


Now Extjs is no longer used. If you like these functions, You can port and use the source code.
Some of the underscore methods are used to provide more information,
For example, throttle is actually a good encapsulation of the front-end interface. Similar to jquerydatatable, throttle is also encapsulated to avoid miraculous effects during frequent calls.
It's far away. Stop here. Now that we have started a series of headers, we will be able to keep up with other good usage introductions in extjs.