《javascript设计模式》笔记之第六章:方法的链式调用
这一章要实现的就是jQuery的那种链式调用,例子:
$(this).setStyle(‘color‘, ‘green‘).show();
function $() { var elements = []; for (var i = 0, len = arguments.length; i < len; ++i) { var element = arguments[i]; if (typeof element == ‘string‘) { element = document.getElementById(element); } if (arguments.length == 1) { return element; } elements.push(element); } return elements; }
(function() { // Use a private class. function _$(els) { this.elements = []; for (var i = 0, len = els.length; i < len; ++i) { var element = els[i]; if (typeof element == ‘string‘) { element = document.getElementById(element); } this.elements.push(element); } } // The public interface remains the same. window.$ = function() { return new _$(arguments); }; })();
(function() { function _$(els) { // ... } _$.prototype = { each: function(fn) { for ( var i = 0, len = this.elements.length; i < len; ++i ) { fn.call(this, this.elements[i]); } return this; }, setStyle: function(prop, val) { this.each(function(el) { el.style[prop] = val; }); return this; }, show: function() { var that = this; this.each(function(el) { that.setStyle(‘display‘, ‘block‘); }); return this; }, addEvent: function(type, fn) { var add = function(el) { if (window.addEventListener) { el.addEventListener(type, fn, false); } else if (window.attachEvent) { el.attachEvent(‘on‘+type, fn); } }; this.each(function(el) { add(el); }); return this; } }; window.$ = function() { return new _$(arguments); }; })();
$(‘test-1‘, ‘test-2‘).show(). setStyle(‘color‘, ‘red‘). addEvent(‘click‘, function(e) { $(this).setStyle(‘color‘, ‘green‘); });
Function.prototype.method = function(name, fn) { this.prototype[name] = fn; return this; }; (function() { function _$(els) { // ... } /* Events * addEvent * getEvent */ _$.method(‘addEvent‘, function(type, fn) { // ... }).method(‘getEvent‘, function(e) { // ... }). /* DOM * addClass * removeClass * replaceClass * hasClass * getStyle * setStyle */ method(‘addClass‘, function(className) { // ... }).method(‘removeClass‘, function(className) { // ... }).method(‘replaceClass‘, function(oldClass, newClass) { // ... }).method(‘hasClass‘, function(className) { // ... }).method(‘getStyle‘, function(prop) { // ... }).method(‘setStyle‘, function(prop, val) { // ... }). /* AJAX * load. Fetches an HTML fragment from a URL and inserts it into an element. */ method(‘load‘, function(uri, method) { // ... }); window.$ = function() { return new _$(arguments); }); })();
Function.prototype.method = function(name, fn) { // ... }; (function() { function _$(els) { // ... } _$.method(‘addEvent‘, function(type, fn) { // ... }) // ... window.installHelper = function(scope, interface) { scope[interface] = function() { return new _$(arguments); } }; })();
installHelper(window, ‘$‘); $(‘example‘).show();
window.API2 = window.API2 || {}; API2.prototype = function() { var name = ‘Hello world‘; // Privileged mutator method. setName: function(newName) { name = newName; return this; }, // Privileged accessor method. getName: function(callback) { callback.call(this, name); return this; } }();
var o2 = new API2; o2.getName(console.log).setName(‘Meow‘).getName(console.log);
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。