这是我听过的一个公开课所做的笔记~
先来一个基础版的,这样有什么问题呢,就是把各种事件都绑定到原型上面了,破坏了原型的纯净性
let $ = jQuery = (function (windwo) {
let jquery = function (nodeSelector) {
this.nodes = document.querySelectorAll(nodeSelector);
};
jquery.prototype = {
// 封装函数 需要修改循环结构的时候 只需要修改each
each: function (callback) {
for (let i = 0; i < this.nodes.length; i++) {
callback.call(this, i, this.nodes[i])
}
},
// 添加 class
addClass: function (classes) {
let className = classes.split(" ");
className.forEach(value => {
this.each((index, obj) => {
obj.classList.add(value)
})
})
},
// 修改 text
setText: function (text) {
this.each((index, obj) => {
obj.textContent = text
})
},
//移除 dom
remove: function () {
let el;
this.each((index, obj) => {
el = obj;
el.parentNode && el.parentNode.removeChild(el);
});
}
};
return function (nodeSelector) {
return new jquery(nodeSelector)
}
})(window)
看看老师写的高级代码
let $ = jQuery = (function (window) {
// 功能分区
// 获取元素 对dom进行集合存储
function queryDom(dom, selector) {
let i, len = dom ? dom.length : 0;
for (let i = 0; i < len; i++) {
this[i] = dom[i]
}
this.length = len;
// 容错处理
this.selector = selector || ' ';
return this
}
// Z的作用 保证了jquery的纯净性 扩展性
function Z(elements, selector) {
return queryDom.call(this, elements, selector)
}
// 具体查找dom
function querySA(elements, selector) {
return elements.querySelectorAll(selector)
}
Z.prototype = {
each(callback) {
// every 的循环粒子变为 this[下标值] => dom值
[].every.call(this, function (el, index) {
return callback.call(el, index, el) !== false
})
},
// jquery 链式调用
// 查找方法
find(selector) {
let doms = [];
this.each(function (index, el) {
let childs = this.querySelectorAll(selector);
doms.push(...childs)
})
return new Z(doms, selector)
},
// 具体下标
eq(i) {
let doms = [];
this.each(function (index, el) {
if (i == index) {
doms.push(this)
}
})
return new Z(doms, this.selector)
},
// 移除方法
remove() {
this.each(function (index, el) {
this.remove()
})
}
};
// 全局函数
function isFunction(value) {
return typeof value == 'function'
}
// 整合
function $(nodeSelector) {
let doms = querySA(document, nodeSelector);
return new Z(doms, nodeSelector)
}
$.isFunction = isFunction;
return $;
})(window);
前端路漫漫,且行且沉淀!