链式调用
   
链式调用其实只可是是一种语法招数。它能令你通过录取叁个起来操作来完成用一些些代码表明复杂操作的目标。该技巧包涵多个部分:

链式调用
   
链式调用其实只但是是一种语法招数。它能让您通过录取三个开始操作来达到用少许代码说明复杂操作的指标。该技艺包罗八个部分:

复制代码 代码如下:

    
方法的链式调用是jQuery最关键的特征,也是jQeury得以标榜的主要亮点,那么前日大家就来探望那天脾气是什么样兑现的???

三个开立代表HTML成分的靶子的工厂。

七个创设代表HTML成分的靶子的厂子。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=iso-8859-1″>
<title>Each Document</title>
<script type=”text/javascript”>
(function(){ //创造一个自实践函数
function _$(el){ //声美素佳儿个类
this.elements = []; //用于保存DOM成分的引用
for (var i = 0; i < el.length; i++) {
var element = el[i];
if (typeof element == string ) {
element = document.getElementById(element);
}
this.elements.push(element);
}
}

 

一堆对那一个HTML成分试行有个别操作的艺术。

一堆对这么些HTML成分奉行有些操作的方法。

_$.prototype = {
each: function(fn){
for (var i = 0; i < this.elements.length; i++) {
fn.call(this, this.elements[i]); //第2个参数是fn函数的参数
}
},
setStyle: function(prop, val){
var that = this;
this.each(function(el){ //注意参数的设置
el.style[prop] = val;
});
return this;
}
}

     方法的链式调用只是一种语法招数(纸老虎哟,不要被吓到)。

调用链的布局
$函数负担成立扶助链式调用的指标

调用链的组织
$函数肩负成立协理链式调用的靶子

window.$ = function(){
return new _$(arguments);
};
})();

 

复制代码 代码如下:

复制代码 代码如下:

window.onload = function(){
$(“p”, “p2”).setStyle(“color”, “red”);
}
</script>
</head>
<body>
<p id=”p”>
Hello world
</p>
<p id=”p2″>
Welcome.
</p>
</body>
</html>

      那大家就先来看看怎么来消食掉那几个纸大虫。为了促成那中本领。大家率先

(function() {
    /*
     * 创立贰个私有class
     * @param {Object} els  arguments 全体参数组成的类数组
     */
    function _$(els) {
        this.elements = [];             //存放HTML元素
        for(var i=0, len=els.length; i<len; i++) {
            var element = els[i];
            if(typeof element === ‘string’) {
                element = document.getElementById(element);
            }
            this.elements.push(element);
        }
    }
    //对HTML元素可进行的操作
    _$.prototype = {
        each: function() {},
        setStyle: function() {},
        show: function() {},
        addEvent: function() {},
    };   
    //对外开放的接口
    window.$ = function() {
        return new _$(arguments);
    };  
})();

(function() {
    /*
     * 创造三个私有class
     * @param {Object} els  arguments 全数参数组成的类数组
     */
    function _$(els) {
        this.elements = [];             //存放HTML元素
        for(var i=0, len=els.length; i<len; i++) {
            var element = els[i];
            if(typeof element === ‘string’) {
                element = document.getElementById(element);
            }
            this.elements.push(element);
        }
    }
    //对HTML成分可实施的操作
    _$.prototype = {
        each: function() {},
        setStyle: function() {},
        show: function() {},
        addEvent: function() {},
    };   
    //对外开放的接口
    window.$ = function() {
        return new _$(arguments);
    };  
})();

您恐怕感兴趣的作品:

  • 浅析jQuery的链式调用之each函数
  • JQuery
    each()函数怎么着优化循环DOM结构的性质
  • 关于jquery中全局函数each使用介绍
  • jquery中map函数与each函数的分别实例介绍
  • jQuery函数map()和each()介绍及异同点深入分析
  • jQuery中$.each()函数的用法引申实例
  • jQuery each函数源码深入分析

 

由于有着指标都会三番五次其原型对象的习性和方法,所以大家可以让定义在原型对象中的那一个方法都回去用以调用方法的实例对象的引用,那样就足以对那多少个方法开始展览链式调用了。

