Web前端高级工程师培训：封装自己的库

封装自己的库

课前准备

工具
- 编辑器 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}