RequireJS如何處理多個頁面和部分視圖？

我在查看RequireJS但我對某些事情不確定。RequireJS如何處理多個頁面和部分視圖？

我瞭解如何使用main.js加載所有依賴關係。但是，我需要添加任何邏輯來處理這些依賴關係main.js？

對我來說，main.js看起來像一個document.ready狀態，你在文檔加載時輸入邏輯，對吧？

而對於其他的頁面和局部視圖，我需要創建多個main.js或者我可以只引用加載函數依賴從一個<script>例如看法？

來源

2012-05-30 Johan Alkstål

更新 - 我添加使用RequireJS模塊化HTML組件的例子。構建附帶的工具例如 - https://github.com/simonsmith/modular-html-requirejs

我也寫了這一篇博客文章 - http://simonsmith.io/modular-html-components-with-requirejs/

只是用main.js一切是probably more suited to a single page application的方法。

我已經處理這種情況的方法是僅包括在main.js文件常見的站點範圍內的JS：

在每一頁：

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

main.js

require.config({ 
// config options 
}); 

require(['jquery', 'common/ajaxLoader', 'common/someOtherModule'], function($, ajax, otherModule) { 
    // Modules that do stuff on every page are instantiated here 
});

page1.html個

<script> 
    require(['scripts/page1']); 
</script>

page1.js

require(['jquery', 'page1Module'], function($, module){ 
    // page1 specific stuff here 
});

上面的例子只是一對夫婦的方法來處理它的一個。注意the difference between loading a plain JavaScript file and a module。

的經驗法則我遵循的是讓所有的可重複使用的模塊（或類，如果它可以更容易概念化）用自己的依賴等一define內，然後用require抓住這些模塊，用自己的方法或與之互動他們以某種方式。

使用此模式幾乎肯定需要使用domReady模塊that is a separate plugin for RequireJS。例如，使用此instead of a ready function in jQuery，因爲它允許模塊在DOM準備就緒之前開始下載，這樣可以減少等待代碼執行的時間。

編輯你不妨see another example of multi-page application在RequireJS回購

來源

2012-05-30 13:10:02

感謝寫得很好的答案。我現在更好地理解如何使用RequireJS。 –

上述方法在頁面上完美工作，但當頁面通過ajax調用加載到一個div，模塊不加載..任何幫助？ –

這種方法看起來並不完全可靠，因爲內聯腳本標記中的代碼可能在main.js中的代碼之前執行，從而導致偶然的失敗。看到[這個答案]（http://stackoverflow.com/a/14345709）到一個相關的問題。 –

我最近通過與ASP.NET MVC應用程序自動構建優化設置RequrieJS的鍛鍊了。有很多有用的博客文章，如Simon's，這些文章都是很有參考價值的。從ASP.NET的角度來看，我在配置用於多頁ASP.NET應用程序的RequireJS優化器方面找到的最有用的方法之一是Making RequireJS play nice with ASP.NET MVC。

使用已經在那裏的偉大的信息，我已經把我自己的ASP.NET MVC RequireJS example on GitHub。包含的大部分內容與已經存在的示例相似，但是爲了解決部分視圖問題以及多頁面需求依賴關係，我採取了稍微不同的方法。

_Layout.cshtml

從現有例中的最顯着的差別是一個自定義RequireViewPage暴露的方法來傳遞配置數據RequrieJS以及參考頁特定需要的依賴關係的創建。

所以你_Layout.cshtml看起來很像你有什麼期望：

<head> 
    ... 
    @RenderModuleConfig() 
    <script type="text/javascript" src="@Url.Script("vendor/require.js")" data-main="main"></script> 
</head> 
<body> 
    ...

查看&局部模板

要連接視圖（在我的情況淘汰賽視圖模型）， an additional script fragment已被添加到_Layout.cshtml的底部如下

... 
    @RenderSection("scripts", required: false) 
    <script type="text/javascript">require(['main'], function() { require(['lib/knockout/knockout.require']); });</script> 
</body>

這將ensu對於任何視圖依賴關係，主模塊已被加載（假設主要依賴關係已在main.js中定義，然後允許查看特定依賴關係通過數據屬性進行連接。

<div data-require="@MainModule"> ... </div> 
<div data-require="@Module("address")"> ... </div> 
<div data-require="view\home\index\model"> ... </div>

的設計和選擇的一個完整的交代，看到README on GitHub

來源

2014-02-19 14:25:03

RequireJS如何處理多個頁面和部分視圖？

回答

相關問題