首页 > PHP资讯 > HTML5培训技术 > 小谈Jquery框架

小谈Jquery框架

HTML5培训技术
  现在Jquery框架对于开发人员基本上是无人不知,无人不晓了,用起来十分的方便,特别是选择器十分强大,提高了我们的开发速度。但是好多人也只是停留在了会用的基础上,我个人觉得会用一个框架不算什么,只能说明你对那个框架比较熟悉,知道里面的思想和实现才是王道。有好多大牛对Jquery框架进行了剖析,今天我只是根据我的见解来分析一下。
 
          一段代码如下:
 
 
        (function (win) {
            var _$ = function (selector, context) {
                return new _$.prototype.Init(selector, context);
            }
            _$.prototype = {
                Init: function (selector, context) {
                    this.elements = [];
                    var context = context || document;
                    if (context.querySelectorAll) {
                        var arr = context.querySelectorAll(selector);
                        for (var i = 0; i < arr.length; i++) {
                            this.elements.push(arr[i]);
                        }
                    }
                    ////这一块是选择器的实现,没有写完,可以自己实现
                },
                each: function (callback) {
                    if (this.elements.length > 0) {
                        for (var i = 0; i < this.elements.length; i++) {
                            callback.call(this, i, this.elements[i]);
                        }
                    }
                }
            }
            _$.prototype.Init.prototype = _$.prototype;
            window.$ = _$;
        })(window || global);
 
 一般的我们写一个函数,调用的方法如下:
 
               var   Demo=function(){
 
 
 
               }
 
           Demo.prototype= {
 
                    method:function(){
 
                    }
 
             }
 
var   demo=new  Demo();//实例化Demo
 
之后我们可以调用method方法:
 
demo.method();
 
如果这样的话,我们每次都要实例化一下,才能调用里面的方法,岂不是有点儿烦?
 
我想直接这样调用:Demo().method();这样不是省了一段代码(哈哈,程序员都喜欢偷懒)。
 
那么我们再写一段代码:
 
   var  demo=function(){
 
   return  new  Demo();
 
    }
 
然后就可以demo().method()这样调用了。
 
如果你理解了我讲的这个,相信下面的代码你就会明白了:
 
        var _$ = function (selector, context) {
                return new _$.prototype.Init(selector, context);
        }
接下来我们再看看_$.prototype.Init方法的扩展
              Init: function (selector, context) {
                    this.elements = [];
                    var context = context || document;
                    if (context.querySelectorAll) {
                        var arr = context.querySelectorAll(selector);
                        for (var i = 0; i < arr.length; i++) {
                            this.elements.push(arr[i]);
                        }
                    }
                    ////这一块是选择器的实现,没有写完,可以自己实现
                }
这里面有selector,context两个参数:
selector其实就是所谓的选择器符号了,我们是根据这个来找到dom节点对象的。
context就是我们所说的执行上下文了,通常都是window,这个是可选参数,只是为了以后的扩展。
然后我们要获取节点对象了 
      var arr = context.querySelectorAll(selector);
     document.querySelector和document.querySelectorAll是w3c标准新加入的方法 ,是已经写好的选择器,但是ie8以下的版本不支持。
我们要优先查看有没有这个方法,有的话就直接用这个了。
没有就直接用document.getElementById,  document.getElementsByClassName(IE8以下不兼容,须扩展), document.getElementsByName,document.getElementsByTagName扩展了
(这个后面会讲具体实现)。
    this.elements=[]保存查询出的dom节点对象。
 然后说说each方法,这个其实是用回掉简化 elements的循环。
 
   each: function (callback) {
                    if (this.elements.length > 0) {
                        for (var i = 0; i < this.elements.length; i++) {
                            callback.call(this, i, this.elements[i]);
                        }
                    }
                }
 
   这些方法我们都实现了,但是有一个问题:怎么让Init方法的this.elements这个属性让$也能共享呢?他们的作用域不一样呢。
 
var _$ = function (selector, context) {
                return new _$.prototype.Init(selector, context);
         }
我们最终得想法其实是想用$().method()这种方式去对dom节点做事件绑定,动画效果,样式设置等等处理。
 
我们知道:如果让两个对象共享一个属性,那么有一个方法就是让他们的原型指向一致
那么,关键的一段代码上场了:
 _$.prototype.Init.prototype = _$.prototype;
 
这样之后我们就可以让_$和Init实现对elements的共享了。
 
Jquery框架的核心代码其实就是这些了。后面就可以对$进行方法扩展了。
今天就讲到这,有些说法不是很规范,但是应该能看懂,后面会陆续讲各个方法的具体实现。。。
 
 

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持48不支持0