Javascript在使用import 與export 區別及使用

一、import與export的用法

1、import的幾種用法

import defautName from 'modules.js';
import { export } from 'modules.js';
import { export as ex1 } from 'modules.js';
import { export1, export2 } from 'modules.js';
import { export1 as ex1, export2 as ex2 } from 'modules.js';
import defautName,{export} from 'modules.js';
import * as moduleName from 'modules.js';
import defautName, * as moduleName from 'modules.js';
import 'modules';

　解釋說明：

import 后面的from指定模塊文件的位置，可以是相對路徑，也可以是絕對路徑，.js后綴可以省略。

如果只是模塊名，不帶有路徑，那么必須有配置文件，告訴Javascript引擎模塊的位置。

上面的as關鍵字，相當於import進來的值的別名。

import * from 'xx' 將導入整個模塊的內容，而import defaultName 和 import { export1,export2 } 將導入export的某個值或對象。

最后一張方式import ‘module’ 將運行模塊中的全局代碼，而不導入任何值。

2、export的幾種用法

export { name1, name2,..., nameN };
export { variable1 as name1, variable2 as name2,..., nameN };
export let name1, name2,..., nameN;
export let let name1 =..., name2 =...,..., nameN;
export function FunctionName() { };
export class ClassName { }
export default expression;
export default function () { };
export default function name() { };
export { name1 as default };
export * from ...;
export { name1, name2 } from ...;

　　解釋說明

module.js

const ex1 = 'xxx';
const fun = function () { };
export { ex1, fun as demofun };
export let ex2 = 'demo';
export function multi(x, y) {
    return x * y;
}

　　

對應的import 寫法：import { ex1, demoFun, ex2, multiply } from 'module.js';

默認導出，export 命名導出需要export 名字和import名字嚴格一致。而export default命令，為模塊指定默認輸出，在import 的時候可以隨意命名名字。一個模塊只能有一個默認輸出，也就是說 export default 一個模塊只能用一次。 用法:

export default function add(x, y) { return x + y };
import anyName from 'a.js';
let name = 'b.js';
export default name;
import anyName from 'b.js';
export default class { }
import anyClass from 'c.js';
export default 1;
import value from 'd.js';

　　

 

二、區別：

import 和js的發展歷史息息相關，歷史上 js沒有模塊(module)體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。 在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，后者用於瀏覽器。ES6 在語言標准的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。也就是我們常見的 require 方法。 比如 `let { stat, exists, readFile } = require('fs');ES6 在語言標准的層面上，實現了模塊功能。ES6 模塊不是對象，而是通過export命令顯式指定輸出的代碼，再通過import命令輸入。

 

轉發鏈接