开发者社区> 嗯哼9925> 正文

javascript链式调用的实现方式

简介:
+关注继续查看

本文从ITeye导入 

 

在我们所用到的库中,可以看到很多诸如

$(window).addEvent('load', function(){
    $('test').show().setStyle('color', 'red').addEvent('click', function(e){
        $(this).setStyle('color', 'yellow');
    });
});

 的链式调用,那么这样的链式结构是怎么实现的呢,下面我们利用代码来探讨一番:

 

 先分解下,我们队$函数已经很熟悉了,他通常返回一个HTML元素或者HTML元素的集合,如下所示:

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

 但是,如果把这个函数改造为一个构造器,把那些元素作为数组保存在一个实例属性中,并让所有定义在构造器函数的prototype属性所指对象中的方法都返回用以调用放方法的那个实例的引用,那么他就具有了进行链式调用的能力。

 

先别说的太远,我们首先需要把这个$函数改为一个工厂函数,他负责创建支持链式调用的对象。

(function(){

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

由于所有对象都会继承其原型对象的属性和方法,所以我们可以让定义原型对象中的那几个方法都返回用以调用方法的实例对象的引用,这样既可以对那些方法进行链式调用,想好这一点,我们现在就动手在_$这个私用构造函数的prototype对象那个中添加方法,以便实现链式调用。

 

(function(){

    function _$(els){
        this.element = [];
        for(var i = 0, len = els.length; i < len; i++){
            var element = els[i];
            if(typeof element === 'string'){
                element = document.getElementById(element);
            }
            this.element.push(element);
        }
        return this;
    }

    _$.prototype = {
        each: function(fn){
            for(var i = 0, len = this.element.length; i < len; i++){
                fn.call(this, this.element[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(el){
                that.setStyle('display', 'none');
            });
            return this;
        },

        addEvent: function(type, fn){
            var add = function(el){
                if(window.addEventListener){
                    el.addEventListener(type, fn, false);
                }else if(window.attachEvent){
                    el.attachEvent('on' + type, fn);
                }
            };
            this.each(function(el){
                add(el);
            });
        }
    };

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

 

 看看该类每个方法的最后一行,你会发现他们都是以"return this;"结束,这样将用以调用方法的对象传给调用链上的下一个方法。





本文转自Barret Lee博客园博客,原文链接:http://www.cnblogs.com/hustskyking/archive/2012/09/18/3049802.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
用手动创建新的script标签的方式,实现JavaScript脚本的异步加载
用手动创建新的script标签的方式,实现JavaScript脚本的异步加载
25 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19759 0
Javascript用递归的方式遍历json数组
前言 Javscript语言有很多值得探究和注意的地方,下面我们来看一下用递归的方式遍历JSON对象数组。
1324 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18019 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24819 0
JavaScript中判断为整数的多种方式
原文:JavaScript中判断为整数的多种方式 之前记录过JavaScript中判断为数字类型的多种方式,这篇看看如何判断为整数类型(Integer)。 JavaScript中不区分整数和浮点数,所有数字内部都采用64位浮点格式表示。
843 0
Javascript事件绑定的几种方式
 Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器):   [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后边附录。
933 0
javascript中创建对象的几种方式
原文:javascript中创建对象的几种方式 javascript中提供了通过Object构造函数或对象字面量方式来创建单个的对象,当我们想要创建很多对象的时候,简单的通过这两种方法就会产生大量的重复。
992 0
+关注
4716
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载