`
karrykai
  • 浏览: 9856 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

javascript链式调用的设计

阅读更多

用过jQuery的朋友一定对jQuery中方法的链式调用印象深刻,最近发布的YUI3也支持了方法的链式调用。这是一个非常不错的语法特性,能让代码更加简洁、易读。很多时候链式调用可以避免多次重复使用一个对象变量,从而减少代码,而js是一种客户端执行的脚本语言,减少代码就减少了js文件的大小,减少了服务器的压力。链式调用这么多优点,它是如何实现的呢?这篇文章就是想探讨一下这个问题。

链式调用例子如:$("p").append("test").fadeIn("fast");

看一段jQuery的源码:

append: function() {
        return this.domManip(arguments, true, function(elem){
            if (this.nodeType == 1)
                this.appendChild( elem );
        });
    }

以上是jQuery中append方法的实现。append方法是向每个匹配的元素内部追加内容的方法,很明显,属于赋值操作,但是却有返回值,返回的是当前操作的dom(通常返回this指针)。这是链式调用的关键,你会发现这不过是个语法小技巧而已。

很明显,在赋值器方法中(或者本身没有返回值的方法中)很容易实现链式调用,而取值器相对来说不好实现链式调用,因为你需要取值器返回你需要的数据而不是this指针(当然,如果你坚持要实现链式方法,也可以用回调函数来实现)。

设计一个简单的支持链式调用的类:

function Dog(name,color){
        this.name=name||"";
        this.color=color||"";
}
Dog.prototype.setName=function(name){
        this.name=name;
        return this;
};
Dog.prototype.setColor(color){
        this.color=color;
        return this;
};
Dog.prototype.yelp(){
        alert("我的名字叫:"+this.name+",我的颜色是:"+this.color);
        return this;
};

使用方式:

var dog = new Dog();
dog.setName("旺财").setColor("白色").yelp();

取值器你也想支持链式调用?
那就用回调函数来实现,将本来应该返回的值直接传给回调函数,而return仍然返回this指针。接着上面的Dog类写一个方法:

Dog.prototype.getName(callback){
        callback.call(this,this.name);
        return this;
}

使用方式:

function showName(name){
        alert(name);
}
dog.setName("旺财").getName(showName).setColor("白色");

Copyright playgoogle.com© 2008

继续阅读《javascript链式调用的设计》的全文内容...

相关文章:


最新评论:

0
0
分享到:
评论

相关推荐

    格式化-function与小括号间留空格。链式调用不换行.zip

    链式调用不换行"这一主题主要涉及JavaScript编程语言中的代码规范,包括函数调用时的空格使用以及链式调用的样式规则。 首先,我们来探讨函数调用时的小括号前后的空格问题。在JavaScript中,根据一些流行的编码...

    【JavaScript源代码】详解JavaScript中的链式调用.docx

    JavaScript中的链式调用是一种常见的编程技巧,尤其在处理对象属性和方法时,可以使代码更加简洁、易读。链式调用的核心思想是通过在每次方法调用后返回对象自身,使得可以连续调用多个方法而无需重复指定对象名。在...

    Javascript 链式调用实现代码(参考jquery)

    在JavaScript中,链式调用是一种常见的编程模式,特别在像jQuery这样的库中广泛使用。链式调用允许我们连续地调用同一个对象上的方法,而不需要重复引用该对象本身。这种模式在减少代码冗余和提高可读性方面非常有效...

    详解JavaScript中的链式调用

    链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧。 描述 链式调用在JavaScript语言中很常见,如jQuery、Promise等,都是使用的链式调用,当我们在调用...

    javascript 支持链式调用的异步调用框架Async.Operation.docx

    链式调用是一种常见的设计模式,在许多库和框架中都有应用,尤其是在JavaScript中。链式调用允许开发者通过返回当前对象的方法调用来串联多个方法调用,从而构建简洁且易于阅读的代码。例如: ```javascript ...

    JavaScript链式调用实例浅析

    JavaScript链式调用是一种常见的编程技巧,特别是在DOM操作和对象操作中,它可以使得代码更加简洁、易读。本文将深入探讨JavaScript链式调用的概念、实现方式以及如何在一个已有的库或框架中应用。 首先,链式调用...

    在JavaScript中实现链式调用的实现

    链式调用在 JavaScript 语言界很常见,如 jQuery 、 Promise 等,都是使用的链式调用。链式调用可以让我们在进行连续操作时,写出更简洁的代码。 new Promise((resolve, reject) => { resolve(); }) .then(() =...

    javascript简单链式调用案例分析

    链式调用是JavaScript中一种常用的编程模式,它允许我们连续调用同一个对象的多个方法,而无需重复引用该对象。这种模式特别适用于库和框架的设计,例如著名的jQuery库就广泛使用了链式调用。在JavaScript中实现链式...

    javascript 支持链式调用的异步调用框架Async.Operation

    然而,在某些场景下,为了兼容旧环境或出于特定设计考虑,可能会采用自定义的异步调用框架来实现链式调用功能。本文将详细介绍一个基于`Async.Operation`类实现的自定义异步调用框架,并深入探讨其工作原理和应用...

    学习JavaScript设计模式(链式调用)

    链式调用是JavaScript中一种常见的设计模式,它允许我们在单个表达式中连续调用多个方法。这种模式在很多JavaScript库中被广泛使用,如jQuery、Prototype等。链式调用的核心思想在于方法执行完后返回对象本身,从而...

    javascript中的链式调用

    JavaScript中的链式调用是一种非常实用的编程技巧,它使得代码更加简洁、可读性更强。在jQuery中,我们经常看到这种风格的代码,比如`$(“#txtName”).addClass(“err”).css(“font-size”,”12px”).select()....

    《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析

    本文实例讲述了Javascript面向对象程序设计链式调用。分享给大家供大家参考,具体如下: 1.链式调用: jquery可能是目前大家最常用到的js框架了,也习惯了如下的调用方式: $('.someclass').show().css('xxx','xxxx'...

    mysqls一款专为node.js生成sql语句的插件链式调用使用灵活

    MySQLs是一款专为Node.js设计的SQL语句生成器,其特点是通过链式调用的方式提供了灵活的操作体验。在Node.js的开发环境中,与数据库交互是必不可少的一部分,而MySQLs插件则为开发者提供了一个高效且易用的工具,...

Global site tag (gtag.js) - Google Analytics