jQuery 中的设计模式 Note-25_浪里淘沙的小法师的专栏文章_微信文章

jQuery 的相关知识，内容包括 jQuery 的三个骚操作、jQuery 风格、设计模式。

一、jQuery 的三个骚操作

骚操作 1：链式操作
骚操作 2：直接 return this 和 return 对象，都给你省略了（给你把内裤都给剩没了）
骚操作 3：不仅可以 return 对象，我还可以 return 一个数组

二、jQuery 风格

这是许多程序员多年摸索的经典代码，你只需要站在巨人的肩膀上，继续向上探索

链式风格，也叫 jQuery 风格，window,jQuery() 是我们提供的全局函数

1. 特殊函数 jQuery

jQuery(选择器) 用于获取对应的元素，但它却不返回这些元素，相反，它返回一个对象，称为 jQuery 构造出来的对象，这个对象可以操作对应的元素

2. jQuery 是构造函数吗？

是。因为 jQuery 函数确实构造出了一个对象

不是。因为不需要写 new jQuery() 就能构造出一个对象，以前讲的构造函数都要结合 new 才行

结论：jQuery 是一个不需要加 new 的构造函数，jQuery 不是常规意义上的构造函数，这是因为 jQuery 用了一些技巧

jQuery 对象代指 jQuery 函数构造出来的对象 -- 口头约定

jQuery 对象不是说「jQuery 这个对象」

3. 术语 -- 举例

Object 是个函数，Object 对象表示 Object 构造出的对象
Array 是个函数，Array 对象 / 数组对象表示 Array 构造出来的对象
Function 是个函数，Function 对象 / 函数对象表示 Function 构造出来的对象

三、链式风格

1. 举例 - 查

jQuery('#xxx') 返回值并不是元素，而是一个 api 对象
jQuery('#xxx').find('.red') 查找 #xxx 里的 .red 元素
jQuery('#xxx').parent() 获取爸爸
jQuery('#xxx').children() 获取儿子
jQuery('#xxx').siblings() 获取兄弟
jQuery('#xxx').index() 获取排行老几（从 0 开始）
jQuery('#xxx').next() 获取弟弟
jQuery('#xxx').prev() 获取哥哥
jQuery('.red').each(fn) 遍历并对每个元素执行 fn
复制代码

2. 命名风格

window.$ = wondow.jQuery = function(){}

DOM 对象只能使用 DOM API -- 如 querySelector、appendChild

jQuery 对象只能使用 jQuery 的 API -- 如 find、each

代码中所有 $ 开头的变量都是 jQuery 对象，这是约定，除非特殊说明

3. 重载

一个函数可以接受不同的参数，这是 JS 的函数「重载」

4. 闭包

$('<div><span>1</span></div>')
// 返回值并不是新增的元素，而是 api 对象

$('<div><span>1</span></div>').appendTo(...)
// appendTo 可以把新增元素放到另一个元素里
复制代码

这种感觉让人觉得是 DOM 是不可见的，不需要知道 DOM 的任何细节，只需要使用简洁的 API 即可

一个好的封装，能让使用者完全不知道内部细节，这是通过「闭包」实现的。

jQuery 中的设计模式 Note-25

正文