About
requireJSを今更導入しました
requireJSどころかJavaScript初心者なので
指摘あればお願いします
階層ネームスペース 例えば hoge.moge.test()
を作りたいが
require(['hoge.moge' ], function( hoge.moge ) {
と記述すると、 関数の引数に ドットは当然使えず、文法エラーを吐きます
ので、その対策に 少し時間がかかったのでメモ
とても単純なので手短に 答えだけを
hoge.moge.fuga.test()
index.html
<html>
<head>
<title>require test</title>
<script src="config/require_config.js"></script>
<script data-main="js/start.js" src="js/require.js">
</head>
<body>
working!
</body>
</html>
config/require_config.js
var require = {
paths: {
'hoge': '../js/hoge'
, 'hoge.moge': '../js/hoge_moge'
, 'hoge.moge.fuga': '../js/hoge_moge_fuga'
}
};
js/start.js
// functionの引数に hoge.moge 等のドット付きの変数名は使えないので、親の hogeを使いアクセスする!
// 実際には hoge.moge.fugaのみの依存関係だが、 hogeを使ってアクセスするため hogeも依存関係に入れる
require(['hoge', 'hoge.moge.fuga'], function( hoge ) {
hoge.test();
hoge.moge.test();
hoge.moge.fuga.test();
});
js/hoge.js
(function(factory){
// CommonJS
if (typeof exports === "object") {
module.exports = factory();
// RequireJS
} else if (typeof define === "function" && define.amd) {
define(factory);
// <script>
} else {
hoge = factory();
}
}(function(){
// 名前空間のみでも return {} で空を返そう!
return {
test: ( function (){ console.log("hoge");})
}
}));
js/hoge_moge.js
(function(factory){
// CommonJS
if (typeof exports === "object") {
// commonJSはテストしていないので 参考までに・・
module.exports = factory(require('hoge'));
// RequireJS
} else if (typeof define === "function" && define.amd) {
// hogeに依存する
define( ['hoge'], factory);
// <script>
} else {
// hoge.moge = ... と名前空間を上書きしない
factory(hoge);
}
}(function(hoge){
// hogeを使ってアクセスする。 もちろん hoge["moge"]でも良い
hoge.moge = function () {
return{
test: (function(){ console.log("moge");})
}
}()} )) ;
hoge_moge_fuga.js
(function(factory){
// CommonJS
if (typeof exports === "object") {
// CommonJSはテストしてないので参考まで・・
module.exports = factory(require('hoge'), require('hoge.moge'));
// RequireJS
} else if (typeof define === "function" && define.amd) {
define( ['hoge', 'hoge.moge'], factory );
// <script>
} else {
factory(hoge );
}
}(function(hoge){
// hogeからアクセスする。 hoge.moge からアクセスする方法わからなかった。。
hoge.moge.fuga = function () {
return{
test: (function(){ console.log("fuga");})
}
}()} )) ;
まとめ
function引数に ドット付きの変数名は不可能なので
一番親の名前空間を利用してアクセスする必要がある
名前空間は最低でも空のブランケットをリターンする