Question

我在google上搜索过，并阅读了很多关于js模式的文章，让我感到困惑。我在stackoverflow上搜索，仍然感到困惑。所以，我想，我必须在这里问一下。（我仍然是javascript中的新手）

我想“创建模块，单例或某种模式，然后在同一时间滚动/调用多个方法”。

示例：Yourlib.getId('elmID').setColor('somecolor').setHtml('somehtml').show().blaa.blaa.blaa

如何创建基本模式？

var Yourlib = (function() {
    var anyPrivateVar = blablabla;
    anyFunctions(){
        any stuff...
    }

    return {
        setHtml: blablabla,
        method2: function() {
            anything... 
        }
        getId: function() {
            anything...
        },
        setColor: function() {
            anything...
        },
        show: function() {
            anything...
        }
    }
}())

如何创建模式，所以我可以同时调用/滚动方法？ Yourlib.getId('elmID').setColor('somecolor').setHtml('somehtml').show().blaa.blaa.blaa

Answer 1

这种模式有时被称为“链接”，或者当用于最终构建其他类的选项类时，“构建器”模式。

基本上，这样做的方法是让每个函数返回一个对象，在该对象上可以调用后续方法（通常该对象与调用当前方法的对象相同）。

在JavaScript中，你会这样做：

 var Point = function(x, y) {
   this.x = x;
   this.y = y;
 };

 var PointBuilder = function() {
   this.x = null;
   this.y = null;
 };

 PointBuilder.prototype.setX = function(x) {
   this.x = x; 
   return this;  // <= so that one can call .setY() on the result
 };

 PointBuilder.prototype.setY = function(y) {
   this.y = y; 
   return this;  // <= so that one can call .setX() on the result
 };

 PointBuilder.prototype.build = function() {
   return new Point(this.x, this.y);
 };

上面的代码是一个简单的例子，但你明白了。基本上，从您的方法返回this或返回提供剩余可用方法的其他对象。

Answer 2

它被称为method chaining并使用heavily in jQuery。您只需返回您希望能够链接的方法中的当前上下文：

show: function() {
    // allow chaining
    return this;
}

Answer 3

我认为你要求链接方法。这是一个简单的例子。关键是return反对。

var obj = {  
    method1: function() { alert('first');   return obj; },
    method2: function() { alert('second');  return obj; },
    method3: function() { alert('third');   return obj; },
    method4: function() { alert('fourth');  return obj; }
}

obj.method1().method2().method3().method4();

Live Demo

Answer 4

你应该看看＆＃34;流利的＆＃34;也是api。我个人不会过多地考虑流利的api，但人们在编写测试时会特别喜欢他们的阅读方式。

链接也是一种很好的方式来推迟＆＃34;实际计算（一种懒惰的评估） - 请参阅下划线的_.chain（）方法与其value（）方法相结合[我不认为下划线实际上做了太多花哨的事情]

javascript模式：调用多个方法

4 个答案: