67ES6_異常_模塊化

?

?

目錄

異常：... 1

拋出異常：... 1

捕獲異常：... 2

模塊化：... 2

ES6模塊化：... 3

轉譯：... 4

離線轉譯安裝配置：... 4

?

?

?

?

異常：

?

拋出異常：

js的異常語法和java相同，使用throw關鍵字拋出；

用throw關鍵字可拋出任意對象的異常；

一切皆對象，一切皆可拋；

?

throw null;?? //X，error.constructor.name拿不到，解決：加個判斷，該判斷寫成函數

throw undefined;?? //X

?

js中要小心的地方，null、undefined、NaN；

?

例：

// throw new Error('new error');

// throw new ReferenceError('ref error');

// throw 1;

// throw 'not ok';

// throw [1,2,3];

// throw {'a':1};

// throw () => {};

?

?

捕獲異常：

C、java、js中都是try...catch...finally...；

py中是try...except...finally...；

?

例：

try {

??? throw 1;

} catch (error) {

??? console.log(error,typeof(error));

??? console.log(error.constructor.name);

}

?

try {

??? throw {};?? //{}是對象

} catch (error) {

??? console.log(error,typeof(error));

??? console.log(error.constructor.name);?? //拿到類型

} ?finally {

??? console.log('end');

}

?

輸出：

1 'number'

Number

{} 'object'

Object

end

?

?

?

模塊化：

ES6之前，js沒有模塊化系統；

js主要在前端的browser中使用，js文件下載緩存到客戶端，在瀏覽器中執行，如簡單的表單本地驗證，漂浮一個廣告；

服務器端使用asp、jsp等動態網頁技術，將動態生成數據嵌入到一個HTML模板，里面夾雜著js（使用<script></script>標簽），返回browser端，這時的js只是一些簡單函數和語句的組合；

?

05年，隨著glogle大量使用ajax技術，可異步請求服務器端數據，帶來了前端交互的巨大變化，前端功能需求越來越多，代碼也越來越多，隨著js文件的增多，災難性的后果產生了，由于習慣了隨便寫，js腳本中各種全局變量污染（覆蓋），函數名沖突，無法表達腳本之間的依賴關系，都是用加載腳本的先后來實現的，亟待模塊化的出現；

?

08年v8引擎發布，09年誕生了nodejs，支持服務端js編程，但沒模塊化是不可以的，之后產生了commonjs規范；

commonjs，使用全局require函數導入模塊，使用export導出變量；為將這種模塊化規范向前端開發遷移，又深化出其它的規范，如AMD；

?

AMD，asynchronous module definition，異步模塊定義，使用異步方式加載模塊，模塊的加載不影響它后面語句的執行，所有依賴這個模塊的語句，都需定義一個回調函數，回調函數中使用模塊的變量和函數，等模塊加載完成之后，這個回調函數才會執行，就可安全的使用模塊的資源，其實現就是AMD/RequiresJs，AMD雖然是異步，但是會預先加載和執行；

?

CMD，common module definition，使用seajs，作者是淘寶前端玉伯，兼容并包解決了RequierJs的問題，CMD推崇as lazy as possible，盡可能的懶加載；

?

由于社區的模塊化呼聲很高，ES6開始提供支持模塊的語法，但browser目前支持還不夠；

?

?

ES6模塊化：

import語句，導入另一個模塊導出的綁定；

export語句，從模塊中導出函數、對象、值，供其它模塊import導入用；

?

例：

.src/moda.js

?

export default class A {?? //缺省導出類

??? constructor(x) {

??????? this.x = x;

??? }

??? show() {

??????? console.log(this.x);

??? }

}

?

export function fn() {??? //導出函數

??? console.log('foo function');

}

?

export const CONSTA = 'aaa';?? //導出常量

?

?

./modb.js

import { A, fn } from './src/moda';

?

fn();?? //vs上語法支持，但運行環境，包括v8引擎，都不能很好的支持模塊化語法

