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