一般的に使用されるJavaScriptライブラリとフロントエンドのモジュール式の実践的なスキル

モジュラーコンセプト
AMDは、昇格プロセスで定義されたrequirejs標準化されたモジュール式の出力です。
フロント依存非同期ロードモジュールは、事前に実行
定義モジュール（[「必要」、「FOO」]、関数（）{}リターン）を定義する定義、
要求負荷モジュール（フロント依存性）は、（[「foo」を必要とする、「バー「]、関数（FOO、バー）{}）;
CMDプロモーションプロセスで定義された出力SeaJS標準化されたモジュラーです。
定義された輸出を定義する（関数（必要、輸出、定義由来モジュール）{}）;
現在のモジュールのモジュール上のオブジェクトの一部が格納されています。
必要（./ A）、require.async非同期導入直接導入
最寄り遅延実行に依存同期ロード、
ある類似CommonjsModule / 2.0仕様
AMDモジュラーコード

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script data-main="js/main.js" src="./js/require.js"></script>
</head>
<body>
    <script>

    </script>
</body>
</html>

//main.js
define(['require','main'],function(require){
    require(['index','test'],function(index,test){
        console.log(index());
        console.log(test());
    })
})

//index.js
define(['require','index'],function(require){
    var index = function(){
        console.log('test index');
    }
    return index;
 })

//test.js
define(['require','index'],function(require){
   var init = function(){
       console.log('test init');
   }
   return init;
})

メソッド呼び出し

//index.js
define(['require','index'],function(require){
    var index = {};
    var index = {
        init:function(){
            console.log('test init');
        }
    }
    return index;
 })

//main.js
define(['require','main'],function(require){
    require(['index','test'],function(index,test){
        console.log(index.init());
        console.log(test.init());
    })
})

//test.js
define(['require','index'],function(require){
    var index = {};

   var index = {
       init:function(){
           console.log('test init');
       }
   }
   return index;
})

効果

seajsアプリケーション

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/sea.js"></script>
</head>
<body>
    <script>
        // seajs 的简单配置
seajs.config({
  base: "./js/",
  alias: {
    "jquery": "jquery.js"
  }
})

// 加载入口模块
seajs.use("main")    
    </script>
</body>
</html>

//index.js
define(function(require,exports,module){
    // 透过exports对外提供接口
    // exports.doSomething = function(){
    //     console.log('my ok ');
    // }
    // exports.doSomething2 = function(){
    //     console.log('my ok2 ');
    // }
    var a = {};
    a.doSomething = function(){
        console.log('my ok ');
    }
    a.doSomething2 = function(){
        console.log('my ok2 ');
    }
    // console.log(module);
    module.exports = a;
    
});

//main.js
define(function(require,exports,module){
    require('jquery');
    console.log('..aaa');
    var index =require.async('index',function(index){
        console.log(index);
    });
    
})

モジュラービデオのJavaScriptライブラリとユーティリティ一般的に使用される技術を参照するには、フロントからこの記事

一般的に使用されるJavaScriptライブラリとフロントエンドのモジュール式の実践的なスキル

おすすめ