jQuary

课堂上的代码：

http://js.jirengu.com/binuwigera/1/edit?html,js,output
http://js.jirengu.com/govatixevu/1/edit?js,output
http://js.jirengu.com/menosegapu/1/edit?js,output

封装一个函数

function getSiblings(node){}

再封装一个

function addClass(node, classes){}

命名空间

var dom = {}
dom.getSiblings(node)
dom.addClass(node, {a: true, b: false})

能不能把 node 放在前面

node.getSiblings()
node.addClass()

1. 方法一：扩展 Node 接口
   直接在 Node.prototype 上加函数

2. 方法二：新的接口 BetterNode

    function Node2(node){
        return {
            element: node,
            getSiblings: function(){
   
            },
            addClass: function(){
   
            }
        }
    }
    let node =document.getElementById('x')
    let node2 = Node2(node)
    node2.getSiblings()
    node2.addClass()
   
   

第二种叫做「无侵入」。

把 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

改进一：改掉 document.getElementById

改进二：接受多个 node

改进三：添加 .html() .text() .css() 等

jQuery 不过如此？

1. jQuery 在兼容性方面做得很好，1.7 版本兼容到 IE 6
2. jQuery 还有动画、AJAX 等模块，不止 DOM 操作
3. jQuery 的功能更丰富
4. jQuery 使用了 prototype，我们没有使用，等讲了 new 之后再用

不过你已经了解 jQuery 了