在 JavaScript 中链接函数？答案

【问题标题】：Chaining a function in JavaScript?在 JavaScript 中链接函数？
【发布时间】：2010-07-04 22:26:18
【问题描述】：

我想创建一个向我的 localStorage 对象添加项目的函数。例如：

alert(localStorage.getItem('names').addItem('Bill').getItem('names'));

第一个方法是 getItem，它获取 localStorage 对象的项目...但 addItem 将是一个自定义函数。这一系列功能最终会提醒比尔。

那么，我如何将这个函数链添加到 localStorage？

【问题讨论】：

这没有任何意义。 getItem 会返回什么？
getItem 应该在链的末尾，但除此之外它可以完成
不应该只是alert(localStorage.getItem('names').addItem('Bill'))。
是的，如果它返回包括比尔在内的所有姓名，那也可以工作......

标签： javascript html chaining local-storage

【解决方案1】：

这是可能的，如果您创建一个使链接成为可能的包装器/装饰器对象。例如，这就是 jQuery 的工作方式。但它在这种情况下无用。

不过，我做了一个可能的实现。

但是 getItem 会破坏链条（所以它应该总是在最后使用）。

storage().setItem('names', 'Bill').getItem('names'); // or
storage().setItem('names').addItem('Bill').getItem('names'); // or
storage().key('names').value('Bill').set().get('names');

实施

(function( window, undefined ) {

var storage = function( key, value ) {
  return new storage.init( key, value );
};

storage.init = function( key, value ) {
  this._key   = key;
  this._value = value;
};

storage.init.prototype = {

  key: function( key ) {
    this._key = key;
    return this;
  },

  value: function( value ) {
    this._value = value;
    return this;
  },

  get: function( key ) {
    key = isset(key) || this._key;
    return localStorage.getItem( key );
  },

  set: function( key, value ) {
    this._key   = key   = isset(key)   || this._key;
    this._value = value = isset(value) || this._value;
    if ( key && value ) {
      localStorage.setItem( key, value );
    }
    return this;
  },

  addItem: function( value ) {
    this._value = isset(value) || this._value;
    if ( this._key && value !== undefined ) {
      localStorage.setItem( this._key, value );
    }
    return this;
  },

  // aliases...
  getItem: function( key ) {
    return this.get( key );
  },
  setItem: function( key, value  ) {
    return this.set( key, value );
  }
};

function isset( value ) {
  return value !== undefined ? value : false;
}

window.storage = storage;

})( window );

【讨论】：

非常感谢，我一定是搞砸了。我复制并粘贴您的代码，然后添加 alert(storage.setItem('names').addItem('Bill').getItem('names'));就在它下面，我得到一个 storage.setItem 不是一个函数？
@Oscar – 你忘了括号：alert(storage().setItem('names').addItem('Bill').getItem('names'))
@Oscar Marcel 是对的，它现在为存储链创建实例，所以你需要写storage()。我可以将它修改为只有一个对象，但它可能会变得不那么健壮。
啊，我明白了，是的：alert(storage().setItem('names').addItem('Bill').addItem('Tom').getItem('names')) ;提醒 Tom 和 localStorage.getItem('names')。几乎完美，但我怎样才能在同一个警报中返回 Bill、Tom 等？基本上，将它们返回一个数组？抱歉，如果这些东西超出了我的想象。不过我正在努力学习...我喜欢这种风格不仅仅是简单的功能...

【解决方案2】：

这是不可能的。

如果getItem('names') 返回Bill，则不能调用addItem。
可以将addItem 和getItem 方法添加到存储中的每个项目，但这是一个可怕的想法。

【讨论】：

有可能（不增加 localStorage）。看我的回答。不是一个很有用的案例，但很好地演示了 装饰器模式。
@galambalazs：不可能使用他的确切电话。
getItem() 打破了链条，这很明显，但您不需要为存储中的每个元素添加方法。
不，没有，但你试图做的是以一种糟糕的方式非常类似于 jQuery：D
如何建议制作 addItem 函数？如果不添加项目是很多额外的标记。我更喜欢用 DRY 的方式来做......

【解决方案3】：

最简单的事情就是根本不这样做:)

如果这不起作用，那么有一些解决方案，例如修改本机 getItem 函数，但这是一个非常糟糕的主意。最好的方法是围绕 localStorage 编写一个包装器，就像 jQuery 对 DOM 节点所做的那样，并使用该包装器来获取项目并将其放入本地存储中。包装器可以有一个类似的接口：

ApplicationStorage
    getItem()
    setItem()
    key()
    removeItem()

然后在ApplicationStorage 中定义可接受的类型包装器，如Array，其具有类似addItem 的方法

ApplicationStorage.Array
    addItem()

当调用applicationStorage.getItem("names") 时，返回一个ApplicationStorage.Array 的对象，其中包含方法addItem，这将使链接成为可能。

【讨论】：

【解决方案4】：

getItem('names').addItem('Bill').getItem('names')

我一头雾水，怎么得到一个没有被添加的物品？？？

getItem返回一个对象包含addItem方法，而addItem方法返回一个对象包含getItem方法

不管怎样，看看下面的教程。它并不能完全解决您的问题，但会给您一个想法。

http://guanfenglin.spaces.live.com/blog/cns!4E0822BF6C959B7F!668.entry

【讨论】：