码迷,mamicode.com
首页 > Web开发 > 详细

js22--链式调用

时间:2017-05-20 13:18:39      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:function   name   实例   dog   win   else   this   alert   实参   

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

 

js22--链式调用

标签:function   name   实例   dog   win   else   this   alert   实参   

原文地址:http://www.cnblogs.com/yaowen/p/6881905.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!