One of the ExtJS series begins +function extension

Opening:

With ExtJS developed more than 3.5, now the transformation of the project to the Internet products more than half a year, will be JS transformation to the jquery series, want to want to blog under the ExtJS of some summary and record, but also for the warm and know new.

The main use of this version of Extjs3.4, 4.0 after the version used a little, mainly domestic browser and the complexity of the replacement of XP system is slow enough, 4.0 after the old version of the browser loading speed is not satisfactory.

The following introduction is based on the most familiar version of the 3.4.

Since it is the opening, introduce some general, but also by the vast number of ExtJS developers in the early stage is not easy to find and use of knowledge, but also I think a JS library is the essence of the part, is for example, array function extension function. Let's look at the extension of function today.

Function Extensions:

In the API, you can see the extension of ExtJS to function, with five: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) would create a function that's bound to those 2 args. If a specific scope is required by thecallback, usecreatedelegate INstead. The function returned by Createcallback alwaysexecutes in the window scope.作用： 创建一个函数的绑定参数的函数返回，小心的是该函数的指定作用域this指向的是window这个全局范围，如果需要指定this，可以使用createDelegate替代。例子：
var sayhi = function (name) {    alert (' Hi, ' + name);} Clicking the button Alerts "Hi, Fred" new Ext.button ({    text: ' Say Hi ',    renderTo:Ext.getBody (),    Handler:sa Yhi.createcallback (' Fred ')});

In the example, the button created by ExtJS is clicked directly on the default parameter Fred.

SOURCE Analysis:
Createcallback:function (/*args...*/) {        //make args available, in function below        var args = arguments,            metho D = this;        return function () {            return method.apply (window, args);        };    },

directly apply the Window object


2. createDelegate
Official Note:
Creates a delegate (callback) that sets the scope to obj. Call directly on any function.
Example:this.myFunction.createDelegate(this, [arg1, arg2])
Would create a function that's automatically scoped to obj so that the ThisVariable inside thecallback points to obj.
作用：    创建一个函数的绑定参数的函数返回，作用和上一个类似，额外可以传递作用对象，即函数内的this指向。例子：
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    //were passed in CreateDelegate below.< C8/>alert (' Hi, ' + name + '). You clicked the "' + This.text + '" button. ');} var btn = new Ext.button ({    text: ' Say Hi ',    renderTo:Ext.getBody ()});//This callback would execute in the scope O F the//Button instance. Clicking the button alerts//"Hi, Fred." You clicked the "Say Hi" button. " Btn.on (' Click ', Sayhi.createdelegate (btn, [' Fred ']));

The example points this to btn so you can get This.text

SOURCE Analysis:
Createdelegate:function (obj, args, Appendargs) {        var method = this; & nbsp;      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 does some processing on the parameters, and then wraps the logic back inside a function. 

3. createInterceptor
Official Note:
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

作用：    等于在原函数前先执行个函数，创建一个插入函数，在插入函数中返回false则原函数不会调用，否则新的生成的函数就先执行插入函数再执行原函数，返回原函数的返回。例子：
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 s Ayhitofriend = Sayhi.createinterceptor (function (name) {    return name = = ' Brian ';}); Sayhitofriend (' Fred ');  No alertsayhitofriend (' Brian '); Alerts "Hi, Brian"

In the example of Fred, the inserted function evaluates false without executing the original function.

源码分析：
Createinterceptor:function (FCN, scope) {        var method = this;         return! Ext.isfunction (FCN)?                This:                function () {                      var me = this,                         args = arguments;                     Fcn.target = me;                     Fcn.method = method;                     return (fcn.apply (Scope | | me | | window, args)!== false)?    & nbsp;                         method.apply (Me | | window, args):                              null;               };    },<span style= "color: #FF0000;" > additional can see False when return is null</span>


4. createSequence
Official Note:
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.
作用：    等于在原函数后增加一个函数执行。仍然返回原函数的结果例子：
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 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;
};
}
Wrap a function call the original function, save the return, call the new function, and return the saved value. 

5. defer
Official Note:
Calls This function after the number of millseconds specified, optionally in a specific scope.

Role:
executing a function after a few milliseconds is actually a simple delaytask, or a handy settimeout version

Example:
var sayhi = function (name) {    alert (' Hi, ' + name);} Executes Immediately:sayhi (' Fred ');//Executes after 2 Seconds:sayHi.defer (a, this, [' Fred ']);//This syntax is some Times useful for deferring//execution of a anonymous function: (function () {    alert (' Anonymous ');}). Defer (100);

SOURCE Analysis:
Defer:function (Millis, obj, args, Appendargs) {
var fn = this.createdelegate (obj, args, Appendargs);
if (Millis > 0) {
Return SetTimeout (FN, Millis);
}
FN ();
return 0;
}
can see a simple combination of settimeout


Summary: A few function encapsulation actually have only a few lines of code, but the practical degree is very high, I compare commonly createdelegate defer
Note that the source code is distributed in 4 SRC core ext-more.js in the different src core ext.js 1 createsequence
And on the Ext object and Ext.util.Functions also have the corresponding five methods, using a slightly different way, the same effect. 


Now do not use ExtJS, or like these functions can be the source of this part of the appropriate porting to use.
Now in the use of some of the methods in underscore, provide more,
For example, throttle is actually a good front-page package, similar to the jquerydatatable also have throttle package, avoid frequent calls when there is a miraculous
Pull away, stop here. Since the opening of the series of the head, the back of the leisure will be scattered with some extjs inside the other good use of the introduction.

One of the ExtJS series begins +function extension