ES6中import和CommonJS中require的區別

ES6中import和commonJS中require的區別：

1. import是ES6標准中的模塊化解決方案（因為瀏覽器支持情況不同，項目中本質是使用node中的babel將es6轉碼為es5再執行，import會被轉碼為require）。

   require是node中遵循CommonJS規范的模塊化解決方案。

2. ES6模塊是編譯時輸出接口，CommonJS模塊是運行時加載。

3. ES6模塊是動態引用，即導入和導出的值都指向同一個內存地址，所以導入的值會隨着導出值變化。

　CommonJs的模塊是對象。導出時是指拷貝，就算導出的值變化了，導入的值也不會變化，如果想要更新值就要重新導入。

3. import語句導入同一個模塊如果加載多次只執行一次，require語句導入次數和實際執行次數相同。

4. import必須用在當前模塊的頂層，如果在局部作用域內，會報錯，es6這樣的設計可以提高編譯器效率，但沒法實現運行時加載。

   require可以用在代碼的任何地方。

5. 前者是關鍵詞，后者不是

6. require支持動態引入，也就是require(${path}/xx.js)，import目前不支持，但是已有提案

7. ES6模塊之中，頂層的this關鍵字返回undefined，而不是指向window。也就是說，在模塊頂層使用this關鍵字，是無意義的。利用頂層的this等於undefined這個語法點，可以偵測當前代碼是否在 ES6 模塊之中。const isNotModuleScript = this !== undefined。require的模塊中this指向window,this === window.

 

import介紹：

靜態的import 語句用於導入由另一個模塊導出的綁定。無論是否聲明了 strict mode ，導入的模塊都運行在嚴格模式下。在瀏覽器中，import 語句只能在聲明了 type="module" 的 script 的標簽中使用。

import用法：

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

export 語句用於從模塊中導出函數、對象或原始值。

// 導出單個特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// 導出列表
export { name1, name2, …, nameN };

// 重命名導出
export { variable1 as name1, variable2 as name2, …, nameN };

// 解構導出並重命名
export const { name1, name2: bar } = o;

// 默認導出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// Aggregating modules
export * from …; // does not set the default export
export * as name1 from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

require介紹：

RequireJS是一個JavaScript文件和模塊加載器，可視為模塊管理工具。

require使用：

// index.html
     <script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js" data-main="js/main"></script>

// main.js
/**
 * RequireJS全局配置文件
 */
requirejs.config({
    //設置項目路徑，項目會以baseUrl作為相對路徑去查找模塊文件
    baseUrl:"./js",
    //預加載JS文件的配置項，默認可不用添加.js后綴
    paths:{
        //RequireJS默認假定所有的依賴資源都是JS腳本，因此無需再module ID上再加上js后綴。
        jquery:"https://cdn.bootcss.com/require.js/2.3.6/require.min.js",
        boostrap: "bootstrap"
    }
});

// 引用配置好的模塊
requirejs(['jquery', 'bootstrap'],function($, undefined){

});

// 引用自定義模塊
require(['js/test2.js'], function(math) {
         console.log(math);
       });

// test2.js 自定義模塊
define(function() {
    var add = (x, y) => {
      return x + y;
    };
    return {
      add: add
    }
  });
// 如果有依賴
define(['jquery'], function($) {return {}});
// 自定義命名
define('math/add', ['jquery'], function($) {return {add: XXX}});