出于具备目的都会三番八回其原型对象的性质和措施,所以大家得以让定义在原型对象中的这一个方法都回去用以调用方法的实例对象的引用,那样就足以对那多少个方法实行链式调用了。

jQuery中的重要特征,each函数的链式调用。    
 (1)创制二个到手HTML成分的靶子的厂子(使用工厂格局成立,今后会有刻意章节讲明)。

复制代码 代码如下:

复制代码 代码如下:

      (2)成立一堆对这么些HTML成分实施某个操作的主意。

(function() {
    /*
     * 创立二个私有class
     * @param {Object} els  arguments 全数参数组成的类数组
     */
    function _$(els) {
        //…
    }
    //对HTML成分可施行的操作
    _$.prototype = {
        each: function(fn) {        //fn 回调函数
            for(var i=0; i<this.elements.length; i++) {
               
//实行len次,每回把八个成分elements[i]用作参数字传送递过去
                fn.call(this, this.elements[i]);
            }
            return this;
        },
        setStyle: function(prop, value) {
            this.each(function(el) {
                el.style[prop] = value;
            });
            return this;
        },
        show: function() {
            var that = this;
            this.each(function(el) {
                that.setStyle(‘display’, ‘block’);
            });
            return this;
        },
        addEvent: function(type, fn) {
            var addHandle = function(el) {
                if(document.addEventListener) {
                    el.addEventListener(type, fn, false);
                }else if(document.attachEvent) {
                    el.attachEvent(‘on’+type, fn);
                }
            };
            this.each(function(el) {
                addHandle(el);
            });
            return this; 
        }
    };
    //对外开放的接口
    window.$ = function() {
        return new _$(arguments);
    }

(function() {
    /*
     * 创立三个私有class
     * @param {Object} els  arguments 全部参数组成的类数组
     */
    function _$(els) {
        //…
    }
    //对HTML成分可举办的操作
    _$.prototype = {
        each: function(fn) {        //fn 回调函数
            for(var i=0; i<this.elements.length; i++) {
               
//实施len次,每一次把一个成分elements[i]作为参数字传送递过去
                fn.call(this, this.elements[i]);
            }
            return this;
        },
        setStyle: function(prop, value) {
            this.each(function(el) {
                el.style[prop] = value;
            });
            return this;
        },
        show: function() {
            var that = this;
            this.each(function(el) {
                that.setStyle(‘display’, ‘block’);
            });
            return this;
        },
        addEvent: function(type, fn) {
            var addHandle = function(el) {
                if(document.addEventListener) {
                    el.addEventListener(type, fn, false);
                }else if(document.attachEvent) {
                    el.attachEvent(‘on’+type, fn);
                }
            };
            this.each(function(el) {
                addHandle(el);
            });
            return this; 
        }
    };
    //对外开放的接口
    window.$ = function() {
        return new _$(arguments);
    }

        仅仅要求那四个步骤就足以成功。很简单哟

})();

})();

 

//———————– test ——–
$(window).addEvent(‘load’, function() {
    $(‘test-1’, ‘test-2’).show()
    .setStyle(‘color’, ‘red’)
    .addEvent(‘click’, function() {
        $(this).setStyle(‘color’, ‘green’);
    });
})

//———————– test ——–
$(window).addEvent(‘load’, function() {
    $(‘test-1’, ‘test-2’).show()
    .setStyle(‘color’, ‘red’)
    .addEvent(‘click’, function() {
        $(this).setStyle(‘color’, ‘green’);
    });
})

      
 下边咱们就来看望哪些落到实处这一个手艺:在落实那一个技艺在此之前。大家先来看看四个工具方法:

链式调用的章程获取数据
   
使用回调函数从帮忙链式调用的方式获取数据。链式调用很合乎赋值器方法,但对此取值器方法,你只怕希望他们回去您要的多寡而不是this(调用该措施的靶子).化解方案:利用回调技巧回来所要的数据.

链式调用的章程获取数据
   
