jQuery设计思想

jQuery已经过时了,但是它简单而又经典的设计思想依然值得学习

1. 对网页元素操作

利用css选择器得到页面元素,然后jQuery返回的不是该元素,而是jQuery对象(jQuery函数创造出来的对象)---用来操作元素的对象

jQuery(div)={
let elements = document.querySelectorAll('div')
}
return {
find(){},
each(){},
...
}

2. 改变结果集

jQuery提供了各种强大的过滤器，对结果集进行筛选，缩小选择结果

3. 链式操作

既然jQuery函数返回的是操作元素的对象,那么我们就可以利用返回值接着调用函数

jQuery('div').find('.red').addClass('green')

3. end()

如果想要操作其他的元素,我们可能需要获得操作其他元素的对象,例如操作div的孩子们,我们可以再次调用jQuery创造出div的孩子们的对象.

jQuery('div')={
let element = document.querySelectorAll('div')
}
return {
find(){
return jQuery(element.children)
},
}

那么如果想要回过头来获得操作div的对象,是不是意味着链子要断了,jQuery提供了返回上一层的对象的方法---end(),这需要在调用jQuery之前,给旧的对象添加在新元素属性里,如在find()中

jQuery('div')={
let element = document.querySelectorAll('div')
}
return {
find(){
this.children.oldApi=this
return jQuery(this.children)
},
end(){return this.oldApi}
}

4. 命名风格

jQuery的命名做到简洁和区分

• 不用new 的构造函数
• jQuery函数我们可以拿$代替,window. =window.jQuery
• jQuery对象和DOM原生对象是不能混用属性和方法的,所以jQuery对象命名上要做区分如$div
• fn 是 $.prototype 的别名

5. 原型

两个不同的jQuery对象,他们是有很多相同的属性和函数,所以要把这些整理成共有属性放到api的原型里,api.__proto__===jQuery().prototype存下地址

6. 重载

支持多种参数,不同参数类型依然能满足功能需求,如

window.jQuery = function (selectorOrArray) {
    var elements;
    if (typeof (selectorOrArray) === 'string') { //  判断字符串和还是数组
        elements = document.querySelectorAll(selectorOrArray);
    } else {
        elements = selectorOrArray;
    }
    }

7. 元素的操作：取值和赋值

一个操作元素的方法可以根据参数的数量实现取值和赋值二个功能,如 如

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

8. 适配器

jQuery 针对不同浏览器使用不同代码,如下述代码,在ie浏览器为真,其他浏览器为假

if(document.all()){}else{}