Javascript链式调用案例

简介:

jQuery用的就是链式调用。像一条连接一样调用方法。
链式调用的核心就是return this;,每个方法都返回对象本身。

下面是简单的模拟jQuery的代码,

<script>
    window.$ = function (id) {
        return new _$(id);
    }
    function _$(id) {
        this.elements = document.getElementById(id);
    }
    _$.prototype = {
        constructor: _$,
        hide: function () {
            console.log('hide');
            return this;
        },
        show: function () {
            console.log('show');
            return this;
        },
        getName: function (callback) {
            if (callback) {
                callback.call(this, this.name);
            }
            return this;
        },
        setName: function (name) {
            this.name = name;
            return this;
        }
    }
    $('test').setName('helloworld').getName(function (name) {
        console.log(name);
    }).show().hide().show().hide().show();
</script>

helloworld
show
hide
show
hide
show




本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/6210648.html,如需转载请自行联系原作者

相关文章
|
前端开发 JavaScript
javascript外链式css参考04
javascript外链式css参考04
86 0
|
前端开发 JavaScript
javascript外链式css参考03
javascript外链式css参考03
85 0
|
前端开发 JavaScript
javascript外链式css参考02
javascript外链式css参考02
95 0
|
前端开发 JavaScript
javascript外链式css参考01
javascript外链式css参考01
107 0
|
JavaScript 前端开发 设计模式
《JavaScript设计模式》——1.10 可以链式添加吗
本节书摘来自异步社区《JavaScript设计模式》一书中的第1章,第1.10节,作者:张容铭著,更多章节内容可以访问云栖社区“异步社区”公众号查看
1098 0
|
JavaScript 前端开发 Java
Javascript 链式作用域
看了很多篇文章,终于稍稍理解Javascript的链式作用域了。 很感谢Laruence,风雪之隅。 其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里。
1112 0