使用回调函数从帮助链式调用的方法获取数据。链式调用很合乎赋值器方法,但对此取值器方法,你大概希望他们回来您要的数额而不是this(调用该办法的指标).化解方案:利用回调本领回来所要的数据.

function $(){ var elements = []; if() for(var
i=0,l=arguments.length;i<l;i++){ var element = arguments[i];
if(typeof element === “string”){ element =
document.getElementById(element); } if(arguments.length ===1){ return
element; } elements.push(element); } return elements; }

复制代码 代码如下:

复制代码 代码如下:

 

window.API = window.API || function() {
    var name = ‘mackxu’;
    //特权方法
    this.setName = function(name0) {
        name = name0;
        return this;
    };
    this.getName = function(callback) {
        callback.call(this, name);
        return this;
    };
};
//————- test —
var obj = new API();
obj.getName(console.log).setName(‘zhangsan’).getName(console.log);

window.API = window.API || function() {
    var name = ‘mackxu’;
    //特权方法
    this.setName = function(name0) {
        name = name0;
        return this;
    };
    this.getName = function(callback) {
        callback.call(this, name);
        return this;
    };
};
//————- test —
var obj = new API();
obj.getName(console.log).setName(‘zhangsan’).getName(console.log);

世家对他自然都十一分熟稔。了,要是不太熟稔,本身检讨一下。呵呵

陈设三个支撑措施链式调用的JS库
JS库特征:

设计一个支撑情势链式调用的JS库
JS库特征:

 

事件: 增多和删除事件监听器、对事件指标开始展览规划化管理

事件: 增添和删除事件监听器、对事件指标进行规划化管理

书接上文,继续:

DOM: 类名管理、样式管理

DOM: 类名管理、样式管理

 

Ajax: 对XMLHttpRequest进行标准化管理

Ajax: 对XMLHttpRequest实行标准化处理

假设把这几个函数改变为贰个构造函数,把函数所再次来到的成分作为数组保存在一个实例属性中,并让全部定义在构造函数的prototype属性所指对象中的方法都回去用以调用方法的百般实例的援用,那么它就颇具了拓展链式调用的手艺。(那句话听上去有一点点猛烈,上边会挨个解释)

复制代码 代码如下:

复制代码 代码如下:

 

Function.prototype.method = function(name, fn) {
    this.prototype[name] = fn;
    return this;
};
(function() {
    function _$(els) {
        //…
    }
    /*
     * Events
     *      addEvent
     *      removeEvent
     */
    _$.method(‘addEvent’, function(type, fn) {
        //… 
    }).method(‘removeEvent’, function(type, fn) {

Function.prototype.method = function(name, fn) {
    this.prototype[name] = fn;
    return this;
};
(function() {
    function _$(els) {
        //…
    }
    /*
     * Events
     *      addEvent
     *      removeEvent
     */
    _$.method(‘addEvent’, function(type, fn) {
        //… 
    }).method(‘removeEvent’, function(type, fn) {

首先把地方的函数$改为四个厂子方法,它担当创立支持链式调用的指标,修改后的代码如下:

    })
    /*
     * DOM
     *      addClass
     *      removeClass
     *      hover
     *      hasClass
     *      getClass
     *      getStyle
     *      setStyle
     */
    .method(‘addClass’, function(classname) {
        //…
    }).method(‘removeClass’, function(classname) {
        //…
    }).method(‘hover’, function(newclass, oldclass) {
        //…
    }).method(‘hasClass’, function(classname) {
        //…
    }).method(‘getClass’, function(classname) {
        //…
    }).method(‘getStyle’, function(prop) {
        //…
    }).method(‘setStyle’, function(prop, val) {
        //…
    })
    /*
     * AJAX
     *      ajax
     */
    .method(‘ajax’, function(url, method) {
        //…
    });

    })
    /*
     * DOM
     *      addClass
     *      removeClass
     *      hover
     *      hasClass
     *      getClass
     *      getStyle
     *      setStyle
     */
    .method(‘addClass’, function(classname) {
        //…
    }).method(‘removeClass’, function(classname) {
        //…
    }).method(‘hover’, function(newclass, oldclass) {
        //…
    }).method(‘hasClass’, function(classname) {
        //…
    }).method(‘getClass’, function(classname) {
        //…
    }).method(‘getStyle’, function(prop) {
        //…
    }).method(‘setStyle’, function(prop, val) {
        //…
    })
    /*
     * AJAX
     *      ajax
     */
    .method(‘ajax’, function(url, method) {
        //…
    });

 

    window.$ = function() {
        return new _$(arguments);
    };
    //化解JS库命名争持难题
    window.installHelper = function(scope, interface) {
        scope[interface] = function() {
            return _$(arguments)
        }
    } 
})();

    window.$ = function() {
        return new _$(arguments);
    };
    //化解JS库命名争辨难题
    window.installHelper = function(scope, interface) {
        scope[interface] = function() {
            return _$(arguments)
        }
    } 
金沙注册送58 ,})();

