jquery function_关于jQuery

jQuery是目前使用最广泛的javascript函数库。

关于它的设计思想/设计模式

设计模式是啥?

老子这个代码写得太漂亮了，别人肯定也用得到，那就给这种写法取个名字吧，比如适配器模式，所以设计模式就是对通用代码取个名字而已~

jQuery 用到了哪些设计模式?

1. 不用 new 的构造函数，这个模式没有专门的名字

2. $（支持多种参数），这个模式叫做重载

3. 用闭包隐藏细节，这个模式没有专门的名字

4. $div.text（）即可读也可写，getter/setter

5. $.fn是$.prototype 的别名，这叫别名

6.
 jQuery 针对不同浏览器使用不同代码，这叫适配器

推荐阅读：

1.jQuery 都过时了，那我还学它干嘛？

jQuery 都过时了，那我还学它干嘛？​fangyinghang.com

2.jQuery设计思想

jQuery设计思想 - 阮一峰的网络日志​www.ruanyifeng.com

这篇文章来自阮一峰，他对jQuery的100多页的入门教材《jQuery Fundamentals》做了一个简短的粗略翻译整理，主要包括：

一、选择网页元素

二、改变结果集

三、链式操作

四、元素的操作：取值和赋值

五、元素的操作：移动

六、元素的操作：复制、删除和创建

七、工具方法

八、事件操作

九、特殊效果

jQuery的特点：闭包+链式操作

API

window.jQuery = function (selector) {

const elements = document.querySelectorAll(selector)

API = 对象（对象是{ key：value }）

API = { "addClass"：function( ) { console.log ( elements ) }

//访问了外部的elements，这就是闭包

//闭包：函数访问外部的变量

API = { addClass( ) { console.log ( elements ) }

链式操作

return api

api.addClass('red').addClass('blue')

api.addClass('red').addClass('blue').addClass('blue')

api.addClass('red') //class=“test red”

.addClass('blue') //class=“test red blue”

.addClass('blue') //class=“test red blue green”

函数里的this

obj.fn (p1) // 函数里的this 就是 obj

obj.fn.call(obj,p1)

return api = return this

注意看下面两段代码

const api 然后 return api，可以直接改为 return

window.jQuery = function (selector) {
    const elements = document.querySelectorAll(selector)
    //api 可以操作elements
    const api = {
        //闭包：函数访问外部的变量
        addClass(className) {
            for (let i = 0; i < elements.length; i++) {
                elements[i].classList.add(className)
            }
            return this // this 等价于 api（函数）
        }
    }
    return api
}

window.jQuery = function (selector) {
    const elements = document.querySelectorAll(selector)
    //api 可以操作elements
    return {
        //闭包：函数访问外部的变量
        addClass(className) {
            for (let i = 0; i < elements.length; i++) {
                elements[i].classList.add(className)
            }
            return this // this 等价于 api（函数）
        }
    }
}

注意下面代码等价（代码的演变过程）

const api = jQuery('.test') //不返回元素们，返回的是API对象
api.addClass('red').addClass('blue').addClass('green')

---->

const x = jQuery('.test') //不返回元素们，返回的是API对象
x.addClass('red').addClass('blue').addClass('green')

---->

const x = jQuery('.test') //不返回元素们，返回的是API对象
x.addClass('red')
 .addClass('blue')
 .addClass('green')

---->

jQuery('.test') //不返回元素们，返回的是API对象
    .addClass('red')
    .addClass('blue')
    .addClass('green')

---->

jQuery('.test') //不返回元素们，返回的是API对象
.addClass('red')
.addClass('blue')
.addClass('green')

链式风格，也叫jQuery风格，特殊函数jQuery，jQuery（选择器）函数用于获取对应的元素

但是它不返回元素，他返回一个对象，可以操作对应的元素，这个对象称之为 jQuery的构造

函数。

对于jQuery的学习路线

关于 jQuery，我们只需要理解 jQuery 原理，然后使用 jQuery 做一两个项目，总结最后写一篇博客就好了，以后再也不碰 jQuery了！ 滚去学Vue/React就OK！ 并不需要在上面花太多时间~