我们都知道DOM编程操作起来太麻烦，所以我们就可以把DOM封装起来，我们就可以用接口对对象快捷的进行操作。
封装
封装就是隐藏对象的属性和实现细节，仅对外公开接口，控制在程序中属性的读取和修改的访问级别。
那什么是接口呢？
接口 ：就是被封装的东西需要暴露一些功能给外部，这些功能就是接口，比如：USB接口、HDMI接口，设备只要支持这些接口，即可与封装的对象通讯。
术语
库：我们把提供给其他人用的工具代码叫做库，比如jQery、understore。
API: 库暴露出来的函数或属性叫做API(应用编程接口)
框架：当你的库变得很大，并且需要学习才能看懂，那么这个库就叫框架（Vue、React等）
对象风格
windom.dom是我们提供的全局对象
window.dom={
create(string)
const container = document.createElement('template');
container.innerHTML = string.trim()//.trim()把空格忽略
return container.content.firstChild;
}封装详细代码：
window.dom = {
//增
create(string) {
//创建节点
const container = document.createElement("template"); //template可放任意标签
container.innerHTML = string.trim();
return container.content.firstChild;
},
after(node, node2) {
//新增一个弟弟
node.parentNode.insertBefore(node2, node.nextSibling);
},
before(node, node3) {
//新增一个哥哥
node.parentNode.insertBefore(node3, node);
},
append(parent, node) {
//新增一个儿子
parent.appendChild(node);
},
wrap(node, parent) {
//新增一个爸爸
dom.before(node, parent);
dom.append(parent, node);
},
//删
remove(node) {
//删除节点
node.parentNode.removeChild(node);
return node;
},
empty(node) {
//清空节点
const array = [];
let x = node.firstChild;
while (x) {
array.push.call(null, dom.remove(node.firstChild));
x = node.firstChild;
}
return array;
},
//改
attr(node, name, value) {
//用于读写属性
if (arguments.length === 3) {
// 重载
node.setAttribute(name, value);
} else if (arguments.length === 2) {
return node.getAttribute(name);
}
},
text(node, string) {
//读文本属性
node.innerHTML = string;
},
html(node, string) {
if (arguments.length === 2) {
node.innerHTML = string;
} else if (arguments.length === 1) {
return node.innerHTML;
}
},
style(node, name, value) {
//用于修改style
if (arguments.length === 3) {
node.style[name] = value;
} else if (arguments.length === 2) {
if (typeof name === "string") {
return node.style[name];
} else if (name instanceof Object) {
const object = name;
for (let key in object) {
node.style[key] = object[key];
}
}
}
},
class: {
add(node, className) {
//加class
node.classList.add(className);
},
remove(node, className) {
node.classList.remove(className);
},
on(node, eventName, fn) {
//添加/删除事件监听
node.addEventListener(eventName, fn);
},
off(node, eventName, fn) {
node.removeEventListener(eventName, fn);
},
},
//查
find(selector, scope) {
//用于获取标签
return (scope || document).querySelectorAll(selector);
},
parent(node) {
//查找父元素
return node.parentNode;
},
children(node) {
//查找子元素
return node.children;
},
sibling(node) {
//查找兄弟姊妹元素（不包括自己）
return Array.from(node, parentNode.children).filter((n) => n !== node);
},
next(node) {
//查找弟弟
let x = node.nextSibling;
while (x && x.nodeType === 3) {
x = x.nextSibling;
}
return x;
},
previous(node) {
//查找哥哥
let x = previous.nextSibling;
while (x && x.nodeType === 3) {
x = x.previousSibling;
}
return x;
},
each(nodeList, fn) {
//遍历所有节点
for (let i = 0; i < nodeList.length; i++) {
fn.call(null, nodeList[i]);
}
},
index(node) {
//获取排行老几
const list = dom.children(node.parentNode);
let i;
for (i = 0; i < list.length; i++) {
if (list[i] === node) {
break;
}
}
return i;
},
};jQuery风格
链式风格也叫jQuery风格
window.jQuery()是我们提供的全局函数
特殊函数jQuery
jQuery(选择器)用于获取对应的元素，但它却返回的不是这些元素，相反，它返回一个对象，称为jQuery构造出来的对象，这个对象可以操作对应的元素。
以下为实现代码：
window.$ = window.jQuery = function(selectorOrArrayOrTemplate) {
let elements;
if (typeof selectorOrArrayOrTemplate === "string") {
if (selectorOrArrayOrTemplate[0] === "<") {
// 创建 div
elements = [createElement(selectorOrArrayOrTemplate)];
} else {
// 查找 div
elements = document.querySelectorAll(selectorOrArrayOrTemplate);
}
} else if (selectorOrArrayOrTemplate instanceof Array) {
elements = selectorOrArrayOrTemplate;
}
function createElement(string) {//根据字符串内容创建
const container = document.createElement("template");
container.innerHTML = string.trim();
return container.content.firstChild;
}
// api 可以操作elements
const api = Object.create(jQuery.prototype) // 创建一个对象，这个对象的 __proto__ 为括号里面的东西
// const api = {__proto__: jQuery.prototype}
Object.assign(api, {
elements: elements,
oldApi: selectorOrArrayOrTemplate.oldApi
})
// api.elements = elements
// api.oldApi = selectorOrArrayOrTemplate.oldApi
return api
};
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
jquery: true,
get(index) {
return this.elements[index];
},
appendTo(node) {
if (node instanceof Element) {
this.each(el => node.appendChild(el));
} else if (node.jquery === true) {
this.each(el => node.get(0).appendChild(el));
}
},
append(children) {
if (children instanceof Element) {
this.get(0).appendChild(children);
} else if (children instanceof HTMLCollection) {
for (let i = 0; i < children.length; i++) {
this.get(0).appendChild(children[i]);
}
} else if (children.jquery === true) {
children.each(node => this.get(0).appendChild(node));
}
},
find(selector) {
let array = [];
for (let i = 0; i < this.elements.length; i++) {
const elements2 = Array.from(this.elements[i].querySelectorAll(selector));
array = array.concat(this.elements2);
}
array.oldApi = this; // this 就是 旧 api
return jQuery(array);
},
each(fn) {
for (let i = 0; i < this.elements.length; i++) {
fn.call(null, this.elements[i], i);
}
return this;
},
parent() {
const array = [];
this.each(node => {
if (array.indexOf(node.parentNode) === -1) {
array.push(node.parentNode);
}
});
return jQuery(array);
},
children() {
const array = [];
this.each(node => {
if (array.indexOf(node.parentNode) === -1) {
array.push(...node.children);
}
});
return jQuery(array);
},
print() {
console.log(this.elements);
},
// 闭包：函数访问外部的变量
addClass(className) {
for (let i = 0; i < this.elements.length; i++) {
const element = this.elements[i];
element.classList.add(className);
}
return this;
},
end() {
return this.oldApi; // this 就是新 api
}
};我们可以看到上面代码使用了原型： const api = Object.create(jQuery.prototype) ，这样就极大的节约了内存。
- 设计模式
jQuery用到了那些模式：
- 不用new的构造函数，这个模式没有专门的名字
- $（支持多种参数），这个模式叫做重载
- 用闭包隐藏细节，这个模式没有专门的名字
- $div.text()即可读也可写，getter/setter
- $fn是$prototype的别名，这叫别名
- jQuery是针对不同的浏览器使用不同的代码，这叫适配器
设计模式就是对通用代码取个名字而已
前端小白，如有错误请留言指正！！！
