關於require.js的困惑

我一直在尋找require.js，我對如何將它用於我的小部件系統感到困惑。關於require.js的困惑

我的小部件系統基本上允許用戶選擇要查看哪個小部件存儲在數據庫中。

所以當用戶在下一次訪問時加載頁面時，他/她只會看到他/她選擇的小部件。實際上只加載html，顯示小部件所需的javascript，而不是加載所有小部件的所有html和javascript，然後隱藏不需要的東西。

我感到困惑的是如何與require.js

做到這一點我應該動態地生成以下require.js代碼？如果用戶保存widget_1, widget_5 and widget_70，我假設我需要動態生成JavaScript像這樣？

require(['widget_1','widget_5','widget_70'], function(w1, w5, w70){ 
    // then do something here? 
});

需求線，是否應該是基於SQL查詢動態生成？

所以，如果他們只選擇一個小部件，以節省下一次觀看，他們將只能得到：

require(['widget_90'], function(w90){ 
    // then do something here? 
});

難道這就是我應該做的？

來源

2013-01-07 oshirowanen

始終路徑的定義到你的模塊依賴過於頻繁的圖書館，像下面：

<script data-main="scripts/main" src="scripts/require.js"></script>

文件：腳本/ main.js

require.config({ 
    paths: { 
     jQuery_1_7_2: 'lib/jquery.1.7.2', 
     underscore: 'lib/underscore', 
     ..... 
     ..... 
    } 
});

注：您需要在模塊中包含庫並將其作爲對象返回，如下所示：

文件：lib/jquery.1.7.2。JS

define([ 'lib/jquery/jquery.1.7.2.min' ], function() { 

    return jQuery.noConflict(true); 

});

相同的方法可以遵循爲不遵循模塊化方法[AMD規格]

注其他庫：定義庫模塊的上述步驟可以通過使用shim feature

避免

由於您的頁面是動態的，您永遠不會知道將加載哪些模塊。

您可以調用多個require（）調用來加載模塊。由於requirejs異步加載腳本，下面的方法不會損害您的頁面性能。

模塊-1與在HTML視圖

<html>.. 
<div id="module_1"> 
    //contents of module 1 
</div> 
<script type="text/javascript"> 
    require(["scripts/widgets/module_1"], function(module_1){ 
     module_1.init(); 
    }) 
</script> 
..</html>

文件：腳本/部件/ module_1.js

define(["jQuery_1_7_2","underscore"], function($, _){ 
    // Module functionality goes here 
    return { 
     init: function(){ 
      // Module initialiser 
     } 
    } 
});

模塊2：在HTML視圖

<html>.. 
<div id="module_2"> 
    //contents of module 2 
</div> 
<script type="text/javascript"> 
    require(["scripts/widgets/module_2"], function(module_2){ 
     module_2.init(); 
    }) 
</script> 
..</html>

文件：腳本/部件/ module_2.js

define(["jQuery_1_7_2","underscore"], function($, _){ 
    // Module functionality goes here 
    return { 
     init: function(){ 
      // Module initialiser 
     } 
    } 
});

如果你不介意的初始化DOM加載模塊後，您可以使用controljs，改變MIME類型的腳本標籤。我相信這對網頁性能沒有太大的影響。

來源

2013-01-07 12:14:51 nairvijays

+1有一件事，imho最好在[shim配置的init函數]（http://requirejs.org/docs/api.html#config-shim）中定義jQuery.noConflict（）。 – asgoth

也許我現在太過分了，但我看不出這是如何回答我的問題的。 – oshirowanen

@asgoth：我在該代碼片段的下面留下了一個提示墊片:-) – nairvijays

我認爲：

您所定義的路徑中的小部件需要配置的地方
你的小部件沙盒（可以不依賴運行）
您的應用程序可以在不小部件運行

您可以在服務器上生成數組並將其填充到js（例如作爲內聯腳本），然後使用某種app.ready事件，如下所示：

<script> 
require(/*array from the server*/, function(){ 
    // publish application ready event 
}); 
</script>

來源

2013-01-07 10:48:41 tborychowski

關於require.js的困惑

回答

相關問題