如何使用RequireJS構造多個頁面

如何使用RequireJS構建多個頁面？就像下面的例子一樣，聲明app.js中的每個類都是正確的？是否每個html文件都要聲明<script data-main="src/main" src="src/require.js"></script>？如何使用RequireJS構造多個頁面

我想避免的是當用戶到達站點的第一頁時加載所有腳本。

main.js定義所有的外部依賴：

require(
    { 
     baseUrl:'/src' 
    }, 
    [ 
     "require", 
     "order!http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", 
     "order!http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js", 
     "order!http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js", 
     "order!http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js" 
    ], 
    function (require) { 
     require(["app"], function (app) { 
      app.start(); 
     }); 
    } 
);

app.js文件定義的每個組件：

define([ "product/ProductSearchView", 
     "product/ProductCollection" 
     ], function (ProductSearchView, 
         ProductCollection) { 
     return { 
      start: function() { 
        var products = new ProductCollection(); 
        var searchView = new ProductSearchView({ collection: products }); 
        products.fetch(); 
        return {}; 
      } 
     } 
});

來源

2011-05-31 yves amsellem

您可以將現有的模塊中需要的文件。所以說，當有人點擊一個鏈接，你可以觸發執行以下功能：

// If you have a require in your other module 
// The other module will execute its own logic 
require(["module/one"], function(One) { 
    $("a").click(function() { 
     require(["new/module"]); 
    }); 
}); 

// If you have a define in your other module 
// You will need to add the variable to the require 
// so you can access its methods and properties 
require(["module/one"], function(One) { 
    $("a").click(function() { 
     require(["new/module"], function(NewModule) { 
      NewModule.doSomething(); 
     }); 
    }); 
});

來源

2011-06-08 16:42:01 dbme

是否應該命名'new/module'？如果不是，如何使用它的'clean（）'方法？ – 2011-06-09 08:34:41

啊，'require'必須在另一個'require'中，或者它可以出現在'define'集合中嗎？ – 2011-06-09 08:35:40

如果需要，可以將其命名，在這種情況下，您希望在新/模塊中創建一個定義。我目前正在使用它，因爲它只會運行自己的邏輯。 – dbme 2011-06-10 17:37:31

這是這一切是如何工作的一個完整的例子; require.js和order.js與應用程序的JS文件位於同一目錄中。

<html> 
    <head> 
    <script data-main="js/test" src="js/require.js"></script> 
    </head> 
    <body> 
    <button>Clickme</button> 
    </body> 
</html>

test.js（在JS文件夾）

require(
    { 
    baseUrl:'/js' 
    }, 
    [ 
    "order!//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", 
    "order!//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" 
    ], 
    function() { 
    require(["app"], function (app) { 
     app.start(); 
    }); 
    } 
);

app.js（在JS文件夾）與Employee.js的點播負載：

define([], function() { 
    return { 
    start: function() { 
     $('button').button(); 
     $('button').click(function() { 
     require(['Employee'], function(Employee) { 
      var john = new Employee('John', 'Smith'); 
      console.log(john); 
      john.wep(); 
     }); 
     }); 

     return {}; 
    } 
    } 
});

僱員。 js（在js文件夾中）：

define('Employee', function() { 
    return function Employee(first, last) { 
    this.first = first; 
    this.last = last; 
    this.wep = function() { 
     console.log('wee'); 
    } 
    }; 
});

來源

2011-06-15 15:55:47

如何使用RequireJS構造多個頁面

回答

相關問題