?

?

轉譯：

從一種語言代碼轉換到另一個語言代碼，也可從一種語言代碼的高版本轉譯到低版本的支持語句；

js存在不同版本、不同browser兼容的問題，如何解決對語法的支持問題？用transpiler轉譯工具解決；

?

babel：

開發中可用較新的ES6語法，通過轉譯器轉譯為指定的某些版本代碼；

?

https://babeljs.io/

Try it out，將一段代碼貼入，查看轉換效果；

?

本地安裝babel：

presets預設：

npm install --save-dev babel-preset-env?? #當前環境支持的代碼

npm install --save-dev babel-preset-es2015?? #ES2015轉碼規則

npm install --save-dev babel-preset-react?? #react轉碼規則

npm install --save-dev babel-preset-stage-0?? #ES7不同階段語法提案的轉碼規則，共4個階段，選一個裝

npm install --save-dev babel-preset-stage-1

npm install --save-dev babel-preset-stage-2

npm install --save-dev babel-preset-stage-3

?

?

離線轉譯安裝配置：

使用babel等轉譯器轉譯js非常流行；

開發者可以在高版本中使用新的語法特性，提高開發效率，把兼容性問題交給轉譯器處理；

?

1、初始化：

$ npm init?? #把工程目錄變為babel可管理，執行完后項目根下會生成package.json文件

?

$ cat package.json

{

? "name": "test",

? "version": "1.0.0",

? "description": "babel",

? "main": "test.js",

? "scripts": {

??? "test": "echo \"Error: no test specified\" && exit 1"

? },

? "author": "mage",

? "license": "ISC"

}

?

2、設置鏡像：

可放到npm目錄下的npmrc文件中；可放到用戶家目錄中；可放到項目根目錄中；

$ vim .npmrc

resistry=https://registry.npm.taobao.org

?

3、安裝：

$ npm install babel-core babel-cli --save-dev?? #此命令在項目根下執行，執行后會自動生成node_modules目錄，里面有babel相關模塊及依賴的模塊

……

+ babel-cli@6.26.0

+ babel-core@6.26.3

added 305 packages in 54.185s

?

注：

npm install MODULE_NAME --save|--save-dev

--save?? #自動把模塊和版本號添加到package.json的dependencies部分

--save-dev?? #自動把模塊和版本號添加到package.json的devDependencies部分

當為一個模塊安裝一個依賴模塊時，正常情況下先安裝npm install MODULE_NAME，然后再手動修改dependencies和devDependencies，使用--save或--save-dev將把手動變為自動；

?

4、修改package.json的scripts部分：

$ vim package.json

? "scripts": {

??? "build": "babel src -d lib"

? },

?

5、準備目錄（項目根下）：

$ mkdir -p {src/,lib/}?? #src是源碼目錄，lib是目標目錄

?

6、配置babel（項目根下），env可根據當前環境自動選擇：

$ vim .babelrc

{

??? "presets": ["env"]

}

?

7、安裝依賴：

$ npm install babel-preset-env --save-dev?? #package.json文件的devDependencies段會自動添加"babel-preset-env"

……

+ babel-preset-env@1.7.0

added 120 packages in 22.888s

?

8、執行轉換：

準備要被轉換的js源文件（./src/moda.js，./src/index.js）：

$ cat src/moda.js

export default class A {

??? constructor(x) {

??????? this.x = x;

??? }

??? show() {

??????? console.log(this.x);

??? }

}

?

export function fn() {

??? console.log('foo function');

}

?

export const CONSTA = 'aaa';

?

$ cat ./src/index.js

import A from "./moda"

?

let a = new A(100);

a.show();

?

$ npm run build?? #2個文件被轉換

> test@1.0.0 build E:\git_practice\js

> babel src -d lib

src\index.js -> lib\index.js

src\moda.js -> lib\moda.js

?

$ cd lib/

$ node index.js?? #運行文件

100

?

?

?

?