jQuery使用技巧<br />
大纲<br />简单的js书写规则<br />jQ静态方法<br />jQ实例方法<br />DIP、OCP原则<br />jQ选择器<br />
简单的js书写规则<br />我一直在寻找一种简单并统一的方式书写JS。<br />
从java,C#等多人协作开发语言获得的经验<br />语法严谨,没有太多的选择<br />类和方法的创建只有一种方式<br />没有任我们无限嵌套的closure(虽然可能会在java 7 中支持)<br />约定大于配置(convensio...
规则<br />名称:<br />一个文件一个主类(或单例), 类名和文件名一致,用于描述功能<br />包名和文件夹结构一致<br />module/widget/dialog.js   FE.platform.winport.widget...
2.  结构: <br />单例或多例类使用模板中的结构书写<br />顶层结构中只包含import语句,类(对象)定义语句, 名字空间声明语句<br />方法调用遵循向下规则<br />3. 访问控制:<br />非公共类, 不需要挂接在名字...
方法<br />在方法内部的函数,需要访问this,  则定义 var self = this, 并且此语句是var语句的第一句。<br />如:<br />var self = this,	// self = this放在var语句的第一句<...
test: function() {<br />elm.click(function() {<br />var a = function() {<br />var b = function() {	// 超过2层, 请重构<br />}<br ...
类(或对象)如果太长,则需要重构(根据功能来划分)<br />如果切割类的定义, 下次再详细分享<br />
静态方法<br />$.each<br />可以对数组或对象进行迭代<br />this为当前项,可使用proxy改变this指向, <br />return false相当于break<br />如果对this进行相等性或类型检测时, 需要注...
$.ajax<br />在script 调用返回302,IE78, FF会进入success函数, IE6会进入error函数, 行为不一致<br />在jsonp调用返回302时, IE678 FF都会进行error, 行为比较一致<br /...
实例方法<br />index(element), 在1.4引入index(), index(selector), 认识一下<br />eq(index),  请用elm.eq(0) 代替 $(elm[0])<br />当在一个作用域中两次以上...
事件<br />event helpers: <br />click, mouseenter, submit…  通过bind实现的<br />focusin / focusout支持冒泡, 可以在delegate和live中使用<br />o...
什么时候使用自定义事件?如何处理类(对象)之间的关系?<br />依赖倒置原则(DIP)<br />“抽象不应依赖于细节,细节应该依赖于抽象。”<br />思考各种回调函数,是如何引入间接层来  反转 依赖的<br />
jQuery#data的使用<br />存贮节点相关数据<br />配合html5 data标签使用<br />
jQ选择器Sizzle<br />优先采用#id, name, tag, tag.class,  class最好要有tag修饰<br />Selector如果没有位置信息:<br />POS: /:(nth|eq|gt|lt|first|las...
如何扩展?<br />开放封闭原则(Open-Closed principle)<br />“软件实体应该是可以扩展的,但是不可修改。“<br />
例子<br />jQuery的扩展<br />通过 $.extend 和 $.fn.extend扩展, 不需要修改原代码<br />Sizzle的扩展也非常方便, 通过Sizzle.selectors进行扩展<br />侧边栏广告位<br />...
OCP是一个目标<br />面对变化时,我们修改代码, 改完之后, 面对同类变化, 我们以添加代码的方式完成扩展, 而不需要修改原来的代码<br />受一次伤原理<br />不预测需求,只完成现有需求并符合OCP, 变化时才修改代码<br />
Upcoming SlideShare
Loading in...5
×

jQuery使用技巧

1,006

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,006
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery使用技巧

  1. 1. jQuery使用技巧<br />
  2. 2. 大纲<br />简单的js书写规则<br />jQ静态方法<br />jQ实例方法<br />DIP、OCP原则<br />jQ选择器<br />
  3. 3. 简单的js书写规则<br />我一直在寻找一种简单并统一的方式书写JS。<br />
  4. 4. 从java,C#等多人协作开发语言获得的经验<br />语法严谨,没有太多的选择<br />类和方法的创建只有一种方式<br />没有任我们无限嵌套的closure(虽然可能会在java 7 中支持)<br />约定大于配置(convension over configuration)<br />1. 类名和文件名一致<br />2. 构造方法和类名一致<br />3. 包名和目录名一致<br />…<br />如果我们对JS书写进行规则上的限制,且不削弱它的描述能力, 它应该能够极大地提高可读性,并且 更适合团队开发。<br />代码应该有结构,合适的位置写合适的代码<br />
  5. 5. 规则<br />名称:<br />一个文件一个主类(或单例), 类名和文件名一致,用于描述功能<br />包名和文件夹结构一致<br />module/widget/dialog.js  FE.platform.winport.widget.Dialog<br />module/widget/ui.js FE.platform.winport.widget.UI<br /> module/widget/switchable.js  FE.platform.winport.widget.Switchable<br /> .widget.Switcher<br /> .widget.PagingSwitcher<br /> .widget.Tabs<br /> module/diy/msg.js FE.platform.winport.diy.Msg<br />module/diy/form-dialog  FE.platform.winport.diy.FormDialog<br /> page/diy/site/site-publish.js  SitePublish<br /> page/diy/site/switch-version  SwitchVersion<br /> page/diy/mod/mod-list-panel  ModListPanel<br />
  6. 6. 2. 结构: <br />单例或多例类使用模板中的结构书写<br />顶层结构中只包含import语句,类(对象)定义语句, 名字空间声明语句<br />方法调用遵循向下规则<br />3. 访问控制:<br />非公共类, 不需要挂接在名字空间下<br />公共类, 私有方法以下划线为前缀<br />
  7. 7. 方法<br />在方法内部的函数,需要访问this, 则定义 var self = this, 并且此语句是var语句的第一句。<br />如:<br />var self = this, // self = this放在var语句的第一句<br /> ret = [],<br /> a = 1;<br />代码体缩进不大于3层, Closure嵌套不大于2层<br /> open: function() {<br /> if (a === 1) {<br /> for (vari = 0; i < 10; i++) {<br /> if (b === 3) {<br /> for (….) { <---- 请重构此方法, 让缩进<= 3层<br /> } <br /> }<br /> }<br /> }<br />
  8. 8. test: function() {<br />elm.click(function() {<br />var a = function() {<br />var b = function() { // 超过2层, 请重构<br />}<br /> }<br /> });<br />}<br />方法尽量不超过一屏,否则请重构<br />winport.js 1个方法达到39行, 1个47行<br />supplier-info.js 1个方法达到60行, 其中注释和空格占了20行<br />inplaceeditor.js 1个方法达到40行<br />ui.js 2 个方法达到 40行 (不过没有按这个规则书写,有方法内部有函数对象,所以比较长)<br />company-name-handler 有1个方法达到60行 (里面有较大的数据结构)<br />有1个50行<br />diy/header.js 有1个方法40行<br />pages.js 有1个方法达到50行<br />
  9. 9. 类(或对象)如果太长,则需要重构(根据功能来划分)<br />如果切割类的定义, 下次再详细分享<br />
  10. 10. 静态方法<br />$.each<br />可以对数组或对象进行迭代<br />this为当前项,可使用proxy改变this指向, <br />return false相当于break<br />如果对this进行相等性或类型检测时, 需要注意,typeof this === ‘object’<br /> new String(‘hello’) === ‘hello’ // false<br /> new String(‘hello’) == ‘hello’ // true<br />建议: 使用带参数方式, 顺便为当前项取个好名字<br />$.extend<br />设置默认参数<br />undefined值的项不会被复制<br />$.proxy<br />$.proxy(context, name) 减少缩进层次<br />
  11. 11. $.ajax<br />在script 调用返回302,IE78, FF会进入success函数, IE6会进入error函数, 行为不一致<br />在jsonp调用返回302时, IE678 FF都会进行error, 行为比较一致<br />总结: <br />在script调用时, 需要在success中进行数据检测, 因为有时候不一定正常返回<br />做出错处理时, 需要在success和error中同时做<br />在jsonp调用时, 行为一致, 在success中只做成功逻辑, 在error中做出错逻辑,<br />但在FF中会由于超时而产生一个js错误, 不影响功能<br />$.param<br />array/object -> querystring<br />对于中文参数的script请求,使用$.paramSpecial(…<br />旺铺中只用到一次paramSpecial, 只用在搜索的url拼接中,因为搜索关键字中会出现中文<br />$.serialize -> $.param($.serializeArray())<br />$.serializeArray -><br /> [{ name: ‘user’, value: ‘hello’}, { name: ‘pass’: ‘value’: ‘helo123’ }]<br />
  12. 12. 实例方法<br />index(element), 在1.4引入index(), index(selector), 认识一下<br />eq(index), 请用elm.eq(0) 代替 $(elm[0])<br />当在一个作用域中两次以上操作同一selector, 请保存一个引用<br />attr(function) <br />jQuery中在1.4版本后,有好多的setting方法支持function参数<br />toggleClass(class, switch), toggle(fun1, fun2, fun3…)<br />closest(expr)<br />andSelf() <br />end()<br />
  13. 13. 事件<br />event helpers: <br />click, mouseenter, submit… 通过bind实现的<br />focusin / focusout支持冒泡, 可以在delegate和live中使用<br />one(type, func)<br />bind(type, func)<br />可一次绑定多个事件,API比较详细,可参考它<br />trigger(event)<br />triggerHandler(event)<br />不触发浏览器默认行为<br />只针对第1个节点<br />不冒泡<br />返回事件函数结果,而不是jQ对象<br />live(type, handler)<br />delegate(selector, type, handler)<br />
  14. 14. 什么时候使用自定义事件?如何处理类(对象)之间的关系?<br />依赖倒置原则(DIP)<br />“抽象不应依赖于细节,细节应该依赖于抽象。”<br />思考各种回调函数,是如何引入间接层来 反转 依赖的<br />
  15. 15. jQuery#data的使用<br />存贮节点相关数据<br />配合html5 data标签使用<br />
  16. 16. jQ选择器Sizzle<br />优先采用#id, name, tag, tag.class, class最好要有tag修饰<br />Selector如果没有位置信息:<br />POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:((d*)))?(?=[^-]|$)/,<br />那么将采用从右到左的顺序解析<br />如 li.item a span 首先查找页面中所有的span, 然后再过滤出a内部的部分, 然后再过滤出 符合li.item的部分<br />在jQuery中,可以通过扩展 $.expr对 Sizzle进行扩展 <br />
  17. 17. 如何扩展?<br />开放封闭原则(Open-Closed principle)<br />“软件实体应该是可以扩展的,但是不可修改。“<br />
  18. 18. 例子<br />jQuery的扩展<br />通过 $.extend 和 $.fn.extend扩展, 不需要修改原代码<br />Sizzle的扩展也非常方便, 通过Sizzle.selectors进行扩展<br />侧边栏广告位<br />tracelog.js<br />instantvalidator.js<br />sign.js<br />数据结构是静止的算法 & 申明式编程<br />
  19. 19. OCP是一个目标<br />面对变化时,我们修改代码, 改完之后, 面对同类变化, 我们以添加代码的方式完成扩展, 而不需要修改原来的代码<br />受一次伤原理<br />不预测需求,只完成现有需求并符合OCP, 变化时才修改代码<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×