Javascript链接和变量替换

Javascript chaining and variable substitute

本文关键字：替换 变量 链接 Javascript      更新时间：2023-09-26

我正在尝试使用变量替换来实现javascript链接。无法使其工作。感谢您的帮助。

var Class = function() {
 this.one = function() {
   alert('one');        
   return this;
 }
 this.two = function() {
   alert('two');
   return this;
 }
 if (this instanceof Class) {
    return this.Class;
 } else {
    return new Class();
 }
}
var test = new Class();
// this works
test.one().two();
var func = '.one().two()';
// want to make this work
test[func];

没有名为".one（）.tow（）"的函数

试试这个，

test['one']()['two']();

编辑：我相信你使用这个只是为了学习，而不是在生产现场。

强烈建议不要使用。你可能想尝试一个数组：

var funcs = ['one','two'];
for(var i = 0; i < funcs.length; i++) {
  test[funcs[i]]();
}

然后你可以把它包装成一个小函数：

function callChain(obj, funcs)
{
  for(var i = 0; i < funcs.length; i++) {
    obj[funcs[i]]();
  }
  return obj;
}

编辑：如果您的链存储为字符串：.one().two()，则可以使用split&字符串函数来动态生成数组。

好吧，您所要求的远不是最佳实践——所以我会给您一个不受欢迎的答案——使用eval
如果您的输入是字符串形式的通用代码，那么您实际上没有任何其他选项（特别是当您的函数具有参数-.one(1 + 0.5).two(new Date())时）。

例如，在您的Class中添加：

this.excecute = function(commands){
    eval('this' + commands);
};

然后：

test.excecute('.one().two(4 * 5)');

工作示例：http://jsbin.com/ipazaz/1/edit

这会发出警告"eval是邪恶的"（我认为是jslint），但我不认为函数是邪恶的。

更糟糕的是，如果你有字符串'one(); two(4 * 5);'呢
您也可以使用with:来实现这一点

this.excecute = function(commands){
    with(this){
        eval(commands);
    }
};

这有一个额外的警告："不要用'with'"-他们今天真的对我们有意见，不是吗？

工作示例：http://jsbin.com/ipazaz/2/edit

感谢大家的及时帮助。我最终接受了本·罗的建议。

var funcs = ['one','two'];
   for(var i = 0; i < funcs.length; i++) {
   test[funcs[i]]();
}

它很符合我的要求。感谢大家的帮助。你们都很棒。

您可以向构造函数添加一个方法：

 this.chain = function chain(){
   if (arguments.length && /'./.test(arguments[0])) {
    return chain.apply(this,arguments[0].split('.'));
   }
   var methods = [].slice.call(arguments),
       method = methods.shift();
   if(this[method] instanceof Function){
    this[method].call(this);
   }
   if (methods.length){
    chain.apply(this,methods);
   }
   return this;
 }
 // now you could do something like:
 test.chain('one.two.one.two.two');

或扩展Object.prototype

Object.prototype.chain = function chain(){
   if (arguments.length && /'./.test(arguments[0])) {
    return chain.apply(this,arguments[0].split('.'));
   }
   var methods = [].slice.call(arguments),
       method = methods.shift();
   if(this[method] && this[method] instanceof Function){
    this[method].call(this);
   }
   if (methods.length){
    chain.apply(this,methods);
   }
   return this;
};
// usage
({one:function(){console.log('I am one');},
  two:function(){console.log('I am two');}})
 .chain('one.two.one.one.two.two.two.one.two');

我认为更简单的方法是使用javascript的arrayreduce函数。我在写一些动态jquery的东西时需要这个。一旦你有了一系列可连锁的方法，你就可以很容易地完成以下操作。

var methods = ['next', 'child', 'parent'];
var element = methods.reduce(function(method){
    return $(selector)[method]();
});
console.log(element) //works! as all method names in methods array are applied and returned each iteration.

对于我的情况，接受的答案对我来说不起作用——它似乎只返回传递的obj，而不是obj加上它的链式方法。

相关文章：