如何結構RequireJS

我看到了一個複雜的Web應用程序有有關地雷薩姆問題（如this interesting one），但我想知道的是如何正確地做到這一點，並通過其他的問題或者我找不到它RequireJS文檔。如何結構RequireJS

我工作的一個相當沉重的Web應用程序，將只在一個HTML頁面中運行。

RequireJS之前，我曾經做了很多的公共方法JS模塊，並通過對DOM已準備就緒方法on事件，他們連這樣的：

var DataList = function() { 
    this.base = arguments[0]; 
    this.onUpdate = function (event) { ... } 
} 

$(function() { 
    var dataList = {}; DataList.apply(dataList, [$('#content')]); 
    $('table.main', dataList.base).on ('update', dataList.onUpdate); 
});

隨着RequireJS，我可以很容易地看到，我可以在單個文件上將DataList和所有其他類分開，但$(function() {});部分呢？

我仍然可以保持下去，但不是jQuery的的DOM準備功能，我把事件的RequireJS，主要功能（）時，我的主庫被加載？

還是我不得不改變我創建JS「類」的方式，包括也許是初始化函數，當我做了將被調用，例如：

require(['Datalist'], function(dataList) { 
    dataList.init($('#content')); 
});

什麼讓我很煩最是因爲我只有一個html文件，恐怕require()將不得不加載一個巨大的文件列表，我寧願只加載庫，它們會加載需要工作的子庫。

我不知道，有RequireJS思維方式失去了我一下：/

你會如何做？

來源

2012-07-25 Cyril N.

「我仍然可以保持下去，但不是jQuery的的DOM準備功能，我把主要功能的事件（）的RequireJS，當我的主庫被加載的？」

如果你單獨的功能或「類」到模塊中，然後就可以使用RequireJS domReady功能：

require(['module1'], function(module1) { 
    domReady(function(){ 
     // Some code here ftw 
    }) 
});

這裏的好處是domReady功能將允許模塊的下載瞬間，但不會執行它們，直到你DOM已準備就緒。

「還是我不得不改變我創建JS的方式‘類’，包括可能是初始化函數，當我做了將被調用，例如」

你不需要以這種方式改變您與代碼交互的方式，但您可以改進它。在您的例子我會做的DataList模塊：

define(function(require) { 
    var $ = require('jquery'); 

    var DataList = function() { 
     this.base = arguments[0]; 
    }; 

    DataList.prototype.onUpdate = function() { 

    }; 

    return DataList; 
}); 

require(['data-list'], function(DataList) { 

    var data = {}; 

    // Call DataList with new and you won't need to set the context with apply 
    // otherwise it can be used exactly as your example 
    new DataList(data); 

});

「是什麼讓我很煩最深的是，因爲我只有一個HTML文件，恐怕需要（）會加載一個巨大的列表文件，我寧願只加載庫，它們會加載工作所需的子庫。「

使您的代碼儘可能模塊化，只要您想/ can和then use the optimiser就可以將它打包成一個JS文件。

來源

2012-07-26 13:06:27

這很有趣！但是我在哪裏放'$（'表。main'，dataList.base）.on（'update'，dataList.onUpdate）;'code？在'DataList'構造函數中還是在'new DataList（data）'之後？ – 2012-07-26 13:14:03

您可以將它作爲參數傳遞給DataList，並在構造函數中對其進行操作，以便您的代碼看起來像新的DataList（$（'element'），data）; – 2012-07-26 13:29:15

如何結構RequireJS

回答

相關問題