JavaScript_14设计模式(链式编程【八】)模拟jquery底层代码实现1

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_36282409/article/details/84317718
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    <script type="text/javascript" charset="UTF-8">
        //模拟jQuery底层链式编程
        //块级作用域  
        (function(window,undefind){
            //特点1:程序启动的时候,里面的代码直接执行了。
            
            //特点2:内部的成员变量,外部无法访问。(除了不加var修饰的变量)
            //$ 最常用的对象,返回给外界。(大型程序一般使用"_"作为私有对象,是软件编程的规范。)
            function _$(arguments){
                //实现代码
                
            }
            
            //在function类上,扩展实现一个链式编程的方法。
            Function.prototype.method=function(methodName,fn){
                this.prototype[methodName]=fn;
                return this;//链式编程的关键。
            }
            
            
            //在_$的原型对象上,加一些公共的方法。
            _$.prototype={
                constructor:_$,
                addEvend:function(){
                    alert('addEvend');
                    return this;
                    
                },
                setStyle:function(){
                    alert('setStyle');
                    return this;
                }
            };
            
            
            //window上,先注册一个全局变量。与外界产生关系。
            window.$=_$;
            
             //写一个准备的方法
             _$.onReady=function(fn){
                 //1 实列化出来_$对象,真正的注册到window上。
                 window.$=function(){
                     return new_$(arguments);
                 };
                 //2执行传入进来的代码。
                 
                 fn();
                 
                 //3.实现链式编程。
                 _$.method('addEvend',function(){
                     
                 }).method('setStyle',function(){
                     
                 });
                 
             };
             
                     
        })(window);//程序入口window传入作用域中。
            
      //   alert('我执行了');//程序的入口,把window传入块级作用域中        
    $.onReady(function(){
        //jquery代码
     alert($('#inp'));
       //$('#inp').addEvend().setStyle();           
    });        
    </script>
    
</head>
<body>
    <h1>New Web Project Page</h1>
</body>

猜你喜欢

转载自blog.csdn.net/weixin_36282409/article/details/84317718