<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type=text/javascript charset=utf-8> // 1 简单的函数链式调用 function Dog(){ this.run = function(){ alert('dog is run...'); return this ; }; this.eat = function(){ alert('dog is eat...'); return this ; }; this.sleep = function(){ alert('dog is sleep...'); return this ; } } var d1 = new Dog(); d1.run().eat().sleep(); d1.eat(); d1.sleep(); </script> </head> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type=text/javascript charset=utf-8 src="../commons/jquery.js" ></script> </head> <body> <input id="inp" type="button" value="点击我" /> <script type=text/javascript charset=utf-8> // 程序启动的时候 里面的代码直接执行了，var的外部都不能访问，什么都不加的通过window访问，this通过相应对象访问。 (function(window , undefined){//函数形参 // $ 最常用的对象 返回给外界, 大型程序开发 一般使用'_'作为私用的对象(规范) function _$(arguments){ //id选择器 var idselector = /#w+/ ; this.dom ;//实例属性，arguments[0] = '#inp' if(idselector.test(arguments[0])){//正则表达式.test（string） this.dom = document.getElementById(arguments[0].substring(1)); } else { throw new Error(' arguments is error !'); } }; // 在Function类上扩展一个可以实现链式编程的方法，函数_$也可以用method这个方法 Function.prototype.method = function(methodName , fn){ this.prototype[methodName] = fn ; return this ; //_$.method，this就是函数类_$。 } // 在函数的原型对象上 加一些公共的方法 _$.prototype = { constructor : _$ , addEvent:function(type,fn){ // 给你的得到的元素 注册事件 if(window.addEventListener){// FF this.dom.addEventListener(type , fn); } else if (window.attachEvent){// IE this.dom.attachEvent('on'+type , fn); } return this ; }, setStyle:function(prop , val){ this.dom.style[prop] = val ; return this ; } }; window.$ = _$ ;//函数名表示函数地址 _$.onReady = function(fn){ // 给函数（类）加静态方法,只能通过函数名（类名）访问。onReady是这个匿名函数的名字，fn是函数的参数。 window.$ = function(){//$("#div")返回jquery对象 return new _$(arguments);//有参构造函数， }; fn(); // 3 实现链式编程 _$.method('addEvent',function(){ // }).method('setStyle',function(){ // }); }; })(window); // 函数立即执行，传入实参window， $.onReady( function(){ var inp = $('#inp'); alert(inp.dom.nodeName); alert($('#inp')); inp.addEvent('click',function(){ alert('我被点击了!'); }).setStyle('backgroundColor' , 'red'); }); </script> </body> </html>