Backbone.js & require.js: как преобразовать свои модели, представления и коллекции в модули reft.js?
-
28-10-2019 - |
Вопрос
Я работаю над приложением javaScript с Backbone.js, который сказал, что для простоты разработки я структурирую свои файлы таким образом
app
|
+ views
| L movieRow.js
| L movieDetail.js
|
+ models
| L movie.js
| L tvshow.js
|
+ collections
| L movies.js
| L tvshows.js
|
+ templates
| L movieList.tpl
| L movieDetail.tpl
| L applicationUI.tpl
|
L application.js
Теперь, это много файлов JavaScript для сервера для пользователя, я вижу немного шума о labjs или require.js и решил проверить с ним. Но я понятия не имею, как я бы переписывал все свои модели или взгляды на эти модули.
Любая помощь в правильном направлении была бы неплохо.
Решение
Ключом к пониманию требуется (по крайней мере, в моем маленьком мозге) является помнить, что то, что вы возвращаете из функции, будет доступно для других модулей, которые втягиваются (или требуют) этого модуля. Таким образом, в приведенном ниже коде мне нужны jQuery и Backbone (JQuery-это особый случай, обработанный «Tress-Jquery»). Когда эти 2 будут доступны, это позвонит моей функции, и эта функция вернет конструктор представления, который я создал.
define([
'jquery'
'libraries/backbone'
], function ($) {
var MovieRow = Backbone.View.extend({
render: function () {
return this;
}
});
return MovieRow;
});
Тогда вы можете написать что -то подобное на свою страницу. Обратите внимание, что jQuery является первым необходимым предметом в массиве. Это соответствует первому параметру в моей функции. Вид 2 -й, а модель - 3 -я. Затем я могу использовать возвращаемое значение из моего «определить» кода выше, который является конструктором.
require({
baseUrl: '/'
},[
'jquery',
'app/views/movieRow',
'app/models/movie',
'libraries/backbone'
],
function ($, MovieRowView, Movie) {
var view = new MovieRowView({model : new Movie());
$('body').append(view.render().el);
});
Надеюсь, это полезно ... мы любили магистраль и требуем :)
Другие советы
У меня не хватало места в комментариях, и я хотел включить код, поэтому я даю второй ответ:
То, что @Timdunham опубликовал, по большей части довольно хорошо, хотя у меня есть несколько дополнительных данных, в которых кто -то может приобрести для дальнейшего понимания.
В коде:
define([
'jquery'
'libraries/backbone'
]
Я считаю, что подчеркивание отсутствует. Во -первых, магистраль нуждается в подчеркивании, чтобы работать, и без него я думаю, что это сломается. Во -вторых, если вы не используете вилку Amdjs подчеркивания и магистрали, они не поддерживают AMD. Подчеркивается удаленная поддержка AMD с V1.3.0. Если мы предположим, что мы используем не подчеркивание и магистраль, они, вероятно, не принадлежат к define[]
и должен быть require[]
вместо.
Таким образом, правильное определение будет выглядеть примерно так, если вы правильно используете версии AMDJS:
define([
'jquery',
'underscore',
'Backbone'
], function($, _, Backbone) { ... });
Это предполагает, что я создал пути в конфигурации «Требование:
require.config({
paths : {
jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
underscore : '../../libs/js/underscore/underscore.min',
Backbone : '../../libs/js/backbone/backbone',
}
});
Я видел некоторые реализации, которые не используют версии AMDJS, и это то, что, поскольку они не асинхронные модули, вы должны убедиться, что они загружены в правильном порядке.
Я считаю, что это не гарантирует правильный порядок загрузки зависимостей:
require({
baseUrl: '/'
},[
'jquery',
'app/views/movieRow',
'app/models/movie',
'libraries/backbone'
],
Поскольку что -то указано как зависимость, не означает, что оно будет загружаться при необходимости. С асинхронными модулями это не проблема, но в этом примере я не видел его упомянутого, поэтому мы предполагаем, что они не AMD. Этот модуль зависит от jQuery, Movierow, Movie и Mancebone. Но если магистраль пытается загрузить до jQuery ... (x_x) Почему мир зачем?
Вот почему я считаю, что требуется. JS имеет плагин под названием Order! на помощь. С заказом! Вы можете настроить свои зависимости, и он загружает сценарии ... ну ... заказ. Что-то вроде этого:
require({
baseUrl: '/'
},[
'order!jquery',
'app/views/movieRow',
'app/models/movie',
'order!libraries/underscore', // <- Don't forget me!
'order!libraries/backbone'
]
Я считаю, что с этим ваш модуль оценит и гарантирует, что JQUERY сначала загружен, затем подчеркнут, а затем магистраль. Нет гарантий для Movierow или фильма, хотя в этом случае, кого это волнует? :-)
Я использую вилки Amdjs-Backbone и Amdjs-underscore для своего проекта, поэтому я обычно помещаю их в define[]
И это работает без зацепления. Требование действительно потрясающе и значительно вычистила мой код. Куда бы я ни пошел, jrburke, писатель «Восстания», появляется повсюду, и он всегда очень полезен с его комментариями ко всему, что касается require.js. И я имею в виду все. Моя теория заключается в том, что он телепатически связан с требованием, и в любое время, когда в Интернете возникает новый экземпляр requirejs, он имеет немедленный доступ к этим знаниям. Бьюсь об заклад, если это обсуждение темы продолжается, он также появится здесь, чтобы поздороваться.
Мой отказ от ответственности в том, что я также новичок в том, чтобы потребоваться, и я могу неправильно понимать вещи. Но из того, что я знаю, я подумал, что эти дополнительные указатели и информация могут помочь людям собрать лучший код, используя потребности.
ИСПОЛЬЗОВАННАЯ ЛИТЕРАТУРА: