LoginSignup
0
0

More than 5 years have passed since last update.

【requireJS】階層ネームスペースを UMD型式で【commonJS】

Posted at

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引数に ドット付きの変数名は不可能なので
一番親の名前空間を利用してアクセスする必要がある
名前空間は最低でも空のブランケットをリターンする

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0