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的原型扩展被证明是无用的，但我根本就不熟悉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");

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

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

1 个答案: