摘要:學(xué)習(xí)模塊不是對(duì)象,而是通過命令顯式指定輸出的代碼,輸入時(shí)也采用靜態(tài)命令的形式。的模塊自動(dòng)采用嚴(yán)格模式命令用于規(guī)定模塊的對(duì)外接口,命令用于輸入其他模塊提供的功能。該文件內(nèi)部的所有變量,外部無法獲取。
es6 學(xué)習(xí)-module_v1.0
ES6模塊不是對(duì)象,而是通過export命令顯式指定輸出的代碼,輸入時(shí)也采用靜態(tài)命令的形式。
ES6的模塊自動(dòng)采用嚴(yán)格模式
export命令用于規(guī)定模塊的對(duì)外接口,import命令用于輸入其他模塊提供的功能。
關(guān)于export//直接導(dǎo)出 export var year = 1958; //導(dǎo)出變量 export function multiply(x, y) { //導(dǎo)出函數(shù) return x * y; }; //導(dǎo)出一組變量(屬性,方法) var firstName = "Michael"; var lastName = "Jackson"; var year = 1958; export {firstName, lastName, year}; //導(dǎo)出并且重命名 function v1() { ... } function v2() { ... } //即使重命名了,原來的也可以用,相當(dāng)于加了別名 export { v1 as streamV1, //重命名了 v2 as streamV2, v2 as streamLatestVersion //重命名兩次 }; //混合導(dǎo)出,既定義了默認(rèn)的,也定義了不默認(rèn)的 export default class Client{ } export const foo = "bar"; //使用的時(shí)候可以分別導(dǎo)入 import Client,{foo} from "module"; //暴露一個(gè)模塊的所有接口 export * from "module"; //連鎖導(dǎo)出 //a.js,導(dǎo)出一個(gè)函數(shù) export function foo(){} //b.js,b模塊導(dǎo)出所有內(nèi)容,而這些內(nèi)容來自a模塊 export * from "a"; //app.js,那么在使用的時(shí)候 import { foo } from "b"; //暴露一個(gè)模塊的部分接口 export { test } from "module"; //暴露一個(gè)模塊的默認(rèn)接口 export { default } from "module";
一個(gè)模塊就是一個(gè)獨(dú)立的文件。該文件內(nèi)部的所有變量,外部無法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量,就必須使用 export 關(guān)鍵字輸出該變量。
export命令可以出現(xiàn)在模塊的任何位置,只要處于模塊頂層就可以。如果處于塊級(jí)作用域內(nèi),就會(huì)報(bào)錯(cuò)
一個(gè)模塊只能有一個(gè)默認(rèn)輸出,因此export default命令只能使用一次
export * 命令會(huì)忽略模塊的default方法
關(guān)于import//直接導(dǎo)入,并且輸入到不同的變量里面,這些變量名需要跟導(dǎo)入源一致 import {firstName, lastName, year} from "./profile"; //導(dǎo)入之后就可以直接使用了 function setName(element) { element.textContent = firstName + " " + lastName; } //直接導(dǎo)入,不過沒有寫路徑 import {myMethod} from "util"; //直接導(dǎo)入并重命名,主要是為了方便 import { lastName as surname } from "./profile"; //不引入接口,僅運(yùn)行模塊代碼 import "XXXmodule" //因?yàn)閐efault是關(guān)鍵字,導(dǎo)入的時(shí)候不能直接使用,需要改一下名字,用as改 import { default as xxx } from "modules"; //相當(dāng)于,xxx是一個(gè)新的名字,能夠代替導(dǎo)入模塊 import xxx from "module" //以lodash模塊舉例,他的default是_,非default有一個(gè)each接口,可以同時(shí)導(dǎo)入 import _, { each } from "lodash";
import命令具有提升效果,會(huì)提升到整個(gè)模塊的頭部
import后面的from指定模塊文件的位置,可以是相對(duì)路徑,也可以是絕對(duì)路徑,.js路徑可以省略。如果只是模塊名,不帶有路徑,那么必須有配置文件,告訴 JavaScript 引擎該模塊的位置。
import是靜態(tài)執(zhí)行,也是編譯前執(zhí)行的,所以不能使用表達(dá)式和變量,這些只有在運(yùn)行時(shí)才能得到結(jié)果的語(yǔ)法結(jié)構(gòu)。
多次執(zhí)行同一個(gè)import的話,只會(huì)執(zhí)行一次
import 不能導(dǎo)入*,要用as改名
復(fù)合寫法如果在一個(gè)模塊之中,先輸入后輸出同一個(gè)模塊,import語(yǔ)句可以與export語(yǔ)句寫在一起。
export { es6 as default } from "./someModule"; // 等同于 import { es6 } from "./someModule"; export default es6;模塊繼承
// circleplus.js //* 導(dǎo)出circle的所有,但是會(huì)忽略default export * from "circle"; export var e = 2.71828182846; //自定義了一個(gè)e變量導(dǎo)出 export default function(x) { //自定義了一個(gè)default導(dǎo)出,因?yàn)?* 忽略了default,如果需要導(dǎo)出的話,需要自己補(bǔ)一個(gè) return Math.exp(x); } // main.js //導(dǎo)入了circleplus模塊的所有,不過* 一樣會(huì)忽略了default import * as math from "circleplus"; //將circleplus全部導(dǎo)入并改名為math import exp from "circleplus"; //導(dǎo)入了circleplus的default //exp就是導(dǎo)入的默認(rèn)default 函數(shù) console.log(exp(math.e)); //math就是circleplus,所以可以調(diào)用變量e跨模塊常量
const聲明的常量只在當(dāng)前代碼塊有效。如果想設(shè)置跨模塊的常量(即跨多個(gè)文件),或者說一個(gè)值要被多個(gè)模塊共享,可以采用下面的寫法。
// constants.js 模塊 export const A = 1; export const B = 3; export const C = 4; // test1.js 模塊 import * as constants from "./constants"; //通過導(dǎo)入模塊來共享 console.log(constants.A); // 1 console.log(constants.B); // 3 // test2.js 模塊 import {A, B} from "./constants"; console.log(A); // 1 console.log(B); // 3
如果要使用的常量非常多,可以建一個(gè)專門的constants目錄,將各種常量寫在不同的文件里面,保存在該目錄下。
// constants/db.js export const db = { url: "http://my.couchdbserver.local:5984", admin_username: "admin", admin_password: "admin password" }; // constants/user.js export const users = ["root", "admin", "staff", "ceo", "chief", "moderator"]; 然后,將這些文件輸出的常量,合并在index.js里面。 // constants/index.js export {db} from "./db"; //使用一個(gè)中轉(zhuǎn)模塊(文件)來收集這些常量模塊 export {users} from "./users"; 使用的時(shí)候,直接加載index.js就可以了。 // script.js import {db, users} from "./constants";
需要注意的是,單純es6語(yǔ)法并不能很簡(jiǎn)單的測(cè)試,需要使用babel-node這樣的支持完全的es6語(yǔ)法的解析器才能解析,詳情可以參考一下:(http://es6.ruanyifeng.com/#do...
參考引用:
ranyifeng的es6入門 我是買了實(shí)體書然后再看電子版的
es實(shí)戰(zhàn)2015
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/81868.html
摘要:它是語(yǔ)言的第七種數(shù)據(jù)類型前六種是布爾值字符串?dāng)?shù)值對(duì)象。為了防止沖突這就是引入的原因。指向了這個(gè)內(nèi)部方法調(diào)用了返回對(duì)象的屬性等于一個(gè)布爾值,表示該對(duì)象使用時(shí),是否可以展開。數(shù)組的默認(rèn)行為是可以展開返回對(duì)象的屬性,指向當(dāng)前對(duì)象的構(gòu)造函數(shù)。 es6學(xué)習(xí)筆記-Symbol_v1.0 基本抄了一次內(nèi)容,有很多只是知道其然并不知其所以然,不過也算是加深了一次印象,另外每段代碼我都有手動(dòng)執(zhí)行過. E...
摘要:學(xué)習(xí)筆記頂層對(duì)象雖然是筆記但是基本是抄了一次大師的文章了頂層對(duì)象頂層對(duì)象,在瀏覽器環(huán)境指的是對(duì)象,在指的是對(duì)象。之中,頂層對(duì)象的屬性與全局變量是等價(jià)的。的寫法模塊的寫法上面代碼將頂層對(duì)象放入變量。參考引用頂層對(duì)象實(shí)戰(zhàn) es6學(xué)習(xí)筆記-頂層對(duì)象_v1.0 (雖然是筆記,但是基本是抄了一次ruan大師的文章了) 頂層對(duì)象 頂層對(duì)象,在瀏覽器環(huán)境指的是window對(duì)象,在Node指的是gl...
摘要:考慮到環(huán)境導(dǎo)致的行為差異太大,應(yīng)該避免在塊級(jí)作用域內(nèi)聲明函數(shù)。函數(shù)聲明語(yǔ)句函數(shù)表達(dá)式循環(huán)循環(huán)還有一個(gè)特別之處,就是循環(huán)語(yǔ)句部分是一個(gè)父作用域,而循環(huán)體內(nèi)部是一個(gè)單獨(dú)的子作用域。聲明一個(gè)只讀的常量。 es6學(xué)習(xí)筆記-let,const和塊級(jí)作用域_v1.0 塊級(jí)作用域 javascript 原來是沒有塊級(jí)作用域的,只有全局作用域和函數(shù)作用域 例子1 因?yàn)闆]有塊級(jí)作用域,所以每次的i都是一...
摘要:學(xué)習(xí)筆記數(shù)值的擴(kuò)展有一些不常用或者還不支持的就沒有記錄了總體來說本篇只是一個(gè)備忘而已用來檢查一個(gè)數(shù)值是否為有限的。兩個(gè)新方法只對(duì)數(shù)值有效,非數(shù)值一律返回。參考引用數(shù)值擴(kuò)展 es6學(xué)習(xí)筆記-數(shù)值的擴(kuò)展 有一些不常用或者還不支持的就沒有記錄了,總體來說本篇只是一個(gè)備忘而已 Number.isFinite(), Number.isNaN() Number.isFinite()用來檢查一個(gè)數(shù)值...
摘要:因?yàn)榧^函數(shù)本身沒有所以不可以當(dāng)作構(gòu)造函數(shù),也就是說,不可以使用命令,否則會(huì)拋出一個(gè)錯(cuò)誤。箭頭函數(shù)不可以使用對(duì)象,該對(duì)象在函數(shù)體內(nèi)不存在。 es6學(xué)習(xí)筆記-箭頭函數(shù)_v1.0 箭頭函數(shù)使用方法 var f = v => v; //普通函數(shù)配合箭頭函數(shù)寫法,這里并且是傳參的 //相當(dāng)于 var f = function(v) { return v; }; /*-----------...
閱讀 1985·2021-11-23 10:03
閱讀 4189·2021-11-22 09:34
閱讀 2494·2021-10-08 10:05
閱讀 2257·2019-08-30 15:53
閱讀 1696·2019-08-30 13:56
閱讀 1165·2019-08-29 16:52
閱讀 1116·2019-08-26 13:31
閱讀 3356·2019-08-26 11:45