简单实现一个jQuery的API

要实现的目标：使页面中所有的div添加一个class和改变div的textContent。我们给每个div加个名为“red”的类名，将div的textContent内容更改为“hi”。
通过以下步骤更加深刻理解。
Html代码：

  <div>内容1</div>
  <div>内容2</div>
  <div>内容3</div>
  <div>内容4</div>

使用DOM实现

var divs=document.getElementsByTagName("div")
for(var i=0;i<divs.length;i++){
  divs[i].classList.add("red")
  divs[i].textContent="hi"
}

我们可以将上述代码封装到函数中，我们再去调用的时候就很容易实现不需要再去重新声明。

function addClass(node,classes){
  var divs=document.getElementsByTagName(node)
  for(var i=0;i<divs.length;i++){
    divs[i].classList.add(classes)
  }
}
function setText(node,text){
  var divs=document.getElementsByTagName(node)
  for(var i=0;i<divs.length;i++){
    divs[i].textContent=text
  }
}

但是现在还不是最简单的，其他人也无法使用，也容易引起方法名的冲突，所以这个时候我们就需要命名空间来解决这个问题，代码结构会更加清晰。

var hjdom={}
hjdom.addClass=addClass
hjdom.setText=setText

这个时候我们再去实现这个功能的话。

hjdom.addClass("div","red")
hjdom.setText("div","hi")

这样是很方便，但是对于对于使用者来说还不是最简便的。
我们可以将这个方法添加到内置的Node对象原型中，但是不推荐使用，因为可能会对内置的对象原型会产生影响。

Node.prototype.addClass=function (node,classes){
  var divs=document.getElementsByTagName(node)
  for(var i=0;i<divs.length;i++){divs[i].classList.add(classes)}
}
Node.prototype.setText=function (node,text){
  var divs=document.getElementsByTagName(node)
  for(var i=0;i<divs.length;i++){divs[i].textContent=text}
}
Node.prototype.addClass("div","red")
Node.prototype.setText("div","hi")

既然会对内置对象原型产生影响，所以可以在新的接口中去设置。这种方法叫做无侵入。

function Node2(node){
     return {
       element: node,
         addClass: function (classes){
  var divs=document.getElementsByTagName(node)
  for(var i=0;i<divs.length;i++){divs[i].classList.add(classes)}
    },
         setText: function (text){
  var divs=document.getElementsByTagName(node)
  for(var i=0;i<divs.length;i++){divs[i].textContent=text}
    }
     }
 }

var node2=Node2("div")
node2.addClass("red")
node2.setText("hi")

既然可以进行上边的操作，那我们同样的可以给Node2改个名字，然后在进行一个缩写，就得到以下代码。

window.jQuery =function (node){
     return {
       element: node,
         addClass: function (classes){
  var divs=document.getElementsByTagName(node)
  for(var i=0;i<divs.length;i++){divs[i].classList.add(classes)}
            },
         setText: function (text){
  var divs=document.getElementsByTagName(node)
  for(var i=0;i<divs.length;i++){divs[i].textContent=text}
                }
    }
 }
window.$ = jQuery

这个时候我们再要去使用我们的两个API就要使用以下代码。

var $div = $('div')
$div.addClass('red') 
$div.setText('hi')

可以做到同样的效果。我们使用旧的DOM的API创造新的API，来实现旧API很难实现的过程。