將jQuery增強功能添加到網站的最佳方式是什麼？

有一段時間了，我一直在使用jQuery在我的網站上通過JavaScript提供增強功能。但是，我現在開始思考 - 從性能角度來看 - 組織我的函數文件的最佳方式是什麼？將jQuery增強功能添加到網站的最佳方式是什麼？

到現在爲止，我已經做了類似下面的東西：

$(document).ready(function() { 
    foo(); 
    bar(); 
}); 
function foo() { 
    // do something here 
}; 
function bar() { 
    // do something else here, and so on... 
};

不過，我後來看到的JavaScript文件的佈局已經是這樣的：

$(document).ready(function() { 
    $(selector).foo(); 
    $(selector).bar(); 
}); 
$.fn.foo = function() { 
    $(this).each(function() { 
     // do something here and return 
    }); 
}; 
$.fn.bar = function() { 
    $(this).each(function() { 
     // do something here and return 
    }); 
};

是更好的做法如第二個示例中那樣擴展jQuery並將方法分配給選擇器？或者，將單個函數定義爲第一個例子還是可以的嗎？

來源

2010-07-24 Martin Bean

它非常依賴（全部答案！）。如果一個功能作爲一個插件有意義，即可以在您的網站上以不同方式重用，那麼將其作爲插件。類似地，如果一個功能在整個地方都很有用，例如日期解析功能，使其成爲實用功能。

有幾個點，我認爲是真正值得銘記 - 範圍和污染

範圍
如果一個函數需要在一個範圍內，使得它訪問在其他作用域中運行，然後使其成爲可能。如果沒有，不要。可通往

污染
儘量不要污染與衆多不同功能的全局命名空間/對象。通過利用對象文字將代碼組織到相關函數中，以便在包含具有包含相關函數的屬性的對象的全局對象上僅創建一個屬性。例如，

var date = { 
    parse : function(s) { 
     // some date parsing function 
    }, 
    format : function(date, patten) { 
     // some date formatting function 
    } 
}

總之，

附加到jQuery對象時，它是有意義的（可重複使用的插件，普通效用函數）中，其提供的可訪問的最窄範圍
聲明函數給他們需要的（必要時使用關閉）。
使用對象文本將相關的功能和防止污染

來源

2010-07-24 13:29:12

「 - 從性能角度來看 - 」在jQuery.fn對象中添加函數（插件）或直接在window對象下創建該函數globally並沒有什麼不同。

從它想了很多有條不紊/邏輯的方式，但這是另一個故事，我猜。

來源

2010-07-24 13:12:23 jAndy

我不知道確切的答案，但我沒有看到在每次加了jQuery方法的邏輯。測試該代碼的一個好方法是使用螢火蟲中的Net面板。運行兩位代碼，看看哪一個更好。

來源

2010-07-24 13:14:36

謝謝。這是一個相當大的社交網站，我期待提高它的性能（它屬於公司，我是指定的開發人員，所以不要因爲試圖創建下一個Facebook而煩惱）;-)'） – 2010-07-24 13:19:26

啊我最近一直對此感興趣。在這裏發現了一些有用的帖子，我昨天問了一個問題也出現了一些很好的信息： http://stackoverflow.com/questions/46214/good-ways-to-improve-jquery-selector-performance http：///stackoverflow.com/questions/3316113/why-do-i-have-to-use-this-closed 這也是很好的信息： http://www.artzstudio.com/2009/04/jquery -performance-rules/ – 2010-07-24 13:24:53

如果你的函數對一組元素進行操作，你想他們是便攜式，去插件路線（並確保他們在一個外部文件中的用戶沒有下載每個頁面加載）。如果他們不要做元素的集合（例如任何jQuery鏈），使它們插入IMO沒有任何意義。

我建議，如果你的函數不是document.ready範圍之外需要，然後將它們放置在那裏清理全局命名空間了一下，像這樣：

$(document).ready(function() { 
    foo(); 
    bar(); 
    function foo() { 
    // do something here 
    } 
    function bar() { 
    // do something else here, and so on... 
    } 
});

作爲一個有點更廣回答，有地段影響頁面速度的東西，Google has a pretty good resource with a rundown of each。

來源

2010-07-24 13:20:19

和雅虎！ http://developer.yahoo.com/performance/rules.html – 2010-07-24 13:37:57

性能不只是一個的計算機能夠多快地解釋，並運行一段代碼度量。這是一個清潔的問題。也想想程序員如何有效地維護和擴展代碼。全局命名空間中的許多功能可能很快成爲維護的噩夢。

讓我們用一個類比。

第一種方法與青少年服裝系統的方法相同：在混亂的地方散落在地板上。如果你想在自己的房間裏找一件衣服，你會從哪裏開始？

他們應該真正做的是把這些衣服放在抽屜裏，包含類似的事情每個抽屜 - 在底部的最上面的抽屜襪子，褲子等

由此可見，最好的辦法是嘗試並在一些容器中封裝儘可能多的「like」函數，比如jQuery插件。您不僅可以更輕鬆地找到並重用這些函數，當需要改變某些功能的行爲方式時，您會發現它更容易切換和更改代碼。

來源

2010-07-24 13:34:13 Chris

將jQuery增強功能添加到網站的最佳方式是什麼？

回答

相關問題