1. jQuery使用技巧

2. 大纲 简单的js书写规则 jQ静态方法 jQ实例方法 DIP、OCP原则 jQ选择器

3. 简单的js书写规则 我一直在寻找一种简单并统一的方式书写JS。

4. 从java，C#等多人协作开发语言获得的经验 语法严谨，没有太多的选择 类和方法的创建只有一种方式 没有任我们无限嵌套的closure（虽然可能会在java 7 中支持） 约定大于配置(convension over configuration) 1. 类名和文件名一致 2. 构造方法和类名一致 3. 包名和目录名一致 … 如果我们对JS书写进行规则上的限制，且不削弱它的描述能力， 它应该能够极大地提高可读性，并且 更适合团队开发。 代码应该有结构，合适的位置写合适的代码

5. 规则 名称： 一个文件一个主类（或单例）， 类名和文件名一致，用于描述功能 包名和文件夹结构一致 module/widget/dialog.js  FE.platform.winport.widget.Dialog module/widget/ui.js FE.platform.winport.widget.UI module/widget/switchable.js  FE.platform.winport.widget.Switchable .widget.Switcher .widget.PagingSwitcher .widget.Tabs module/diy/msg.js FE.platform.winport.diy.Msg module/diy/form-dialog  FE.platform.winport.diy.FormDialog page/diy/site/site-publish.js  SitePublish page/diy/site/switch-version  SwitchVersion page/diy/mod/mod-list-panel  ModListPanel

6. 2. 结构: 单例或多例类使用模板中的结构书写 顶层结构中只包含import语句，类（对象）定义语句， 名字空间声明语句 方法调用遵循向下规则 3. 访问控制： 非公共类， 不需要挂接在名字空间下 公共类， 私有方法以下划线为前缀

7. 方法 在方法内部的函数，需要访问this, 则定义 var self = this, 并且此语句是var语句的第一句。 如： var self = this, // self = this放在var语句的第一句 ret = [], a = 1; 代码体缩进不大于3层， Closure嵌套不大于2层 open: function() { if (a === 1) { for (vari = 0; i < 10; i++) { if (b === 3) { for (….) { <---- 请重构此方法， 让缩进<= 3层 } } } }

8. test: function() { elm.click(function() { var a = function() { var b = function() { // 超过2层， 请重构 } } }); } 方法尽量不超过一屏，否则请重构 winport.js 1个方法达到39行， 1个47行 supplier-info.js 1个方法达到60行， 其中注释和空格占了20行 inplaceeditor.js 1个方法达到40行 ui.js 2 个方法达到 40行 （不过没有按这个规则书写，有方法内部有函数对象，所以比较长） company-name-handler 有1个方法达到60行 (里面有较大的数据结构） 有1个50行 diy/header.js 有1个方法40行 pages.js 有1个方法达到50行

9. 类（或对象）如果太长，则需要重构（根据功能来划分） 如果切割类的定义， 下次再详细分享

10. 静态方法 $.each 可以对数组或对象进行迭代 this为当前项，可使用proxy改变this指向, return false相当于break 如果对this进行相等性或类型检测时， 需要注意，typeof this === ‘object’ new String(‘hello’) === ‘hello’ // false new String(‘hello’) == ‘hello’ // true 建议： 使用带参数方式, 顺便为当前项取个好名字 $.extend 设置默认参数 undefined值的项不会被复制 $.proxy $.proxy(context, name) 减少缩进层次

11. $.ajax 在script 调用返回302，IE78, FF会进入success函数, IE6会进入error函数， 行为不一致 在jsonp调用返回302时, IE678 FF都会进行error, 行为比较一致 总结： 在script调用时, 需要在success中进行数据检测， 因为有时候不一定正常返回 做出错处理时, 需要在success和error中同时做 在jsonp调用时, 行为一致, 在success中只做成功逻辑, 在error中做出错逻辑, 但在FF中会由于超时而产生一个js错误， 不影响功能 $.param array/object -> querystring 对于中文参数的script请求，使用$.paramSpecial(… 旺铺中只用到一次paramSpecial, 只用在搜索的url拼接中，因为搜索关键字中会出现中文 $.serialize -> $.param($.serializeArray()) $.serializeArray -> [{ name: ‘user’, value: ‘hello’}, { name: ‘pass’: ‘value’: ‘helo123’ }]

12. 实例方法 index(element)， 在1.4引入index(), index(selector), 认识一下 eq(index)， 请用elm.eq(0) 代替 $(elm[0]) 当在一个作用域中两次以上操作同一selector， 请保存一个引用 attr(function) jQuery中在1.4版本后，有好多的setting方法支持function参数 toggleClass(class, switch)， toggle(fun1, fun2, fun3…) closest(expr) andSelf() end()

13. 事件 event helpers: click, mouseenter, submit… 通过bind实现的 focusin / focusout支持冒泡, 可以在delegate和live中使用 one(type, func) bind(type, func) 可一次绑定多个事件，API比较详细，可参考它 trigger(event) triggerHandler(event) 不触发浏览器默认行为 只针对第1个节点 不冒泡 返回事件函数结果，而不是jQ对象 live(type, handler) delegate(selector, type, handler)

14. 什么时候使用自定义事件？如何处理类(对象)之间的关系？ 依赖倒置原则(DIP) “抽象不应依赖于细节，细节应该依赖于抽象。” 思考各种回调函数，是如何引入间接层来 反转 依赖的

15. jQuery#data的使用 存贮节点相关数据 配合html5 data标签使用

16. jQ选择器Sizzle 优先采用#id, name, tag, tag.class, class最好要有tag修饰 Selector如果没有位置信息： POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:(*))?(?=[^]|$)/, 那么将采用从右到左的顺序解析 如 li.item a span 首先查找页面中所有的span, 然后再过滤出a内部的部分， 然后再过滤出 符合li.item的部分 在jQuery中，可以通过扩展 $.expr对 Sizzle进行扩展

17. 如何扩展？ 开放封闭原则(Open-Closed principle) “软件实体应该是可以扩展的，但是不可修改。“

18. 例子 jQuery的扩展 通过 $.extend 和 $.fn.extend扩展， 不需要修改原代码 Sizzle的扩展也非常方便， 通过Sizzle.selectors进行扩展 侧边栏广告位 tracelog.js instantvalidator.js sign.js 数据结构是静止的算法 & 申明式编程

19. OCP是一个目标 面对变化时，我们修改代码， 改完之后， 面对同类变化， 我们以添加代码的方式完成扩展， 而不需要修改原来的代码 受一次伤原理 不预测需求，只完成现有需求并符合OCP， 变化时才修改代码