【封装自己的库】

封装自己的库

课前准备

• 工具
  • 编辑器 VSCode
  • 浏览器 Chorme
• 前置知识
  • Js基本知识

课堂主题

一、定义函数返还JQ对象

二、ready方法和原生节点处理

三、选择器器封装

四、封装JQ的eq方法

五、封装JQ的click方法

六、jQ中的链式操作

七、封装JQ的css方法

八、cssHooks扩展功能

知识点

• 对象成员与类成员
• 判断类型
• 链式调用实现
• 正则表达式

jquery特性说明

​ 知己知彼，百战不殆；想要知道jq功能如何实现，先要了解其特性；

###如何实现链式调用

根据对象的特性，发还jq对象；

• 返还this对象

class Jq{
    click(){
        console.log("click...");
        return this;
    }
}
let myjq = new Jq();
myjq.click().click();

• 返还实例化对象

处理ready和原生节点

• 针对ready方法做兼容处理
• 原生节点直接保存

   if (typeof arg === "string") {
              let els = document.querySelectorAll(arg);
          } else if (typeof arg === 'function') {
              window.addEventListener("DOMContentLoaded",arg,false);
          } else {
              if(typeof arg.length === 'undefined'){
                  // 一个对象；
                  this[0] = arg;
                  this.length = 1;
              }else{
                  // 对象类数组；
                  this.addEle(arg);
              }
          }

###选择器器封装

• $(“.box”)选择节点实现

封装jq的eq方法

​ 注意返还对象，实现链式调用

 eq(index){
        // 继续操作
        // return this[index];
        return new Jq(this[index],this);
    }

###实现end方法

返还上次操作的节点；

 end(){
       return this.prevObject;
    }

实现jq里的click方法

绑定click事件

click(fn) {
        for (let i = 0; i < this.length; i++) {
            this[i].addEventListener("click", fn, false);
        }
    }

实现on方法

和click方法类似，可以处理多个事件；

实现css方法

• 获取样式封装

• 设置样式封装

  • cssNumber

    {
            animationIterationCount: true,
            columnCount: true,
            fillOpacity: true,
            flexGrow: true,
            flexShrink: true,
            fontWeight: true,
            gridArea: true,
            gridColumn: true,
            gridColumnEnd: true,
            gridColumnStart: true,
            gridRow: true,
            gridRowEnd: true,
            gridRowStart: true,
            lineHeight: true,
            opacity: true,
            order: true,
            orphans: true,
            widows: true,
            zIndex: true,
            zoom: true
        }
    

总结

• 类及对象

• 链式调用

• 对象的包装

• 拓展功能

下节课预告

• 异步专题