(function(){ function _$(els){ this.elements = []; if() for(var
i=0,l=els.length;i<l;i++){ var element = arguments[i]; if(typeof
element === “string”){ element = document.getElementById(element); }
this.elements.push(element); } } window.$ = function(){ return new
_$(arguments); } })();

小结:

小结:

 

   
链式调用有助于简化代码的编写职业,并在某种程度上能够让代码尤其从简、易读。大多时候利用链式调用可以制止数次重复使用一个对象变量,从而减弱代码量。倘诺想让类的接口保持一致,让赋值器和取值器都协理链式调用,那么你能够在取值器中选拔回调函数来化解获取数据问题。

   
链式调用有助于简化代码的编写制定职业,并在某种程度上能够让代码特别从简、易读。大多时候利用链式调用可以幸免数次重复使用三个对象变量,从而减弱代码量。假设想让类的接口保持一致,让赋值器和取值器都帮助链式调用,那么您能够在取值器中选拔回调函数来化解获取数据难题。

 

您只怕感兴趣的篇章:

  • 读书JavaScript设计方式(链式调用)
  • JavaScript DSL
    流畅接口(使用链式调用)实例
  • JavaScript中链式调用之研习
  • JavaScript中二种链式调用完成代码
  • Javascript
    链式调用达成代码(参考jquery)
  • javascript中的链式调用
  • javascript
    帮助链式调用的异步调用框架Async.Operation
  • JavaScript 异步调用框架 (Part 4 –
    链式调用)
  • 让JavaScript中setTimeout协助链式操作的章程
  • JavaScript对象链式操作代码(jquery)
  • JavaScript
    对象链式操作测验代码
  • javascript轻易链式调用案例剖判

链式调用其实只不过是一种语法招数。它能让您通过录取三个上马操作来达到用少些代码表明复杂操作的指标。该工夫包含八个部…

由于具有目的和总体性都会接二连三其原型(prototype)对象的性质和章程,所以大家能够让定义在原型对象中的那个方法都回来用以调用方法的实例对象的引用(即定义在prototype上的措施都回到this),上面继续修改上述措施:

 

(function(){ function _$(els){ this.elements = []; if() for(var
i=0,l=els.length;i<l;i++){ var element = arguments[i]; if(typeof
element === “string”){ element = document.getElementById(element); }
this.elements.push(element); } }
//向_$的prototype属性上加多方法,并且都放回当前实例对象的引用(this)
_$.prototype ={ each : function(fn){ for(var
i=0,l=this.elements.length; i<l;i++){
fn.call(this,this.elements[i]); } return this; },
setStyle:function(prop,val){ this.each(function(el){
el.style[prop]=val; }); return this; }, show:function(){ var
that=this; this.each(function(){ that.setStyle(“display”,”block”); })
return this; } } window.$ = function(){ return new _$(arguments); }
})();

 

 

//由于是率先次刊出手艺小说,有不足之处希望大家多多提出。四哥在此恭候

 

版权注明:本文为博主原创小说,未经博主允许不得转发。


相关文章

网站地图xml地图