[英]require.js modules not loading properly
我有我的bootstrap文件,它定義了require.js路徑,並加載了app和config模塊。
// Filename: bootstrap
// Require.js allows us to configure shortcut alias
// There usage will become more apparent futher along in the tutorial.
require.config({
paths: {
bfwd: 'com/bfwd',
plugins: 'jquery/plugins',
ui: 'jquery/ui',
jquery: 'jquery/jquery.min',
'jquery-ui': 'jquery/jquery-ui.min',
backbone: 'core/backbone.min',
underscore: 'core/underscore.min'
}
});
console.log('loading bootstrap');
require([
// Load our app module and pass it to our definition function
'app',
'config'
], function(App){
// The "app" dependency is passed in as "App"
// Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
console.log('initializing app');
App.initialize();
});
app.js像它應該加載,並且它的依賴項被加載。 它定義了回調函數,所有正確的依賴項都作為參數傳遞。 不會拋出任何錯誤。 但是,在bootstrap的回調中,App未定義! 沒有參數傳遞。 是什么導致這個? 這是我的app文件(為空間修改)
// Filename: app.js
define(
'app',
[
'jquery',
'underscore',
'backbone',
'jquery-ui',
'bfwd/core',
'plugins/jquery.VistaProgressBar-0.6'
],
function($, _, Backbone){
var initialize = function()
{
//initialize code here
}
return
{
initialize: initialize
};
}
);
據我所知,您應該只在您的app.js定義方法中刪除'app'字符串。
// Filename: app.js
define([
'jquery',
'underscore',
'backbone',
'jquery-ui',
'bfwd/core',
'plugins/jquery.VistaProgressBar-0.6'
], function($, _, Backbone){
...
);
好吧我遇到了同樣的問題,關鍵是你定義的jquery路徑別名。 事實證明,RequireJS對jquery有一些特殊處理。 如果你使用jquery模塊名稱,它會在那里做一些魔術。
根據你在jquery.min.js中的內容,它可能會導致一些問題,你的jquery插件也可能存在問題。 以下是RequireJS源代碼的相關代碼行:
if (fullName) {
//If module already defined for context, or already loaded,
//then leave. Also leave if jQuery is registering but it does
//not match the desired version number in the config.
if (fullName in defined || loaded[id] === true ||
(fullName === "jquery" && config.jQuery &&
config.jQuery !== callback().fn.jquery)) {
return;
}
//Set specified/loaded here for modules that are also loaded
//as part of a layer, where onScriptLoad is not fired
//for those cases. Do this after the inline define and
//dependency tracing is done.
specified[id] = true;
loaded[id] = true;
//If module is jQuery set up delaying its dom ready listeners.
if (fullName === "jquery" && callback) {
jQueryCheck(callback());
}
}
對我來說,我有一個設置,我有一個名為/libs/jquery/jquery.js的文件,它返回jquery對象(只是RequireJS的包裝器)。 我最終做的只是將路徑別名從jquery
更改為$jquery
。 這有助於避免不受歡迎的魔術行為。
在原始教程中,我讀到他們使用jQuery
也可以。
這是一個簡單的示例,可能有助於您入門:
我創建了一個非常簡單的模塊:
https://gist.github.com/c556b6c759b1a41dd99d
define([], function () {
function my_alert (msg) {
alert(msg);
}
return {
"alert": my_alert
};
});
並在這個小提琴中使用它,只有jQuery作為額外的依賴:
<script src="http://requirejs.org/docs/release/1.0.7/minified/require.js"></script>
<script type="text/javascript">
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min",
"app": "https://gist.github.com/raw/c556b6c759b1a41dd99d/20d0084c9e767835446b46072536103bd5aa8c6b/gistfile1.js"
},
waitSeconds: 40
});
</script>
<div id="message">hello</div>
<script type="text/javascript">
require( ["jquery", "app"],
function ($, app) {
alert($.fn.jquery + "\n" + $("#message").text());
app.alert("hello from app");
}
);
</script>
這就是我用requirejs和backbone做的方式:
首先,使用config定義main或bootstrap文件:
// bootstrap.js
require.config({
paths: {
text: 'lib/text',
jQuery: 'lib/jquery-1.7.2.min',
jqueryui: 'lib/jquery-ui-1.8.22.custom.min',
Underscore: 'lib/underscore-1.3.3',
Backbone: 'lib/backbone-0.9.2'
},
shim: {
'Underscore': {
exports: '_'
},
'jQuery': {
exports: 'jQuery'
},
'jqueryui': {
exports: 'jqueryui'
},
'Zepto': {
exports: '$'
},
'Backbone': {
deps: ['Underscore', 'Zepto'],
exports: 'Backbone'
}
});
define(function (require) {
'use strict';
var RootView = require('src/RootView');
new RootView();
});
然后,我使用此語法來加載我的腳本。 我發現通過var
聲明來定義我的依賴關系比使用數組符號更容易。
// rootview.js
define(function (require) {
'use strict';
var $ = require('Zepto'),
Backbone = require('Backbone'),
LoginView = require('./LoginView'),
ApplicationView = require('./ApplicationView'),
jQuery = require('jQuery').noConflict();
return Backbone.View.extend({
// append the view to the already created container
el: $('.application-container'),
initialize: function () {
/* .... */
},
render: function () {
/* .... */
}
});
});
希望能幫助到你!
這有點晚了,但我剛遇到這個問題。 我的解決方案可以在這里找到: https : //stackoverflow.com/questions/27644844/can-a-return-statement-be-broken-across-multiple-lines-in-javascript
我出於不同的原因發布了這個問題,問我為什么我的修復工作首先起作用。 Elclanrs提供了完美的答案。 長話短說,未定義可能是由於javascript的自動分號插入而出現: 自動分號插入和返回語句
如果您嘗試從下面更改花括號的位置直接在return語句之后,我認為您的問題將消失。
// Filename: app.js
define(
.
.
.
function($, _, Backbone){
var initialize = function()
{
//initialize code here
}
return {
initialize: initialize
};
}
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.