实现一个jquery api

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

jQuery本质

Query实质上是一个构造函数，该构造函数接受一个参数，jQuery通过这个参数利用原生API找到节点，之后返回一个方法对象，该方法对象上的方法对节点进行操作(方法使用了闭包)。

封装函数

  
选项1
  
选项2
  
选项3
  
选项4
  
选项5

1. 获取某一标签的全部兄弟元素

function getSiblings(node){
  var allChildren = node.parentNode.children;
  var arr = {
    length: 0
  }; //声明一个伪数组
for(var i =0;i

• DOM API 中的ParentNode.children属性，返回该节点的所有元素孩子。
• 返回节点父亲的所有孩子，然后遍历这个伪数组（children属性返回一个HTMLCollection实例，是一个伪数组），将不等于自身节点的其他节点放入一个空对象里。
• 声明的arr是一个伪数组，所以在遍历后不能使用数组的push方法，那么怎么把value放进数组呢？所以使用array[array.length]=allChildren[i]的方法

2. 给一个标签添加多个class

function addClass(node,classes){
  for(var key in classes){
    var value = classes[key];
    if(value){
      node.classList.add(key);
    }else{
      node.classList.remove(key)
    }
  }
}

以上两个函数，我们就可以直接对它们传参进行操作：

//得到除item2的全部兄弟元素
console.log(getSiblings(item2))
//给item2添加a，c两个类
addClass(item2,{a:true,b:false,c:true})

命名空间

我们获得了两个函数：getSiblings() , addClass() ,他们都是操纵节点，那我们能把他们联系起来吗？所以我们可以把他们放到一个库里，给它命名，这就叫命名空间。

window.ldom = {}
ldom.getSiblings(node)
ldom.addClass(node,classes)

 var ldom = {}//声明一个名字为ldom的空间
ldom.getSiblings = function(node){
  var allChildren = node.parentNode.children;
 
  var arr = {
    length: 0
  };
for(var i =0;i

• 封装命名空间就是把所有封装的函数放入一个对象之中，通过调用对象的方法来调用封装的函数。 这样做有一个好处：不会污染全局变量

将 node 放在前面

node.getSiblings()
node.addClass()

方法一：扩展 Node 接口

直接在 Node.prototype 上加函数

Node.prototype.getSiblings=function(){
  //this就是Node构造函数的实例对象，也就是节点
  var allChildren = this.parentNode.children;
  var arr = {
    length: 0
  };
for(var i =0;i

• 直接在 Node 对象上添加封装函数，修改Node.protorype对象，在Node.prototype对象上新增方法。
• 缺点：修改 Node 对象的原型，可能无意识覆盖原生API

方法二：创建一个新的接口函数

window.Node2 = function(nodesSelect){
  let nodes = {};
  if(typeof nodesSelect === 'string'){
    let temp = document.querySelectorAll(nodesSelect);//利用一个新的中间变量的到一个干净的伪数组（下划线原型直接执行Object）
    for(let i =0;i{
      for(let i = 0;i

• 优点不会覆盖原有的api，方便调用

将Node2 改个名字

function jQuery(node){
    return {
        element: node,
        getSiblings: function(){

        },
        addClass: function(){

        }
    }
}
let node =document.getElementById('x')
let node2 =jQuery(node)
node2.getSiblings()
node2.addClass()

再给个缩写 alias

window.$ = jQuery

//$=jQuery也是可以的

这时就可以直接通过$('item2')来调用了，也就达到了类型jquery的效果

DOM对象跟jQuery对象相互转换

jQuery对象转换成DOM对象:

• 方式一：$(“#btn”)[0]

• 方式二：$(“#btn”).get(0)

DOM对象转换成jQuery对象：

• $(document) -> 把DOM对象转成了jQuery对象

• var btn = document.getElementById(“btn”);

• btn -> $(btn);