Javascript 对于由requirejs优化器组合的js文件,如何在运行时覆盖模型/视图文件?
情景: 所使用的框架是主干,并且需要。 我有一个main.js,它对util、model和view js有几个依赖关系,它们又是相互依赖的。还有循环依赖关系。 此main.js已使用requirejs优化器编译成单个文件 问题: 如何在运行时覆盖某些视图和模型? (我有一个main的编译版本,所以我不是说在编译时排除模型或视图的js) 在编译时,我不知道模型/视图是否会过度使用。因此,当我运行优化器时,将创建一个包含所有模型和视图的js文件。 我需要覆盖单个js文件中的特定类定义,这样我就不会修改该文件 是否有任何配置会告诉'require'从一个单独的文件而不是单个编译的js文件加载模型/视图?Javascript 对于由requirejs优化器组合的js文件,如何在运行时覆盖模型/视图文件?,javascript,backbone.js,requirejs,r.js,Javascript,Backbone.js,Requirejs,R.js,情景: 所使用的框架是主干,并且需要。 我有一个main.js,它对util、model和view js有几个依赖关系,它们又是相互依赖的。还有循环依赖关系。 此main.js已使用requirejs优化器编译成单个文件 问题: 如何在运行时覆盖某些视图和模型? (我有一个main的编译版本,所以我不是说在编译时排除模型或视图的js) 在编译时,我不知道模型/视图是否会过度使用。因此,当我运行优化器时,将创建一个包含所有模型和视图的js文件。 我需要覆盖单个js文件中的特定类定义,这样我就不会修
//models/ - folder
//mymodel.js - filename
define([
'jquery',
'underscore',
'backbone'
], function($, _, Backbone) {
var mymodel2 = Backbone.Collection.extend({
//some code
});
return mymodel2;
});
//mymodel2.js - filename
define([
'jquery',
'underscore',
'backbone',
'mymodel'
], function($, _, Backbone, mymodel) {
var mymodel2 = Backbone.Collection.extend({
//some code
});
return mymodel2;
});
//views/ - folder
//view1.js - filename
define([
'jquery',
'underscore',
'backbone',
'runtime/util/logmanager',
'runtime/util/logger'
], function($, _, Backbone, LogManager, Logger) {
var view1 = Backbone.View.extend({
_configure: function(options) {
//some code
},
initialize: function() {
//some code
},
endsWith: function(str, suffix) {
//some code
}
});
return view1;
});
//like this i have view2.js, view3.js... etc
//Similarly i have util folder with util1.js, util2.js... etc
//main.js
;(function(){
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function () { };
var paths = {
jquery: 'libs/jquery/jquery',
underscore: 'libs/underscore/underscore',
initializer: 'runtime/initializer/initializer',
backbone: 'libs/backbone/backbone',
json2: 'libs/json/json2',
text: 'libs/require/text',
jqueryform: 'libs/jqueryform/jqueryform',
jqueryui: 'libs/jqueryui/jquery-ui',
slimscroll: 'libs/slimscroll/slimScroll',
i18next: 'libs/i18next/i18next',
common: 'libs/commons/common',
utility1 : 'util/util1',
utility2 : 'util/util2',
.
.
model2 : 'model/mymodel2',
.
.
.
view2 : 'view/view1'
};
window.configData = window.configData || {};
window.configData.serverPath = location.protocol + "//" + window.location.host;
require.config({
paths: paths,
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'i18next': {
deps: ['jquery', 'json2'],
exports: 'i18n'
}
}
});
require(['router'],
function(Router) {
Router.initialize();
});
})();
或者有什么方法可以实现这一点,只需很少的改动?
//models/ - folder
//mymodel.js - filename
define([
'jquery',
'underscore',
'backbone'
], function($, _, Backbone) {
var mymodel2 = Backbone.Collection.extend({
//some code
});
return mymodel2;
});
//mymodel2.js - filename
define([
'jquery',
'underscore',
'backbone',
'mymodel'
], function($, _, Backbone, mymodel) {
var mymodel2 = Backbone.Collection.extend({
//some code
});
return mymodel2;
});
//views/ - folder
//view1.js - filename
define([
'jquery',
'underscore',
'backbone',
'runtime/util/logmanager',
'runtime/util/logger'
], function($, _, Backbone, LogManager, Logger) {
var view1 = Backbone.View.extend({
_configure: function(options) {
//some code
},
initialize: function() {
//some code
},
endsWith: function(str, suffix) {
//some code
}
});
return view1;
});
//like this i have view2.js, view3.js... etc
//Similarly i have util folder with util1.js, util2.js... etc
//main.js
;(function(){
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function () { };
var paths = {
jquery: 'libs/jquery/jquery',
underscore: 'libs/underscore/underscore',
initializer: 'runtime/initializer/initializer',
backbone: 'libs/backbone/backbone',
json2: 'libs/json/json2',
text: 'libs/require/text',
jqueryform: 'libs/jqueryform/jqueryform',
jqueryui: 'libs/jqueryui/jquery-ui',
slimscroll: 'libs/slimscroll/slimScroll',
i18next: 'libs/i18next/i18next',
common: 'libs/commons/common',
utility1 : 'util/util1',
utility2 : 'util/util2',
.
.
model2 : 'model/mymodel2',
.
.
.
view2 : 'view/view1'
};
window.configData = window.configData || {};
window.configData.serverPath = location.protocol + "//" + window.location.host;
require.config({
paths: paths,
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'i18next': {
deps: ['jquery', 'json2'],
exports: 'i18n'
}
}
});
require(['router'],
function(Router) {
Router.initialize();
});
})();
编译/组合文件的外观如下所示:
*! jQuery v1.7.1 jquery.com | jquery.org/license */
(//jquery-def file code)(window);
// Underscore.js 1.3.3
// (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc.
// Underscore is freely distributable under the MIT license.
// Portions of Underscore are inspired or borrowed from Prototype,
// Oliver Steele's Functional, and John Resig's Micro-Templating.
// For all details and documentation:
// http://documentcloud.github.com/underscore
(function() {
//uderscore code
}).call(this);
define("underscore", (function (global) {
return function () {
var ret, fn;
return ret || global._;
};
}(this)));
.
.
.
all lib definition
.
.
then depending on the dependencies models, views, utils, routers, definition
.
.
and finally main
;(function(){
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function () { };
var paths = {
jquery: 'libs/jquery/jquery-min',
underscore: 'libs/underscore/underscore',
initializer: 'runtime/initializer/initializer',
backbone: 'libs/backbone/backbone',
json2: 'libs/json/json2',
text: 'libs/require/text',
bootstrap: 'libs/bootstrap/bootstrap',
jqueryform: 'libs/jqueryform/jqueryform',
jqueryui: 'libs/jqueryui/jquery-ui',
slimscroll: 'libs/slimscroll/slimScroll',
i18next: 'libs/i18next/i18next',
common: 'libs/commons/common',
utility1 : 'util/util1',
utility2 : 'util/util2',
.
.
model2 : 'model/mymodel2',
.
.
.
view2 : 'view/view1'
};
window.configData = window.configData || {};
window.configData.serverPath = location.protocol + "//" + window.location.host;
require.config({
paths: paths,
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'i18next': {
deps: ['jquery', 'json2'],
exports: 'i18n'
}
}
});
require(['router'],
function(Router) {
Router.initialize();
});
})();
define("main", function(){});
如何在运行时覆盖某些视图和模型
在Javascript中,您可以随时重新分配变量。例如:
var x = 1; // the value of x is 1
x = 2; // the value of x is now 2
类似地,您可以在运行时覆盖主干模型和视图,如下所示:
var myModel = new Backbone.Model({x: 1});// create myModel
myModel = new Backbone.Model({x: 2});// now, myModel is a different model
myModel = "something else entirely";// now, myModel is a string
是否有任何配置会告诉“需要”加载
从单独的文件而不是单个编译的js中创建模型/视图
档案
要使用require加载Javascript文件,您可以随时调用它(即使在优化器运行之后),如下所示:
myModule = require('myJavascriptFile');
优化后的文件不是为被操纵而设计的。修改源代码,然后重新优化
另外,请注意:Require不会编译Javascript 您可以覆盖
require()
本身,让它在加载模块之前先在目录中查找模块
这可能不容易做到。请修改您的问题,使其以问题的形式出现。@Russ您需要更多信息吗?不确定“覆盖”的确切含义,但我给了它一个快照。我建议发布代码示例。实际上,在编译时,我不知道模型/视图是否会被过度使用。因此,当我运行优化器时,将创建一个包含所有模型和视图的js文件。因此,我需要覆盖单个js文件中的特定类定义,这样我就不需要修改该文件。js是一种解释语言,而不是编译语言。您的优化器不会编译它,它只会缩小它。“JS是一种解释语言,不是编译的”true。我使用requirejs进行依赖关系管理,所以当我说compiled时,我的意思是使用requirejs optimizer将model、view、util等文件夹中的所有js合并到一个文件中(缩小只是其中一个选项)不,我没有任何独占的“require('myJavascriptFile');”。。。此外,我正在寻找一个解决方案,它不需要我重新优化。我将提供优化的文件,因此,如果在运行时有人希望覆盖组件,而不涉及已编译的文件。。他应该能够做到这一点,为什么不提供未优化的文件,然后让他们在编辑后对其进行优化?我正在探索一种无需重新优化选项即可实现目标的方法。您建议的方法始终是备用选项。