如何爲網頁設計人員實現企業級JavaScript「框架」？

我的任務是改進當前混亂，這是我們的JavaScript「戰略」;我們是一家網上購物公司，我的老闆給了我時間正確地做到這一點。他非常熱衷於保持這種模塊化並提高組件的可重用性。如何爲網頁設計人員實現企業級JavaScript「框架」？

我們的HTML使用JSP呈現，我們有很多自定義標籤寫出來，例如，有關產品的信息，而不需要網頁設計師擔心。

現在，我們想用JavaScript來做類似的事情。網頁設計師應該給一組自定義標籤一樣，比方說，

<foo:draggable> 
... some HTML here ... 
</foo:draggable>

，將包裹在<div>的HTML在頂部一拖欄和關閉按鈕。

我的想法是用獨特的命名空間CSS類名稱標記div，如foo_draggable，然後將所有函數放在一個JS文件中。然後，該JS文件會查看DOM中是否存在具有CSS類foo_draggable的元素，並且如果它發現它會附加所需的事件處理程序。

但是，我很擔心擴展問題，並想知道當很多選擇器查詢經常不會被使用時是否有很多選擇器查詢運行是個好主意。

第一種方法是明確啓動每個可拖動的項目，但這意味着要將<script>標籤放在所有位置。第二種方法是不把所有的UI功能放在一個文件中，而只是下載我需要的，但這意味着更多的HTTP請求和更慢的頁面加載速度。

有沒有人有這方面的經驗？

來源

2009-11-12 Leonard Ehrenfried

怎麼樣有兩個類名？

<div class='foo fooDragable'></div> 
<div class='foo fooSortable'></div>

您將類'foo'添加到所有需要javascript修改的元素。您的JavaScript必須爲foo只檢查一次dom。

var $foo = $('.foo');

之後，您可以在此數組這應該是比完整DOM方法更小的範圍內進行搜索。

var $dragAble = $foo.filter('.fooDragable');

來源

2009-11-12 14:39:12 jantimon

請用Javascript！= jQuery。 – BalusC 2009-11-12 14:43:20

你知道，這是一個非常好的主意...... +1 :-) – 2009-11-12 14:45:10

非常聰明的解決方案。恥辱我自己沒有想到它。 – 2009-11-12 14:54:07

你有沒有考慮過或看過JSF？如果您還沒有使用JSF，我知道這是一個重大改變。但是有很多隨時可用的JSF組件庫，並且有一個ajaxical醬，例如RichFaces，IceFaces，PrimeFaces等等。爲您自己創建組件/標籤幾乎是浪費時間。

或者您可以替換所有的Javascripts使用偉大的jQuery JS框架。

來源

2009-11-12 14:42:58 BalusC

我們對JSF進行了評估，但最終決定在服務器上保留支持bean和UI樹的整個船載是不值得的。我自己從來沒有使用過JSF，所以無法確定這是否是正確的決定。 – 2009-11-12 15:07:19

根據您擁有多少個獨立組件，運行選擇器的額外開銷可能不是什麼大問題。當頁面加載時，您可以初始化所有組件。任何不在網頁上的東西都不會被初始化，並且不會帶來進一步的開銷。在大多數JavaScript框架中，通過類名（或標籤名）進行選擇非常快。這只是複雜的選擇器，它本來不受瀏覽器本身支持，速度很慢。

如果您有一些常用的組件，然後是一組不常用的組件，那麼可以將它們分開。將常用組件保存在單個JavaScript文件（縮小，壓縮和主動緩存）中，並將其加載到每個頁面中，而不管是否需要。緩存將確保它只下載一次，並且它只會是一個小的HTTP請求。對於較不常見的組件，請將它們保存在單獨的文件中（理想情況下，每個組件一個），並在使用它們的頁面上添加腳本標記。

我對JSP的工作方式並不完全熟悉，但可能會自動執行此操作 - 如果文檔中包含標記，爲文檔頭中的foo_widget.js添加腳本標記，或者類似那。

來源

2009-11-12 14:45:20 BlackAura

如何爲網頁設計人員實現企業級JavaScript「框架」？

回答

相關問題