啓動Javascript模塊的代碼

大多數我使用的javascript是UI代碼 - 將附加功能附加到我的頁面的HTML框架並與各種HTML元素進行交互的代碼。啓動Javascript模塊的代碼

總體而言，我贊成將UI代碼分解爲模塊。例如，如果我的代碼將處理程序附加到實現輪播行爲的後退/下一個按鈕，將代碼放入「輪播」模塊中是有意義的。

問題是，我應該在哪裏放置在頁面加載時運行的引導代碼，並且實際決定將加載哪些模塊以及哪些元素？

它應該在JS文件中，並在JS文件包含後立即執行？

或者它應該位於HTML文件頂部（或底部）的腳本標記中？

或者應該沒有特定的代碼，但JS文件應該基於父元素的ID /類來確定哪些元素附加處理程序等等？

哪種方法最適合您？

來源

2010-02-04 Jonathan

我通常將每個模塊分開在不同的.js文件中。每個文件/模塊都有自己的$(document).ready()（一個jQuery引導程序函數）來正確加載。然後通過適當添加<script>來加載該特定文件/模塊。

這與插件對於流行的JavaScript庫/框架的工作方式類似，您只需包含它們並應用行爲即可。

編輯

例如，旋轉木馬（carousel.js）模式將是這個樣子：

(function(){ 

    function bindNext(){...} 
    function bindPrev(){...} 

    // jQuery bootstrap 
    $(document).ready(function(){ 
     bindNext(); 
     bindPrev(); 
    }); 

})();

也許另一個模塊（foo.js）：

(function(){ 

    function foo(){...} 
    function bar(){...} 

    // jQuery bootstrap 
    $(document).ready(function(){ 
     foo(); 
     bar(); 
    }); 

})();

這樣，我所要做的就是添加這些文件，這些模塊才能正常工作。由於每個模塊定義了它的行爲，因此不需要中心位置來挖掘不同模塊的所有行爲。

來源

2010-02-04 00:30:07

那麼您的代碼如何確定哪些元素將功能附加到？它是基於，比如說，一個特定的父元素的類屬性？因此，具有該類的* any *元素將會使用該模塊進行初始化？ – Jonathan 2010-02-04 00:38:03

@jonathanconway：模塊的行爲是在'$（document）.ready（）'內部定義的。因此，如果我有一個名爲'carousel'的模塊，我會將附加事件的代碼放在其$（document）.ready（）函數中相應的next/prev按鈕中。 – 2010-02-04 00:45:02

好吧，我明白你的意思。似乎是個好主意。 – Jonathan 2010-02-04 00:50:26

我喜歡給我的js模塊一個Init（）或Start（）函數。然後，代碼生成與JS交互的標記還可以編寫線腳本來調用Init/Start函數。這樣我也可以在啓動時將參數傳遞給特定於該實例的模塊，甚至可以有多個實例。

來源

2010-02-04 00:31:30

我想添加js文件作爲導入庫，我的html文件作爲主要應用。在文件加載後，我喜歡在腳本標記內進行任何初始化。我會小心把東西放入一個js文件中，這個js文件通過id或其他方式引用頁面上的特定元素（後退/下一個按鈕）。設置它的方式會更好，因此您可以在初始化之前配置腳本的方式。

來源

2010-02-04 01:26:49 morgancodes

啓動Javascript模塊的代碼

回答

相關問題