Converting a javascript library to chain methods
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;
}
}
}
})();
With this html:
<div id="foo" data-stuff="XYZ">Test Div</div>
The current implementation:
(function ($) {
console.log(
$.attr($.getId('foo'), 'data-stuff') // XYZ
);
})(Stuff);
How do I rewrite my library above to make it chain like the following?
开发者_运维问答(function ($) {
console.log(
$.getId('foo').attr('data-stuff') // XYZ
);
})(Stuff);
Building specifically from your code, you could do this:
Example: 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;
}
}
}
})();
This adds a elem
property which stores the result of the getId
. The getId
returns this
, which is the object referenced by Stuff
containing all the methods. As such, you can directly call attr
from the returned object.
I would imagine you would want to include a return value for attr
of this
for when the attribute is being set, so that chaining can continue.
精彩评论