28 进阶：jQuery初探

课堂笔记

• 在判断相等与否时，应该只用“===”或“！==”而不用“==”或“！=”；在“===”的情况下，只有复杂对象数据类型与NaN与自身不等，其他都相等
• 优化的小tip：代码相似的部分存在优化的可能
• 命名空间即范围（对象），将函数添加到这个对象中，即给函数一个命名空间，用于区分同名函数，避免覆盖全局变量，便于命名。
• 怎么做到将API作为变量的方法，使得调用形式变得简单：向该变量的公有属性添加该方法，缺点是会造成原型臃肿和复杂。
• 更好的设计方法是生成一个 构造函数，该构造函数返回一个对象，将你的API放入该对象，这是一种无侵入式方法

造两个简单版的jQuery函数

window.jQuery = function (selector) {
    let nodes = {}
    let temp = document.querySelectorAll(selector);
    for (let i = 0; i < temp.length; i++) {
        nodes[i] = temp[i]
    } //生成中间变量temp是为了得到一个纯净的伪数组，querySelectorAll()生成的是一个不是我们所希望的，有多余原型的伪数组；
    nodes.length = temp.length
    nodes.addClass = function (className) {
        for (let i = 0; i < this.length; i++) {
            this[i].classList.add(className)
        }
        return this
    }
    nodes.setText = function (text) {
        for (let i = 0; i < this.length; i++) {
            this[i].textContent = text
        }
        return this
    }
    return nodes;
}
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi