javascript - javascript模式：调用多个方法

Question

我在谷歌上搜索过，并阅读了许多关于 js 模式的文章，n 感到困惑。我在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

score 1 · Accepted Answer

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

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

在 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从您的方法返回或返回提供剩余可用方法的其他对象。

score 0 · Accepted Answer

我认为您正在要求链接方法。这是一个简单的例子。关键是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();

现场演示

score 0 · Accepted Answer

它被称为方法链，并在 jQuery 中大量使用。您只需在希望能够链接的方法中返回当前上下文：

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

score 0 · Accepted Answer

你也应该看看“流利的”api。我个人不太喜欢流利的 api，但人们确实喜欢他们的阅读方式，尤其是在编写测试时。

链接也可以是“延迟”实际计算的好方法（某种惰性评估）-参见下划线的 _.chain() 方法及其 value() 方法[我不认为下划线实际上做任何太花哨的事情]

javascript - javascript模式：调用多个方法

4 回答 4

Related

Reference