js22--链式调用 

<!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>

 

posted @ 2017-05-20 12:39  无天666  阅读(455)  评论(0)    收藏  举报