There are only two hard things in Computer Science: cache invalidation and naming things.-- Phil Karlton

選擇器優(yōu)化

1， 指定性強(qiáng)的選擇器寫右邊，指定性弱的在寫左邊。
jQuery 解析選擇器是從右向左解析的。對(duì)于選擇器 div a，jQuery 會(huì)先去找所有的 a 標(biāo)簽，然后找 a 標(biāo)簽的祖先元素中有 div 標(biāo)簽的元素。

指定性強(qiáng)的選擇器寫在右邊相比放在左邊，能減少查詢?cè)氐臄?shù)量，性能更好。

$('div.data .brad')

應(yīng)該優(yōu)化成

$('.data td.brad')

2，用更精確的選擇器
能用 id 選擇器的就用 id 選擇器。用 id 選擇器找元素比 類選擇器快。

$('#container div.robotarm');

可以優(yōu)化成

 $('#container').find('div.robotarm')

3，通配符的優(yōu)化
用通配符的查詢性能相對(duì)比較差。

$('.buttons > *')
$('.gender *:radio')

可以優(yōu)化為

$('.buttons').children()
$('.gender input:radio')

4，不要過分的指定選擇器
過分指定優(yōu)化器，增加不必要的查詢次數(shù)，降低性能。

$('.data table.attendees td.brad')

可以優(yōu)化為

$('.data td.brad')

用 jQuery 實(shí)現(xiàn)發(fā)布訂閱框架的幾種方法

發(fā)布/訂閱框架用來做對(duì)象間做的消息交互，可以降級(jí)代碼的耦合度。

方法1: 用 on 和 off
在 jQuery 中，可以用 on 監(jiān)聽自定義事件。用 off 來取消監(jiān)聽自定義事件。用 trigger 來觸發(fā)自定義事件。實(shí)現(xiàn)如下

/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
 * http://benalman.com/
 * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
(function($) {
  var o = $({});
  // 訂閱事件
  $.subscribe = function() {
    o.on.apply(o, arguments);
  };
  // 取消訂閱事件
  $.unsubscribe = function() {
    o.off.apply(o, arguments);
  };
  // 發(fā)布事件
  $.publish = function() {
    o.trigger.apply(o, arguments);
  };
}(jQuery));

用法

function handle(e, a, b, c) {
  // `e` is the event object, you probably don't care about it.
  console.log(a + b + c);
};
$.subscribe("/some/topic", handle);
$.publish("/some/topic", [ "a", "b", "c" ]);
// logs: abc
$.unsubscribe("/some/topic", handle); 

方法2：用 Callbacks
調(diào)用 jQuery.Callbacks() 返回的對(duì)象有方法 add, remove 和 fire，對(duì)應(yīng)添加，刪除，觸發(fā)回調(diào)函數(shù)的功能。實(shí)現(xiàn)代碼如下

var topics = {};
jQuery.Topic = function( id ) {
    var callbacks,
        topic = id && topics[ id ];
    if ( !topic ) {
        callbacks = jQuery.Callbacks();
        topic = {
            publish: callbacks.fire,
            subscribe: callbacks.add,
            unsubscribe: callbacks.remove
        };
        if ( id ) {
            topics[ id ] = topic;
        }
    }
    return topic;
}

用法

function fn1( value ){
  console.log( value );
}
function fn2( value ){
  fn1("fn2 says:" + value);
  return false;
}
// Usage:
// Subscribers
$.Topic( 'mailArrived' ).subscribe( fn1 );
$.Topic( 'mailArrived' ).subscribe( fn2 );
$.Topic( 'mailSent' ).subscribe( fn1 );
// Publisher
$.Topic( 'mailArrived' ).publish( 'hello world!' );
$.Topic( 'mailSent' ).publish( 'woo! mail!' );

方法3: 用 jQuery UI 的 Observable
$.Observable(觀察對(duì)象) 中的觀察對(duì)象的內(nèi)容發(fā)生改變時(shí)，會(huì)觸發(fā) change 事件。示例如下

var myData = [], 
    observer = $.observer(myData);
function dataChange( data ){
   console.log('New data arrived with ID ' + data[0].id + ' and value ' + data[0].title);   
}
$(observer).bind("change", function ( e ) { 
    dataChange( e.target.data );
});
$.observable( myData ).insert({
                id: myData.length + 1,
                title: 'test'
            });

該方法不算實(shí)現(xiàn)了發(fā)布訂閱模式。

方法4: 用第三方插件
這種方式就不細(xì)講了，對(duì)細(xì)節(jié)感興趣的的可以點(diǎn)這里。

所有 JavaScript 模式：http://shichuan.github.io/javascript-patterns/

往期前端早讀課地址：http://www.itdecent.cn/c/0fda3d387a6d