jQuery Datatables ライブラリとそのプラグインのいくつかをロードする jQuery / Require.js / Backbone プロジェクトがあります。以下の構成は問題なく動作しますが、ちょっと粗雑に見えます。
これらすべての Datatables 依存プラグインをロードするよりエレガントな方法はありますか?
特定のライブラリがロードされると、子プラグインをロードする「deps」shim プロパティの逆があればクールです。
また、以下の構成では、すべての外部依存関係を App スコープにロードしています。これは、アプリ内のすべてのバックボーン ビューで文字通り使用されており、すべてのモジュールでそれらを定義/含める必要がないためです。
すべてのビューに外部ライブラリを含めるのではなく、App スコープにすべての外部ライブラリをロードするのはばかげていますか?
ここでのベストプラクティスのようなガイダンスをいただければ幸いです。このサイトで関連するスレッドをたくさん読みましたが、このような多くの依存関係をロードしている例を見つけることができませんでした。
require.config({
baseUrl: 'js/com/mycompany/',
paths: {
jquery: '/js/lib/jquery',
underscore: '/js/lib/underscore/underscore',
backbone: '/js/lib/backbone/backbone',
text: '/js/lib/require/text',
jqueryui: '/js/lib/ui/jquery-ui-1.10.0.custom.min',
json: '/js/lib/json/jquery.json-2.3.min',
datatables: '/js/lib/datatables/js/jquery.dataTables.min',
datatablesSelectable: '/js/lib/datatables/js/datatables.Selectable',
datatablesToggle: '/js/lib/datatables/js/jquery.groupToggle',
datatablesResize: '/js/lib/datatables/js/ColReorderWithResize',
datatablesTableTools: '/js/lib/datatables/tabletools/js/TableTools.min',
toaster: '/js/lib/toaster/javascript/jquery.toastmessage',
cookie: '/js/lib/cookie/jquery.cookie',
validation: '/js/lib/validation/jquery.validate',
validationAdditional: '/js/lib/validation/additional-methods',
alerts: '/js/lib/alerts/jquery.alerts',
loadmask: '/js/lib/loadmask/jquery.loadmask.min',
qtip: '/js/lib/qtip/jquery.qtip.min',
dropdown: '/js/lib/dropdown/jquery.dropdown',
extensions: '/js/com/mycompany/common/extensions',
app: 'app'
},
shim: {
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
jqueryui: { deps: ["jquery"] },
datatables: { deps: ["jquery"] },
datatablesSelectable: { deps: ["datatables"] },
datatablesToggle: { deps: ["datatables"] },
datatablesResize: { deps: ["datatables"] },
datatablesTableTools: { deps: ["datatables"] },
toaster: { deps: ["jquery"] },
cookie: { deps: ["jquery"] },
validation: { deps: ["jquery"] },
validationAdditional: { deps: ["validation"] },
alerts: { deps: ["jquery"] },
loadmask: { deps: ["jquery"] },
qtip: { deps: ["jquery"] },
dropdown: { deps: ["jquery"] },
json: { deps: ["jquery"] },
extensions: { deps: ["jquery", "datatables"] }
}
});
require([
'app',
'extensions',
'backbone',
'jqueryui',
'datatables',
'datatablesSelectable',
'datatablesToggle',
'datatablesResize',
'datatablesTableTools',
'toaster',
'validation',
'validationAdditional',
'alerts',
'loadmask',
'qtip',
'json'
], function(
App,
extensions,
// including all these here because they are used by literally
// every view in the app. seems kinda gross
Backbone,
jqueryui,
datatables,
datatablesSelectable,
datatablesToggle,
datatablesResize,
datatablesTableTools,
toaster,
validation,
validationAdditional,
alerts,
loadmask,
qtip,
json
){
App.initialize();
});
Web サーバーのルート "/" コンテキスト (すべての一般的な外部 Javascript ライブラリがある場所) にベース アプリがあるため、パス構成は少し奇妙に見えるかもしれません。このアプリは、カスタム スクリプトの独自のローカル js ディレクトリを持つサブコンテキスト ("/myapp" など) に存在します。
ご意見ありがとうございます。