对于一个好的程序员，如果你需要大量使用一个框架，是无法忍受自己不知道这个框架的原理的，起初你可能只是调调api，慢慢你就忍不住去看看源码，看了几眼之后，你就会忍不住想自己写一个了。作为一个前端入坑不久的程序员，jquery我还只停留在调调api阶段。事实上如果没有dash，我根本不敢说自己会用jquery。
但是，我打算来个三级跳，自己写一个超简略版的jquery!
开始
var $ = (function(){
//code
})();
首先我们的jquery是一个模块（对象），为了把它封装起来，我们需要使用IIFE.
var $ = (function(){
return (function(selector){
var q = {};
q.selector = selector;
q.nodes = document.querySelectorAll(selector);
q.html = function(){
return Array.prototype.map.call(this.nodes, function(){
return node.innerHTML
})
}
})
})();
上面的代码中，我们使用document.querySelectorAll函数查找所有匹配的HTMLElement并绑定到返回的对象上。我们还给返回的q对象创建了html函数，用来返回匹配对象的innerHTML，你可以这样使用：
$('p').html() //返回所有p元素的innerHTML
each
jquery中有一个each函数,它传入一个函数作为参数，并对所有匹配的元素调用这个函数。下面这段代码应当输出所有p元素的innerHTML到控制台
$('p').each(function(item, i) {
console.log(item.innerHTML)
})
我们自己来写each函数
q.each = function(action){
this.nodes.forEach(function(item, i){
action(item,i)
})
return this;
}
注意，我们在方法的最后，需要return this,这样让我们可以实现链式调用。调用也很简单
$('p').each(function(item,i){console.log(i, item.innerHTML)})
css
jquery中有一个css方法，用来修改dom元素的样式。下面这段代码可以让p元素中的字体变成20像素大小，绿色。而当css方法只接受一个参数的时候，则返回对应css属性，并不做修改。
$('p').css('font-size', "20px").css('color', 'green')
$('p').css('color') //green
下面我们来实现这个方法。使用了CSSStyleDeclaration.prototype.setProperty来实现
function doCSS(prop,val){
var args = argument
if(Boolean(val)){ //setter
this.each(function(node, i){
CSSStyleDeclaration.prototype.setProperty.apply(node.style,args);
});
return this
}else{ //getter
return this.nodes[0].style[prop];
}
}
q.css = function(prop, val){
return doCSS.call(this, prop,val);
}
这里需要注意的是我们在q.css方法中调用doCSS的时候，使用了call来手动设置this（上下文）。
doCSS.call(this, prop, val)
这里的this就能够正确指向我们的jquery对象q并传入doCSS函数，而在doCSS函数中，我们对对象q进行操作并返回。
attr
jquery中还有一个给dom对象添加属性的方法。方法和css差不多
function doATTR(prop, val){
var args = arguments
if(Boolean(val)){
this.each(function(node, i){
Element.prototype.setAttribute.apply(node, args);
});
return this;
}else{
return Array.prototype.map.call(this.nodes,
function(node){
return node.getAttribute(prop);
});
}
}
q.attr = function(prop, val){
return doATTR.call(this, prop, val);
}
测试一下
$('#test').attr('test', 'hello')
console.log($('#test').attr('test')) //hello
on
on也是jquery中非常常用的一个方法，用来给dom对象绑定事件，原理很简单，就是给每个HTMLElement设定属性'onxxx',比如要给某个元素添加单击事件，只需要修改node['onclick']
q.on = function(type, callback){
this.each(function(node,i){
node['on'+type] = callback
})
return this
}
测试一下
$('p').on('click', function(event) {
console.log(event)
})
现在单击任何p元素，都会打印出相应的事件，event对象中包括了很多有用的属性，其中的target属性表示了被操作的dom元素。
小结
本文中我们尝试写了一些类似jquery的代码，首先使用IIFE对模块进行封装，并且实现了html,each,css,attr,on等方法。
