手把手带你实现一个mini版jquery
手写一个mini版jquery
我们要实现的功能如下
1.执行结构
2.amd模块检测
3.整体架构搭建
4.原型方法添加
5.全局方法添加
执行结构与amd模块检测
//amd模块检测
if (typeof define === 'function' && define.amd){
define(definition);
}
//执行结构
var $ = jQuery = (function(window,undefined){
})(window)
整体架构搭建
// 对dom集合进行存储，生成jquery对象
function Query(dom, selector){
// 通过遍历dom集合，将el注入this实例 => Z函数的实例
let i, len = dom ? dom.length : 0
for (i = 0; i < len; i++) this[i] = dom[i]
this.length = len
this.selector = selector || ''
return this;
}
// 进行dom查看，同时生成jquery对象
function Z(elements, selector){
return Query.call(this, elements, selector)
}
// 具体的dom查找
function qsa(element, selector){
// 暂时不考虑选择器的其它情况
return element.querySelectorAll(selector)
}
// 得到jquery对象
return function(nodeSelector){
let doms = qsa(document, nodeSelector)
// debugger;
return new Z(doms, nodeSelector);
}
原型方法添加
Z.prototype = {
each(callback){
// [].every 是es5的数组原型方法，用于循环，返回值为布尔值（循环的内容必须都满足，才会返回true，否则返回false）
[].every.call(this, function(el, index){
return callback.call(el, index, el) !== false
})
},
// 查找元素
find(selector){
let doms = []
this.each(function(index, el){
let childs = this.querySelectorAll(selector);
doms.push(...childs);
})
//为了实现链式操作 返回当前对象
return new Z(doms, selector);
},
//增加样式
addClass:function (classes){
let className = classes.split(' ');
className.forEach(value => {
this.each(function(index,el){
el.classList.add(value);
})
});
return this;
},
//比较第几个
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 isWindow(obj) { return obj != null && obj == obj.window }
function isDocument(obj) { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }
function $(nodeSelector){
let doms = qsa(document, nodeSelector)
return new Z(doms, nodeSelector);
}
// 定义zepto的全局方法(也可以外部使用)
$.isFunction = isFunction;
$.isWindow = isWindow;
$.isDocument = isDocument;
// 得到jquery对象
return $
完整代码
//amd模块检测
if (typeof define === 'function' && define.amd){
define(definition);
}
var $ = jQuery = (function(window,undefined){
// 对dom集合进行存储，生成jquery对象
function Query(dom, selector){
// 通过遍历dom集合，将el注入this实例 => Z函数的实例
let i, len = dom ? dom.length : 0
for (i = 0; i < len; i++) this[i] = dom[i]
this.length = len
this.selector = selector || ''
return this;
}
// 进行dom查看，同时生成jquery对象
function Z(elements, selector){
return Query.call(this, elements, selector)
}
// 具体的dom查找
function qsa(element, selector){
// 暂时不考虑选择器的其它情况
return element.querySelectorAll(selector)
}
Z.prototype = {
each(callback){
// [].every 是es5的数组原型方法，用于循环，返回值为布尔值（循环的内容必须都满足，才会返回true，否则返回false）
[].every.call(this, function(el, index){
return callback.call(el, index, el) !== false
})
},
find(selector){
let doms = []
this.each(function(index, el){
let childs = this.querySelectorAll(selector);
doms.push(...childs);
})
return new Z(doms, selector);
},
addClass:function (classes){
let className = classes.split(' ');
className.forEach(value => {
this.each(function(index,el){
el.classList.add(value);
})
});
return this;
},
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 isWindow(obj) { return obj != null && obj == obj.window }
function isDocument(obj) { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }
function $(nodeSelector){
let doms = qsa(document, nodeSelector)
return new Z(doms, nodeSelector);
}
// 定义zepto的全局方法(也可以外部使用)
$.isFunction = isFunction;
$.isWindow = isWindow;
$.isDocument = isDocument;
// 得到jquery对象
return $
})(window)
FAQ
实现的功能，优点，可扩展的地方：
1.给元素增加class
2.链式操作
3.需要什么可以在Z的原型方法里添加
4.jquery对象非常纯净，方法添加以及操作都在Z上
5.全局方法调用
