封装jQuery

封装一个叫jQuery的函数

function jQuery(selector) {

        return new jQuery.fn.init(selector)

    }

   封装一个可以选择这个类的函数例如$("类名")可选择这个标签

    jQuery.fn.init = function (selector) {

        // 获取到选择列表

        var list = document.querySelectorAll(selector);

        // 当前对象的长度

        this.length = list.length;

        for (var i = 0; i < list.length; i++) {

            // 便利类别对this赋值

            this[i] = list[i]

        }

    }

然后在通过全局，让这个定义的函数可以使用

// 如何让new init 产生对象拥有JQuery显示原型上的所有方法？

    jQuery.fn.init.prototype = jQuery.fn;

    // 全局对jQuery与$可以访问

    window.$ = window.jQuery = jQuery

 写一个click函数

思路是在jQuery里边的prototype里边写一个函数，通过用this来指向点击的这个元素，从而添加一个click事件

        click(callback) {

//利用for循环来选择有几个一样的类，若为一个这选中，若为多个可利用for循环来各个添加click时间

            for (var i = 0; i < this.length; i++) {

//选中这个元素然后利用addEventListener添加click事件

                this[i].addEventListener("click", callback)

            }

        },

 手写一个显示隐藏的函数

思路是首先定义一个toggle的函数，然后利用for循环选择指向的元素，然后判断一下子，如果这个元素里边的style属性有display！=none，让这个元素display = "none"，反之则让这个display="block"，利用上述的点击事件来完成点击执行这个函数，从而实现点击显示，在点击消失的功能

        toggle() {

            // 遍历每个元素如果display不是none就隐藏 否则显示

            for (var i = 0; i < this.length; i++) {

                if (this[i].style.display != "none") {

                    this[i].style.display = "none"

                } else {

                    this[i].style.display = "block"

                }

            }

        },

 手写一个添加或者删除类的方法

这个方法其实很简单，也就是利用classList.add或者classList.remove来进行添加或者删除类的方法，同样利用for循环找到this指向的这个元素，从而给这个元素添加一个类或者删除一个类

        addClass(callback) {

            // classList.add

            for (var i = 0; i < this.length; i++) {

                this[i].classList.add(callback)

            }

        },

        removeClass(callback) {

            for (var i = 0; i < this.length; i++) {

                this[i].classList.remove(callback)

            }

        }

写一个each函数

定义这个函数是为了让遍历这个元素，可在下边定义其他函数时用到，这样简化了代码，同样有利于jQuery的运行

each(callback) {

   for (var i = 0; i < this.length; i++) {

   callback(this[i]);

   }

   return this;

}, 

定义一个构造函数显示选型【上述写的函数都是添加到里边的】

    jQuery.fn = jQuery.prototype = {

        constructor: jQuery,

        jquery: "9.9.9",//版本号

        length: 0,//长度

        get(index) {

            return this[index]

        },

  }

写extend方法

函数体中的this指的是 jQuery.fn = jQuery.prototype,因此是在原型上添加属性和方法。

 jQuery.extend = jQuery.fn.extend = function(){
     var target = arguments[0] || {},//第一个参数是目标对象
         i=1,
         length = arguments.length,//参数长度
         deep = false,//是否深度拷贝
         options,//用于在复制时记录参数对象
         name,//用于在复制时记录  对象属性名
         src,//用于复制时记录 目标对象的属性值
         copy,//用于复制时记录 添加对象的属性值
         copyIsArray,
         clone;
     if(typeof target === "boolean"){//第一个参数是布尔型,深度拷贝
         deep = target;//深度拷贝,target赋值给deep
         target = arguments[1] || {};//把第二个参数作为target
         //跳过boolean和target 从第三个开始
         i = 2;
     }
 
     //不是对象且不是函数  target置空  (string 或其他)
     if(typeof target != "object" && typeof target != "function"){
         target = {};
     }
     //如果传入一个参数，是对jquery的扩展
     if(length == i}{//参数长度等于传递进去的长度  只能在等于1的时候
         target = this;//this是jquery对象本身  在$.fn.extend()中表示jQuery函数所构造对象
         --i;
     }
 
     for(;i<length;i++){
         //只处理非空参数
         if((options = arguments[i])!=null)
             for (var name in options){
                 var src = target[name],//目标对象的属性值
                     copy = options[name];//待拷贝 对象或数组的属性值
 
                 if(target === copy){//存在目标对象本身的引用,构成死循环,结束此次遍历
                     continue;
                 }
                 //深度处理copy 最深为元素 值是纯对象或数组 拷贝原型链中的
                 if(deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))){
                     if(copyIsArray){//copy是数组
                         copyIsArray = false;
                         //clone是src的修正值   把当前的数组作为目标数组
                         clone = src && jQuery.isArray(src) ? src : [];
                     }else{//如果copy是对象     把当前的对象作为目标对象
                         clone = src && jQuery.isPlainObject(src) ? src :{};//src的修正值
                     }
                     //递归调用jQuery.extend  对copy迭代深度复制
                     target[name] = jQuery.extend(deep,clone,copy);
                 //如果不需要进行深度拷贝
                 }else if(copy! = undefined){
                     //直接将待增加的对象copy  复制给目标对象
                     target[name] = copy;
                 }
                 //原先的实现方式
                 /*if(deep && copy && typeof copy == "object" && !copy.nodeType)
                     target[name] = jQuery.extend(deep,src || (copy.length !=null ? [] : {}),copy);
                 else if(copy !== undefined)//不能拷贝空值
                     target[name] = copy;*/
             }
         }
     return target;
 };