初入ES6-Moudule

Baaaan 發(fā)布于2019-08-21 16:53 / 3059人閱讀

摘要：所有代碼共享一個(gè)全局作用域，而模塊則是自動(dòng)運(yùn)行在嚴(yán)格模式下的代碼，其創(chuàng)建的代碼不會(huì)添加到全局作用域中，僅存在模塊的頂級(jí)作用域中，使用的話必須導(dǎo)出部分的代碼供訪問(wèn)，也可以從其他的模塊引入模塊標(biāo)識(shí)符以開(kāi)始表示從根目錄開(kāi)始以開(kāi)始從當(dāng)前目錄以開(kāi)始表

JS所有代碼共享一個(gè)全局作用域，而模塊則是自動(dòng)運(yùn)行在嚴(yán)格模式下的代碼，其創(chuàng)建的代碼不會(huì)添加到全局作用域中，僅存在模塊的頂級(jí)作用域中，使用的話必須導(dǎo)出部分的代碼供訪問(wèn)，也可以從其他的模塊引入
模塊標(biāo)識(shí)符
以/開(kāi)始表示從根目錄開(kāi)始
以./開(kāi)始從當(dāng)前目錄
以../開(kāi)始表示從父目錄開(kāi)始
其他URL格式
所有的模塊引進(jìn)必須用以上的方法，尤其不能直接引入，如：import "module.js";

1，export關(guān)鍵字導(dǎo)出，放在任何變量，函數(shù)或者類(lèi)聲明的前面
如果不實(shí)用default，匿名的函數(shù)是無(wú)法導(dǎo)出的

//module A
export var  a = 34;
export function fn(){};
export const b =  4;
export class .....

function inside(){}        //這個(gè)方法是私有的外部無(wú)法訪問(wèn)

function outside(){}        //也可以先定義一個(gè)變量，后面在導(dǎo)出


export outside;

default

//module.js
export default function(){}    //要輸出一個(gè)匿名函數(shù)的時(shí)候，使用default關(guān)鍵字

import name from "./module.js";    //注意此時(shí)名稱(chēng)沒(méi)有大括號(hào)，因?yàn)橹挥幸粋€(gè)變量
//此時(shí)可以直接把name作為匿名函數(shù)的名稱(chēng)直接使用，可以不需要知道模塊的方法名稱(chēng)，直接自己命名調(diào)用
//default只能使用一次，而且如果不是匿名函數(shù)，默認(rèn)是匿名函數(shù)
//module.js
var fn = function(){};
export defalut fn;        //即使是輸出函數(shù)名仍是匿名的，外部不可訪問(wèn)
import fn from "./module.js";

//module.js
var fn = function(){};
export  fn;        //沒(méi)有default關(guān)鍵字，外面可以訪問(wèn)
import { fn } from "./module.js";

//如果有default和其他的輸出的話用逗號(hào)隔開(kāi)
import name ,{ varable} from "./module.js";

2，import from 引入,引入的模塊變量類(lèi)似綁定，會(huì)自動(dòng)提升到最頂部

//導(dǎo)入單個(gè)綁定
import { vailble } from "./moudule.js";
//導(dǎo)入多個(gè)綁定
import { vara varb ..} from "./module.js";
//導(dǎo)入整個(gè)模塊,把所有導(dǎo)出的變量作為對(duì)象的屬性使用，也叫做命名空間導(dǎo)入
import * as example from "./moudule.js";


//同一個(gè)模塊JS只執(zhí)行一次，并保存在內(nèi)存中
import { a } from "./moudule.js";
import {b } from "./moudule.js";
import { c } from "./moudule.js";
//以上代碼只導(dǎo)出了第一個(gè)變量

ES6模塊的特性