フロントエンドモジュール化開発の4つの方法について簡単に述べる.

2064 ワード

いくつかの雑記.

最近ではフロントエンドのモジュール化開発について知っていますが、次は関連するメモ/心得をいくつかの文章に分けて記録します.
一、なぜモジュール化して開発するのか

jsが多ければ多いほど、依存性が強くなり、柔軟性が小さくなる(導入順序など);

人余りが開発し、命名衝突などの問題が発生しやすい.

... ...

二、解決方案:

匿名閉鎖;

は命名衝突を解決した.

コードの多重性が弱くなる.

モジュールを出口として使用する.

// 3.        
var myModule = (function(){
    // 1.             ；
    var obj = {};
    var sum = function(a,b){
        return a+b;
    }
    var flag = true;
    
    obj.sum = sum;
    obj.flag = flag;
    // 2.    ；
    return obj;
})();

他のjsを導入することで、自分のモジュールに属する属性と方法を直接使用することができる:

if(myModule.flag){
    console.log(myModule.sum(1,0));    
}

CommonJS

コア:インポート、エクスポート

エクスポート例:

module.exports={
    flag: true,
     sum: function(a,b){
          return a+b;
    }
}

導入例:

// 1.    
var someModule = require('./config.js');

if(someModule.flag){
    someModule.sum(1,2);
}

// 2.    
var {flag,sum} = require('./config.js');

if(flag){
    sum(1,2);
}

ES 6のモジュール化:export/import

エクスポート例:

var flag = true;
var sum = function(a,b){
    return a+b;
}

//     1:    export default
// export default         ，         import from './config.js',          ，        ；
export {flag,sum}

//       ，         ，        
export default function(){
    console.log("export default function")
}


//     2:
export var name = "wayne";
export function mul(a,b){
    return a*b;
}
export class Person{
    run(){
        console.log("run away!")
    }
}

導入例:

//           
import {flag,sum, Person} from './config.js';

if(flag){
    console.log(sum(1,2))
}

var p = new Person;
p.run()


//            
import * as       from './config.js'

その他のメモ:

END;

sedを使ってコメント行を削除する

ShellScript: テキストファイル末尾の改行を削除する．