iife(直ちに関数を実行)からes 6までのmodule

1308 ワード

一、es 6を使用する前に(他のモジュールでプラグインを管理していない)
a.jsファイルは以下の通りです.
//   a
var a = (function(){  

  //       
  var _f = function () {    
    console.log('_f');  
  };  

  //     1  
  var f1 = function () {    
    console.log('f1');  
  };  

  //     2  
  var f2 = function () {    
    console.log('f2');    
    _f();  
  };  

  return {
    f1: f1, 
    f2: f2
  };
}());

b.jsファイルがモジュールaを使用する必要がある場合:
//   b
var b = (function(){  

  //     1  
  var f1 = function () {    

    //     a
    a.f1();  
  };  

  return {
    f1: f1
  };
}()); 

二、es 6を使用した後
a.jsは:
//   a
//       
let _f = function () {    
  console.log('_f');  
};  

//     1  
let f1 = function () {    
  console.log('f1');  
};  

//     2  
let f2 = function () {    
  console.log('f2');    
  _f();  
};

export default {f1, f2};

b.jsファイルがモジュールaを使用する必要がある場合:

//     a,alias     
import alias from './a';

//     1  
let f1 = function () {
  
  //     a
  alias.f1();
};

export default {f1};

まとめ
es 6を使用すると,コードが簡潔になる一方で,最も重要なのはグローバルネーミング空間の汚染を除去し,モジュール間の依存関係が明確になることである.まだブラウザがes 6をよくサポートしていませんが、babelを使ってes 6をes 5に変えることができます.今からes 6を使って開発しましょう.