Question

我正在编写一些代码，并注意到jquery有一个非常酷的功能

例如：

$(selector).addClass('').on('').on ('').remove();

我能做到2。

func(...).func2('');

想知道怎么做（我想我没解释得对）。

这家伙也有基准测试。 http://benchmarkjs.com/

如果有人可以帮助我会很棒！提前谢谢

Answer 1

只需回归自己的每一个功能：

YourClass.prototype.a = function() {
    // do a stuff
    return this;
};
YourClass.prototype.a = function() {
    // do b stuff
    return this;
};

new YourClass().a().b();

In the comments，你说：

在jquery中如果我请求html（$（）。html（））它返回线程并仍然有效

嗯，这也很容易：

YourClass.prototype.html = function(val) {
    if (val === undefined) {
        // return the html  
    } else {
        // set the html to val
        return this;
    }
}

Answer 2

键总是在每个方法上返回对象（读取上下文）。最简单的例子：

var lib = {
  a: function() {
    //...
    return this;
  },
  b: function() {
    //...
    return this;
  }
};

并使用它：

lib.a().b();

但是由于这是一件很常见的事情，因此流畅的界面方法是fluent装饰者：

// A fluent function decorator:
// Takes a function and returns a function that returns `this`
var fluent = function(f) {
  return function() {
    f.apply(this, arguments);
    return this;
  };
};

var lib = {
  a: fluent(function() {
    //...
  }),
  b: fluent(function() {
    //...
  })
};

lib.a().b();

prototypes的另一种方法，使用相同的帮助程序：

function Lib() {} // constructor
Lib.prototype.a = fluent(function() {
  //...
});
Lib.prototype.b = fluent(function() {
  //...
});

new Lib().a().b();

fluent装饰器在函数开头立即为您提供线索，而不是必须追踪函数的返回值。

如何创建多个jQuery函数

2 个答案: