Как переопределить файл модели / вида во время выполнения для файла js, объединенного с помощью оптимизатора requirejs?
Сценарий: используемая структура является магистральной и требует. У меня есть main.js, у которого есть несколько зависимостей от util, model и view js, которые снова взаимозависимы. Существуют также циклические зависимости. Этот main.js был скомпилирован в один файл с использованием оптимизатора requirejs.
Проблема:как переопределить определенные виды и модели во время выполнения?(У меня есть одна скомпилированная версия main, поэтому я не говорю об исключении js для моделей или представлений во время компиляции).
Во время компиляции я не знаю, будет ли модель / представление переопределена. Поэтому, когда я запускаю оптимизатор, создается один JS-файл со всеми моделями и видами. Мне нужно переопределить определенное определение класса в этом единственном js-файле, чтобы я не модифицировал этот файл.
Есть ли какая-либо конфигурация, которая скажет 'require', чтобы загрузить модель / представление из отдельного файла, а не из одного скомпилированного файла 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();
});
})();
Скомпилированный / объединенный файл будет выглядеть примерно так:
*! 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(){});
3 ответа
Есть ли какая-либо конфигурация, которая скажет 'require', чтобы загрузить модель / представление из отдельного файла, а не из одного скомпилированного файла js?
Чтобы загрузить файл Javascript с помощью require, вы можете вызвать его в любое время (даже после запуска оптимизатора), например так:
myModule = require('myJavascriptFile');
Оптимизированный файл не предназначен для манипулирования. Измените свой источник, затем повторно оптимизируйте.
Также обратите внимание: Require не компилирует ваш Javascript.
Вы могли бы переопределить require()
сам и заставьте его искать модуль в каталоге, прежде чем загружать его, как обычно.
Это, вероятно, не будет легко сделать.
Как переопределить определенные виды и модели во время выполнения?
В 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