jQuery编码规范

jQuery编码规范-前端开发规范

本文给大家呈现的如何书写更好的jQuery代码的相关规范和最佳实践，不包括javascript方面的规范。文章比较长，jQuery和前端大神可以跳过。有好的意见和建议请大家评论留言，或者订阅本文下方的微维系公众号反馈。

目录

1、加载jQuery

2、jQuery变量

3、选择器

4、DOM操作

5、事件

6、Ajax

7、效果和动画

8、插件

9、链式操作

10、杂项

11、参考文献

下面我们开始：

加载jQuery

1. 在您的页面中优先使用CDN的方式，CDN方式的优点就不在这里赘述了，不懂的同学可以去百度补习一下。国外大部分网站都在使用谷歌的CDN静态资源加速（由于国内goolge限制问题，建议使用国内的CDN，例如百度的CDN）。

   

2. 利用上面代码，预备一个相同版本的本地jQuery库，以备不时之需。

3. 使用如上所示的协议独立性URL（去掉http:或https:，直接以//开头,例如‘//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js’）

4. 如果可能，尽量保持所有的JS代码和jQuery在页面底部加载。

5. 使用哪个版本？

   1. 如果你要兼容ie6、7、8，不要使用jQuery2.x版本

   2. 对于新的应用来说，如果不存在兼容性问题，强烈建议使用最新版本

   3. 从CDN加载jQuery时，指定你需要加载版本的完整版本号（例如，使用1.11.0而不是1.11或者1）

   4. 不要加载多个jQuery版本

   5. 不要使用jquery-latest.js

6. 如果你的页面同时用到了类似于Prototype、MooTools、Zepto等这些同样使用$的类库，要使用jquery替代$，我们可以使用$.noConflict()把$的控制权还给其他库。

7. 使用Modernizr实现高级的浏览器特征检测。

jQuery变量

1. 所有用于存储、缓存jQuery对象的变量应该以$前缀命名。

2. 最好把使用选择器返回的jQuery对象缓存到变量里，以便重用。

   

3. 使用驼峰法命名变量。（不知道的童鞋可以百度百科）

选择器

1. 尽可能的使用效率更高的ID选择器，因为仅仅使用“document.getElementById()”实现。

2. 使用类（Class）选择器时，不要使用元素类型（Element Type）。

   

3. 对于ID->child的方式，使用find的方式比嵌套选择器高效，因为第一个选择器不用使用Sizzle这个选择器引擎。

   

4. 选择器右边越具体越好，左边相反。

   

5. 避免过度具体。

   

6. 给你的选择器一个范围。

   

7. 避免使用全局选择器

   

8. 不要使用重复、交叉使用ID选择器，因为单独的ID选择将使用更高效的document.getElementById()方式。

   

DOM操作

1. 处理现存元素之前，先剥离，处理之后再附加。

   

2. 使用字符串连接符或者array.join()，比.append高效。

   
   

3. 不要操作空缺对象。

   

事件

1. 每个页面只使用一次document的ready事件，这样便于调试与行为流跟踪。

2. 尽量不要使用匿名函数绑定事件，因为匿名函数不利于调试、维护、测试、重用。

   

3. 对于document ready事件处理函数，尽量不用匿名函数，理由同上。

   

4. document ready事件处理函数可以包含在外部文件中，然后通过页内js的方式调用。

   

5. 不要使用html中的行为语法调用事件(html的onclick事件属性)，那简直是调试者的噩梦。始终使用jquery来绑定、删除事件是一件惬意的事情。

   

6. 可能的时候，使用自定义事件，我们可以很方便的解除该事件绑定而不影响其他事件。

   

7. 当你给多个对象绑定相同的事件时，可以使用事件委派。事件委派中，当我们给父对象绑定事件后，匹配选择器的后代都可以绑定该事件，无论该后代原来就有，还是新增元素。

   

Ajax

1. 避免使用.getJson()和.get(), 像它的名字昭示的那样使用$.ajax()。

2. 不要在https站点上使用http请求，最好使用独立性URL（不包含http:和https:，直接以//开头）。

3. 不要在请求URL上放置参数，使用data对象传递参数。

   

4. 最好明确指定数据类型(dataType)以便于明确处理的数据类型（参见下例）。

5. 对Ajax加载的内容使用事件委派，事件委派可以很好的解决新增元素的事件绑定问题。

   

6. 使用Promise interface（不知道怎么翻，请大家赐教）。

   

7. Ajax样例。

   

效果和动画

1. 采用克制和一致的方法去实现动画。

2. 不要过度使用动画效果，除非是用户体验所需。尝试使用简单的show/hide，slideUp/slideDown等方法切换对象，尝试使用‘fast’,'slow'和‘medium’。

插件

1. 优先选用具有良好支持、测试、社区支持的插件。

2. 检查该插件与您所用jQuery版本的兼容性。

3. 任意可复用组件都应该形成插件

链式操作

1. 将链式操作看成变量缓存和多选择器请求的替代方式。

   

2. 当链式操作超过三个或者因为事件绑定变得复杂时，使用换行和缩进提高链式操作的可读性。

   

3. 对于长的链式操作来说，也可以把中间对象缓存成一个变量。

杂项

1. 使用字面对象传递参数。

   

2. 不要混写css与jQuery。

   

3. 不用使用弃用的方法，了解每个新版本的弃用方法，并且避免使用它，非常重要。

4. 必要的时候可以混合jQuery和原生js。

   

参考文献

• jQuery Performance: http://learn.jquery.com/performance/

• jQuery Learn: http://learn.jquery.com

• jQuery API Docs: http://api.jquery.com/

• jQuery Coding Standards and Best Practice: http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-and-best-practice/

• jQuery Cheatsheet: http://lab.abhinayrathore.com/jquery-cheatsheet/

• jQuery Plugin Boilerplate: http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

感谢阅读。

来源：前端观察