data方 jquery 源码 jquery源码分析

转载

mob64ca13fa2f9e 2023-08-18 12:00:43

文章标签 data方 jquery 源码 jQuery源码 jQuery jquery 封装 文章分类 jQuery 前端开发

jQuery源码简析

jQuery是一个js库通过js封装一些方法让dom操作更简便提高开发效率

jQuery可以分为3大部分来看

第一部分jQuery的封装

在jQuery里想要实现调用而不去污染其他变量封闭作用域当然用到了闭包配合立即执行函数来实现
在jQuery中通过window.$ = window.jquery = jquery来把jQuery对象保存到全局上使其在别的模块中可以调用
在jQuery中通过new jQuery.prototype.function来包装成了jQuery对象来方便方法调用

(function(){
    function jQuery (select){
        return new jQuery.prototype.init(select);                  //把构造函数保存出来  包装成实例化对象
    }
    ());
 window.$ = window.jquery = jquery                                 //把jQuery保存到全局上方便调用

第二部分jQuery的方法封装

在jQuery方法的封装上就是在jQuery原型上写对dom的操作方法以下是我写的一些比较典型的方法还有比较注意的地方就是链式调用在方法最后return this来实现在源码中方法都写在了实参里这样可以减少在原型链上频繁调用

(function(){
    function jQuery (select){
        return new jQuery.prototype.init(select);                  //把构造函数保存出来  包装成实例化对象
    }

    jQuery.prototype.css = function(config){
        for(var i = 0;i < this.length; i++){           //把类数组里的标签拿出来
            for(var attr in config){                   //把每个config拿出来
                this[i].style[attr] = config[attr];    //把config 设在this[i]上
            }
        }
        return this;                                   //链式操作     拿到谁把谁再返回出去方便下次操作    
    }


    jQuery.prototype.get = function(num){
        // if(num == null){
        //     return [].slice.call(this,0);
        // }else{
        //     if(num >= 0){
        //         return this[num];
        //     }else{
        //         return this.[num + this.length]
        //     }
        // }

        //简写  双重判断
        return num != null ? (num >= 0 ? this[num] : this[num + this.length]) : [].slice.call(this,0); 
    }

    jQuery.prototype.eq = function(num){
        var dom = num != null ? (num >= 0 ? this[num] : this[num + this.length]): null;
        return jQuery(dom)      //包裹成jQuery对象
    }

    jQuery.prototype.add = function(select){
        var curObj = jQuery(select);
        var baseObj = this;
        var newObj = jQuery();

        for(var i = 0; i < curObj.length; i ++){
            newObj[this.length++] = curObj[i];     //把curObj 放入nweObj
        }
        for(var i = 0; i < baseObj.length; i ++){
            newObj[this.length++] = baseObj[i];     //把baseObj 放入newObj
        }
        return newObj;
    }

    jQuery.prototype.on = function(type,handle){
        for(var i = 0;i < this.length;i ++){
            if(!this[i].cacheEvent){
                this[i].cacheEvent = {};      //创建缓存对象
            }
            if(!this[i].cacheEvent[type]){     //缓存中是否有type类型
                this[i].cacheEvent[type] = [handle]
            }else{
                this[i].cacheEvent[type].push(handle);  //把执行函数放进去
            }    
        }
    }

    jQuery.prototype.trigger = function(type){
        var params = arguments.length > 1 ? [].slice.call(arguments,1) : [];
        var self = this;
        for(var i = 0; i <this.length;i ++){
            this[i].cacheEvent[type].foreach(function(ele,index){
                ele.apply(self,params)
            })
        }
    }

    jQuery.prototype.Queue = function(){              //type 起的队列名字   handle  队列内容   type,handle
        var queueObj = this;                          //jQuery对象
        var queueName = arguments[0] || 'fx';         //传参第一位  队列起名
        var addFunc = arguments[1] || null;          //传参第二位  队列内容
        var len = arguments.length;

        if(len == 1){
            return queueObj[0][queueName];     //有名字的话把名字传进来
        }
        //判断 dome对象有么有名字  没有名字填入名字有名字把内容填进去
        queueObj[0][queueName] == undefined ? queueObj[0][queueName] = [addFunc] : queueObj[0][queueName].push(addFunc);
        return this;
    }
    

    jQuery.prototype.Dequeue = function(type){
        var self = this;                        //外部jq对象
        var queueName = arguments[0] || 'fx';   //传进来的队列名
        var queueArr = this.Queue(queueName);   //把这个队列拿出来
        var currFunc = queueArr.shift();        //把队列里的值删掉
        //判断队列里有没有值了  没有值就成为递归出口
        if(currFunc == undefined){
            return;
        }  
        var next = function() {            //巧妙用next参数进行下一次出队
            self.Dequeuee(queueName);
        }
        currFunc(next);
        return this;
    }


    jQuery.prototype.Deferred = function(){
          var arr = [
              [
                  jQuery.callbacks('once memory'),'done','resolve'  //done  已完成的  memory 内存  once 一次  resolve解决 决定
              ],[
                  jQuery.callbacks('once meomry'),'fail','reject'   //fail  失败的  regect 拒绝的
              ],[
                  jQuery.callbacks('memory'),'progress','notify'    //progress 前进中的  notify  通知
              ]
           ];
          var pendding = true;

          var deferred = {};
          
          for(var i = 0 ; i < arr.length;i++){
            deferred[arr[i][1]] = (function (index){
                return function(func){
                arr[index][1].add(func)
            }
            })(i);

            deferred[arr[i][2]] = (function (index){
                return function(func){
                   var args = arguments;
                   if(pendding){
                    arr[index][0].fire.apply(window,args);
                    arr[index][2] == 'resolve' || arr[index][2] == 'reject' ? pendding = false : '';
                   }                
                }
            })(i)
          }

          return deferred;
    }
    ());
 window.$ = window.jquery = jquery                                 //把jQuery保存到全局上方便调用