javascript - 实现像 jQuery 这样的可链接 JavaScript 框架的最直接方法是什么？

Question

我想编写一个小的 JavaScript(框架)，它可以将函数与所有后续函数链接起来，并了解其前身的数据。

基本上，我对 jQuery 提供的膨胀(我意识到它很小，对于我的更小的项目来说虽然它膨胀)不感兴趣，但我想模仿它的一些行为——主要是为了学习目的和有可用的数据到所有链式函数。

我很乐意，例如能够做类似的事情:

myJsLib.processForm("user", "pass").url("http://domain.dev/form.php").queryString({ secure: true, errorPage: "login_failure.htm" });

在上面的例子中，所有函数都必须在某种程度上知道对方在做什么。

或者，更具体地说:

myJsLib.getDataIntoArray(jsonObjectOrWhatever).each(function(item) { alert(item); });

其中“item”是 getDataIntoArray() 创建(并返回？)的数组。

我希望我的措辞恰当。我试图在这个例子上有点过火。理解 jQuery 的原型(prototype)扩展被证明是无用的，但我根本不精通 JavaScript。非常感谢您提供详细(但已简化)的解释和代码示例。

非常感谢。

编辑:多亏了安德鲁，我才能够想出一些看起来令人满意的东西。请纠正我可能有的任何误解，谢谢。

function myLib()
{
this.properties = ['status', 'window', 'ui'],
this.inputArrayParms = function(parms)
{
    for (var i = 0, len = parms.length; i < len; i++)
    {
        this.properties[this.properties.length] = parms[i];
    }
    return this;
},
this.each = function(callback)
{
    for (var i = 0, len = this.properties.length; i < len; i++)
    {
        callback(this.properties[i]);
    }
    return this;
}
}

var f = new myLib;
f.inputArrayParms(["one", "two", "three"]).each(function(theMsg){ alert(theMsg); });

这似乎按预期工作。有什么注意事项吗？

Answer 1

这叫做 fluent interface创建它的最佳方法是拥有一个从每个函数返回的主对象(如 jQuery 对象)，允许将其他函数调用链接在一起。

这是一个小例子:

function foo() {
    this.first = function(first) {
        alert(first);
        return this;
    }
    this.second = function(second) {
        alert(second);
        return this;
    }
}

注意 foo 类有两个方法，first 和 second。由于这两种方法都返回 this 它们可以按照您希望的任何顺序链接起来:

new foo().first("hello").second("world");
new foo().second("hello").first("world");
new foo().first("hello").first("world");

你明白了:)

考虑流畅界面的一个好方法是它们更容易流动，而且可以说更容易阅读。上面的示例只是对这种更常规用法的替代:

f = new foo();
f.first("hello");
f.second("world");

这意味着流畅的接口(interface)除了强制您返回 this 之外不会规定类的任何实现，以便可以链接方法调用。这意味着您可以向此类添加可在任何函数中使用的字段，就像任何其他类一样。