JQuery14(Jq原理 封装)

想了解一下Jq函数的实现原理  顺便对JS一些知识回顾  比用JQ吃力一些 

理解的也不是很深 等看完所有的Jq 做一个播放器 来加深理解 看看和现在的理解有什么出入

这个就是Jq的封装函数

分解解释一下下面代码

(function(window,undefined)
{
 var   NjQuery = function(selector) {

    return new NjQuery.prototype.init(selector);
}
NjQuery.prototype=
{
    constructor:NjQuery,
    init:function(selector)
    {

    }
}
NjQuery.prototype.init.prototype = NjQuery.prototype;
window.NjQuery = window.$=NjQuery;
})(window);

 1）window 就是传入的窗体函数

2）（function（window）{}）(window) 带window的立即执行函数 就是只要引用就会把window代入function 并执行

3）window.NjQuery = window.$=NjQuery; 这是window全局变量 就可以勇士 Njquery和$ 来调用  var   NjQuery定义的function方法

剩下的需要面向对象知识 这里详细说一下

封装暂时理解有俩个好处

1） 可以在主界面 使用关键字.方法的方式调用自己的功能方法

2） 可以更好的封装自己的属性 不让外面的对象污染

我们分解一下

 

            // //我们定义一个cat的类
            function Cat()
            {
        
            }
           
           
            // //原型方法 
            // //在原型方法里定义里 init 方法 say方法  constructor:Cat 指向自己
            // //这个需要理解一些面对对象的意识
            // //prototype 是里定义的东西 会在以后 实例化 的对象里 统一使用
            Cat.prototype=
            {
                constructor:Cat,
                init:function()
                {
                  this.name="miaomiao";
                  this.eat='fish';
                },
                say:function()
                {
                    console.log(this.name,this.eat);
                }
            }

       

            var c =  new Cat();   
       
            c.init(); //加上后会输出miaomiao fish 
            c.say(); //没有实例化init 会输出undefined undefined

 上面的代码 我们如果不加  c.init(); 就会输出undefined undefined  因为我们并没有初始化init()所以 say 不知道输出什么

在加上 c.init(); 后 就会输出正常数值  但是问题来了 每一次运行 我们都要掉一次  c.init();很麻烦 所以 我们要修改代码

   function Cat()
            {
              return  Cat.prototype.init();
       
            }
           
            Cat.prototype=
            {
                constructor:Cat,
                init:function()
                {
                  this.name="miaomiao";
                  this.eat='fish';
                },
                say:function()
                {
                    console.log(this.name,this.eat);
                }
            }
            var c =  new Cat(); 
            c.say();  

我们在cat类里加入了一个return 返回了init方法

这样就好狠多 但是 我们在用Jq的时候 我们是直接调用$('')并没有每次引入JQ的时候还要实例化对象的代码对吧

我们继续

      function Cat()
            {
          
              return new Cat.prototype.init();
            }
           
            Cat.prototype=
            {
                constructor:Cat,
                init:function()
                {
                  this.name="miaomiao";
                  this.eat='fish';
                },
                say:function()
                {
                    console.log(this.name,this.eat);
                }
            }
            Cat.prototype.init.prototype=  Cat.prototype;
          
            var c =  Cat();
            c.say();  

我们把 return的代码 new 了一下 但是 只改这个地方会报错 因为new了init并不实例化整个Cat.prototype;

所以 我们要修改init的原型指向 加入了   Cat.prototype.init.prototype=  Cat.prototype; 方法

这样 我们每一次在调用的时候可以直接使用 var 里的c  

当然如果想实现在HTML界面使用自己定义的JQ 要把 window里 定义自己的对象 这样 就可以在别的界面使用全局了

window.NjQuery = window.$=NjQuery; 就是这行代码