轉換一個JavaScript庫鏈方法

Question

var Stuff = (function() { 
    return { 
     getId: function (id) { 
      return document.getElementById(id); 
     }, 
     attr: function (ele, attr, newVal) { 
      var newVal = newVal || null; 
      if (newVal) { 
       ele.setAttribute(attr, newVal); 
      } else { 
       var attrs = ele.attributes, 
       attrslen = attrs.length, 
       result = ele.getAttribute(attr) || ele[attr] || null; 

       if (!result) { 
        for (var i = 0; i < attrslen; i++) 
         if (attr[i].nodeName === attr) result = attr[i].nodeValue; 
       } 
       return result; 
      } 
     } 
    } 
})(); 

有了這個網站：

<div id="foo" data-stuff="XYZ">Test Div</div> 

當前實現：

(function ($) { 
    console.log(
     $.attr($.getId('foo'), 'data-stuff') // XYZ 
    ); 
})(Stuff); 

如何改寫上面我的圖書館，使其鏈像下面？

(function ($) { 
    console.log(
     $.getId('foo').attr('data-stuff') // XYZ 
    ); 
})(Stuff); 

Answer 1

大廈專門從你的代碼，你可以這樣做：

例子：http://jsfiddle.net/patrick_dw/MbZ33/

var Stuff = (function() { 
    return { 
     elem:null, 
     getId: function (id) { 
      this.elem = document.getElementById(id); 
      return this; 
     }, 
     attr: function (attr, newVal) { 
      var newVal = newVal || null; 
      var ele = this.elem; 
      if (newVal) { 
       ele.setAttribute(attr, newVal); 
      } else { 
       var attrs = ele.attributes, 
       attrslen = attrs.length, 
       result = ele.getAttribute(attr) || ele[attr] || null; 

       if (!result) { 
        for (var i = 0; i < attrslen; i++) 
         if (attr[i].nodeName === attr) result = attr[i].nodeValue; 
       } 
       return result; 
      } 
     } 
    } 
})(); 

這增加了elem屬性，它存儲了getId的結果。 getId返回this，這是包含所有方法的Stuff引用的對象。因此，您可以直接從返回的對象中調用attr。

我想你會想要包含attr的this的返回值，因爲當屬性被設置時，可以繼續鏈接。