javascript - JavaScript 中可以实现这种链接吗？

Question

我正在开发一个类似于 elFinder 的文件管理器框架。我当前的代码工作正常，但现在我想让它看起来更好并添加链接(我不确定它是链接还是装饰器模式)。

这是我想要做的示例:

function UI() {}

UI.prototype.folders = function(){
    return [];
}

UI.prototype.folders.prototype.getSelectedFolder = function(){
   return {};
}

调用 UI.folders() 应返回文件夹对象数组。因此，如果您调用 UI.folders() 您会得到类似于以下内容的内容:

[
    Object { name="folder1", selected=false }, 
    Object { name="folder2", selected=false }, 
    Object { name="folder3", selected=true }
]

调用 UI.folders().getSelectedFolder() 会过滤 UI.folders() 的结果，并返回:

Object { name="folder3", selected=true }

这可能吗？在这种情况下应该说“链式”还是“装饰图案”？
如果不是 - 还有其他更合适的方法吗？

任何帮助将不胜感激!

Answer 1

您问题中的代码并不反射(reflect)正确的实现，但要回答您的直接问题，是的，这......

UI.folders().getSelectedFolder()

...将是方法链的一个示例。

<小时/>

装饰器模式是不同的。如果您有一组方法，并且每个方法都应始终首先调用某个公共(public)函数，则可以创建一个装饰器，该装饰器将返回一个首先调用公共(public)函数的函数，然后调用实际的函数...

function foo() {
    console.log('I\'m foo, and I\'m first, and I was given these args:', arguments);
}

function decorateWithFoo(decorated) {
    return function () {
        foo.apply(this, arguments);
        decorated.apply(this, arguments);
    };
}

<小时/>

因此，您可以使用 decorateWithFoo 创建一个始终首先调用 foo 的函数...

  // create and decorate bar()
var bar = function(a,b) {
    console.log('I\'m bar, and I was called after "foo", and was given args:', a, b);
};
bar = decorateWithFoo(bar);

bar(123, 456); // this will first call `foo()`, then (the original) `bar()`.

<小时/>

  // create and decorate baz()
var baz = function(a,b) {
    console.log('I\'m baz, and I was called after "foo", and was given args:', a, b);
};
baz = decorateWithFoo(baz);

baz(123, 456); // this will first call `foo()`, then (the original) `baz()`.

某些语言具有用于创建装饰器的内置语法。 JavaScript 目前还没有。

<小时/>

如果您发现自己以不同的方式使用装饰器，您可以创建另一个函数来设置初始装饰器函数...

function generateDecorator(decorator) {
    return function (decorated) {
        return function () {
            decorator.apply(this, arguments);
            decorated.apply(this, arguments);
        };
    };
}

所以我们原来的 decoreateWithFoo 可以这样设置......

function foo() {
    console.log('I\'m foo, and I\'m first, and I was given these args:', arguments);
}

var decorateWithFoo = generateDecorator(foo);