一, 注意定义 jQuery 变量的时候加入 varkeyword
这个不不过 jQuery, 全部 JavaScript 开发过程中, 都须要注意, 请一定不要定义成例如以下:
$loading = $('#loading'); // 这个是全局定义. 不知道哪里位置倒霉引用了同样的变量名, 就会郁闷至死的
二, 请使用一个 var 来定义变量
假设你使用多个变量的话. 请例如以下方式定义:
. 代码例如以下:
- varpage = 0,
- ?? $loading = $('#loading'),
- ?? $body = $('body');
不要给每个变量都加入一个 varkeyword, 除非你有严重的强迫症
三, 定义 jQuery 变量是加入 $ 符号
申明或者定义变量的时候, 请记住假设你定义的是 jQuery 的变量. 请加入一个 $ 符号到变量前. 例如以下:
. 代码例如以下:
var$loading = $('#loading');
这里定义成这种优点在于, 你能够有效的提示自己或者其他阅读你代码的用户. 这是一个 jQuery 的变量.
四, DOM 操作请务必记住缓存(cache)
在 jQuery 代码开发中, 我们常常须要操作 DOM,DOM 操作是非常消耗资源的一个过程, 而往往非常多人都喜欢这样使用 jQuery:
. 代码例如以下:
- $('#loading').html('完成');
- $('#loading').fadeOut();
代码没有不论什么问题, 你也能够正常运行出结果. 可是这里注意你每次定义而且调用 $('#loading')的时候, 都实际创建了一个新的变量. 假设你须要重用的话. 记住一定要定义到一个变量里, 这样能够有效的缓存变量内容. 例如以下:
. 代码例如以下:
- var$loading = $('#loading');
- $loading.HTML('完成');$loading.fadeOut();
这样性能会更好.
五, 使用链式操作上面那个样例, 我们能够写的更简洁一些:
. 代码例如以下:
- var $loading = $('#loading');
- $loading.HTML('完成').fadeOut();
六, 精简 jQuery 代码尽量把一些代码都整合到一起. 请勿这样编码:
. 代码例如以下:
- // !! 反面人物
- $button.click(function(){
- ??? $target.CSS('width','50%');
- ??? $target.CSS('border','1px solid #202020');
- ??? $target.CSS('color','#fff');
- });
应该这样书写:
. 代码例如以下:
- $button.click(function(){
- ??? $target.CSS({
- 'width':'50%','border':'1px solid#202020','color':'#fff'
- });
- });
七, 避免使用全局类型的选择器请勿例如以下方式书写:$('.something> *');
这样书写更好:$('.something').children();
八, 不要叠加多个 ID 请勿例如以下书写:$('#something#children');
这样就够了:$('#children');
九, 多用逻辑推断 || 或者 && 来提速请勿例如以下书写:
. 代码例如以下:
- if(!$something) {
- ??? $something = $('#something');
- }
这样书写性能更好:
. 代码例如以下:
$something=$something|| $('#something');
十, 尽量使用更少的代码
与其这样书写: if(string.length> 0){..}
不如这样书写: if(string.length){..}
十一, 尽量使用. on 方法
假设你使用比較新版本号的 jQuery 类库的话, 请使用. on, 其他不论什么方法都是终于使用. on 来实现的.
十二, 尽量使用最新版本号的 jQuery 最新版本号的 jQuery 拥有更好的性能, 可是最新的版本号可能不支持 ie6/7/8. 所以大家须要自己针对实际情况选择.
十三, 尽量使用原生的 JavaScript 假设使用原生的 JavaScript 也能够实现 jQuery 提供的功能的话, 推荐使用原生的 JavaScript 来实现.
十四, 总是从 #id 选择器来继承
这是 jQuery 选择器的一条黄金法则. jQuery 选择一个元素最快的方法就是用 ID 来选择了.
. 代码例如以下:
$('#content').hide();
或者从 ID 选择器继承来选择多个元素:
. 代码例如以下:
$('#contentp').hide();
十五, 在 class 前面使用 tag
jQuery 中第二快的选择器就是 tag 选择器(如 $('head')), 由于它和直接来自于原生的 JavaScript 方法 getElementByTagName(). 所以最好总是用 tag 来修饰 class(而且不要忘了就近的 ID)
. 代码例如以下:
varreceiveNewsletter = $('#nslForm input.on');
jQuery 中 class 选择器是最慢的, 由于在 IE 浏览器下它会遍历全部的 DOM 节点.
尽量避免使用 class 选择器. 也不要用 tag 来修饰 ID.
以下的样例会遍历全部的 div 元素来查找 id 为'content'的那个节点:
. 代码例如以下:
varcontent = $('div#content'); // 非常慢. 不要使用
用 ID 来修饰 ID 也是画蛇添足:
. 代码例如以下:
vartraffic_light = $('#content #traffic_light'); // 非常慢. 不要使用
十六, 使用子查询
将父对象缓存起来以备将来的使用
. 代码例如以下:
- varheader = $('#header');
- var menu = header.find('.menu');
- // 或者
- var menu = $('.menu', header);
十七, 优化选择器以适用 Sizzle 的 "从右至左" 模型
自版本号 1.3 之后, jQuery 採用了 Sizzle 库. 与之前的版本号在选择器引擎上的表现形式有非常大的不同. 它用 "从左至右" 的模型取代了 "从右至左" 的模型.
确保最右的选择器详细些. 而左边的选择器选择范围较宽泛些:
. 代码例如以下:
varlinkContacts = $('.contact-links div.side-wrapper');
而不要使用
. 代码例如以下:
varlinkContacts = $('a.contact-links .side-wrapper');
十八, 採用 find(). 而不使用上下文查找. find()函数的确快些.
可是假设一个页面有很多 DOM 节点时. 须要来回查找时, 可能须要很多其他时间:
. 代码例如以下:
- vardivs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6
- var divs = $('#pageBody').find('.testdiv'); // 2324 on Firebug 3.6 - The besttime
- var divs = $('#pageBody .testdiv'); // 2469 on Firebug 3.6
十九, 编写属于你的选择器假设你常常在代码中使用选择器, 那么扩展 jQuery 的 $.expr[':']对象吧. 编写你自己的选择器. 以下的样例中, 我创建了一个 abovethefold 选择器, 用来选择不可见的元素:
. 代码例如以下:
- $.extend($.expr[':'],{
- ?abovethefold: function(el) {
- ??return $(el).offset().top <$(Windows).scrollTop() +$(Windows).height();
- ?
- }
- });
- var nonVisibleElements = $('div:abovethefold'); // 选择元素
二十, 缓存 jQuery 对象将你常常常使用的元素缓存起来:
. 代码例如以下:
- var header = $('#header');
- var divs = header.find('div');
- var forms = header.find('form');
当要进行 DOM 插入时, 将全部元素封装成一个元素
二十一, 直接的 DOM 操作非常慢.
尽可能少的去更改 HTML 结构.
. 代码例如以下:
- var menu = '<ul id="menu">';
- for (var i = 1; i <100; i++) {
- menu += '<li>' + i + '</li>';
- }
- menu += '</ul>';
- $('#header').prepend(menu);
- // 千万不要这样做:
- $('#header').prepend('<ul id="menu"></ul>');
- for (var i = 1; i <100; i++) {
- $('#menu').append('<li>' + i + '</li>');
- }
二十二, 虽然 jQuery 不会抛出异常, 但开发人员也应该检查对象
虽然 jQuery 不会抛出大量的异常给用户. 可是开发人员也不要依赖于此.
jQuery 一般会运行了一大堆无用的函数之后才确定一个对象是否存在.
所以在对一个作一系列引用之前, 应先检查一下这个对象存不存在.
二十三. 使用直接函数. 而不要使用与与之等同的函数为了获得更好的性能. 你应该使用直接函数如 $.Ajax(), 而不要使用 $.get(),$.getJSON(),$.post(), 由于后面的几个将会调用 $.Ajax().
二十四, 缓存 jQuery 结果. 以备后来使用你常常会获得一个 javasript 应用对象 -- 你能够用 App. 来保存你常常选择的对象, 以备将来使用:
. 代码例如以下:
- App.hiddenDivs = $('div.hidden');
- // 之后在你的应用中调用:
- App.hiddenDivs.find('span');
二十五, 採用 jQuery 的内部函数 data()来存储状态不要忘了採用. data()函数来存储信息:
. 代码例如以下:
- $('#head').data('name', 'value');
- // 之后在你的应用中调用:
- $('#head').data('name');
二十六, 使用 jQuery utility 函数不要忘了简单有用的 jQuery 的 utility 函数.
我最喜欢的是 $.isFunction(), $isArray()和 $.each().
二十七, 为 HTML 块加入 "JS" 的 class 当 jQuery 加载之后, 首先给 HTML 加入一个叫 "JS" 的 class
. 代码例如以下:
$('HTML').addClass('JS');
唯独当用户启用 JavaScript 的时候, 你才干加入 CSS 样式. 比如:
. 代码例如以下:
- /* 在 CSS 中 */
- .JS #myDiv{
- display:none;
- }
所以当 JavaScript 启用的时候, 你能够将整个 HTML 内容隐藏起来. 用 jQuery 来实现你想实现的(譬如: 收起某些面板或当用户点击它们时展开). 而当 JavaScript 没有启用的时候, 浏览器呈现全部的内容. 搜索引擎爬虫也会勾去全部内容. 我将来会很多其他的使用这个技巧.
二十八, 推迟到 $(Windows).load
有时候採用 $(Windows).load()比 $(document).ready()更快. 由于后者不等全部的 DOM 元素都下载完之前运行.
你应该在使用它之前測试它.
二十九, 使用 Event Delegation 当你在一个容器中有很多节点. 你想对全部的节点都绑定一个事件. delegation 非常适合这种应用场景. 使用 Delegation, 我们仅须要在父级绑定事件, 然后查看哪个子节点 (目标节点) 触发了事件.
当你有一个非常多数据的 table 的时候, 你想对 td 节点设置事件, 这就变得非常方便.
先获得 table, 然后为全部的 td 节点设置 delegation 事件:
. 代码例如以下:
- $("table").delegate("td","hover", function(){
- $(this).toggleClass("hover");
- });
三十, 使用 ready 事件的简写假设你想压缩 JS 插件. 节约每个字节. 你应该避免使用 $(document).onready()
. 代码例如以下:
- // 也不要使用
- $(document).ready(function (){
- // 代码
- });
- // 你能够如此简写:
- $(function (){
- // 代码
- });
三十一, jQuery 单元測试測试 JavaSript 代码最好的方法就是人来測试.
但你能够使用一些自己主动化的工具如 Selenium,Funcunit,QUit.QMock 来測试你的代码(尤其是插件).
我想在另外一个专题来讨论这个话题由于实在有太多要说的了.
三十二, 标准化你的 jQuery 代码常常标准化你的代码, 看看哪个查询比較慢, 然后替换它. 你能够用 Firebug 控制台. 你也能够使用 jQuery 的快捷函数来使測试变得更 easy 些:
. 代码例如以下:
- // 在 Firebug 控制台记录数据的快捷方式
- $.l($('div'));
- // 获取 UNIX 时间戳
- $.time();
- // 在 Firebug 记录运行代码时间
- $.lt();
- $('div');
- $.lt();
- // 将代码块放在一个 for 循环中測试运行时间
- $.bm("var divs = $('.testdiv','#pageBody');"); // 2353 on Firebug3.6
三十三, 使用 HMTL5 新的 HTML5 标准带来的是更轻巧的 DOM 结构. 更轻巧的结构意味着使用 jQuery 须要更少的遍历, 以及更优良的加载性能. 所以假设可能的话请使用 HTML5.
三十四, 假设给 15 个以上的元素加样式时. 直接给 DOM 元素加入 style 标签要给少数的元素加样式, 最好的方法就是使用 jQuey 的 CSS()函数. 然而更 15 个以上的较多的元素加入样式时, 直接给 DOM 加入 style 标签更有效些.
这种方法能够避免在代码中使用硬编码(hard code).
. 代码例如以下:
- $('<style type="text/css"> div.class { color: red; }</style>')
- .appendTo('head');
三十五, 避免加载多余的代码将 JavaScript 代码放在不同的文件里是个好的方法. 仅在须要的时候加载它们.
这样你不会加载不必要的代码和选择器. 也便于管理代码.
三十六, 压缩成一个主 JS 文件, 将下载次数保持到最少当你已经确定了哪些文件是应该被加载的, 那么将它们打包成一个文件.
用一些开源的工具能够自己主动帮你完成. 如使用 Minify(和你的后端代码集成)或者使用 JSCompressor,YUI Compressor 或 Dean Edwards JS packer 等在线工具能够为你压缩文件. 我最喜欢的是 JSCompressor.
三十七, 须要的时候使用原生的 Javasript 使用 jQuery 是个非常棒的事情. 可是不要忘了它也是 JavaScript 的一个框架. 所以你能够在 jQuery 代码有必要的时候也使用原生的 JavaScript 函数, 这样能获得更好的性能.
三十八, 缓慢加载内容不仅能提高加载速度, 也能提高 SEO 优化 (Lazy loadcontent for speed and SEO benefits)使用 Ajax 来加载你的站点吧, 这样能够节约 server 端加载时间. 你能够从一个常见的側边栏 widget 開始.
来源: http://www.bubuko.com/infodetail-3008156.html