?

專注于為中小企業(yè)提供做網(wǎng)站、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)衡山免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了數(shù)千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

?

目錄

異常：...1

拋出異常：...1

捕獲異常：...2

模塊化：...2

ES6模塊化：...3

轉(zhuǎn)譯：...4

離線轉(zhuǎn)譯安裝配置：...4

?

?

?

?

異常：

?

拋出異常：

js的異常語(yǔ)法和java相同，使用throw關(guān)鍵字拋出；

用throw關(guān)鍵字可拋出任意對(duì)象的異常；

一切皆對(duì)象，一切皆可拋；

?

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

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 {};?? //{}是對(duì)象

}catch (error) {

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

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

} ?finally {

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

}

?

輸出：

1 'number'

Number

{} 'object'

Object

end

?

?

?

模塊化：

ES6之前，js沒有模塊化系統(tǒng)；

js主要在前端的browser中使用，js文件下載緩存到客戶端，在瀏覽器中執(zhí)行，如簡(jiǎn)單的表單本地驗(yàn)證，漂浮一個(gè)廣告；

服務(wù)器端使用asp、jsp等動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)，將動(dòng)態(tài)生成數(shù)據(jù)嵌入到一個(gè)HTML模板，里面夾雜著js（使用<script></script>標(biāo)簽），返回browser端，這時(shí)的js只是一些簡(jiǎn)單函數(shù)和語(yǔ)句的組合；

?

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

?

08年v8引擎發(fā)布，09年誕生了nodejs，支持服務(wù)端js編程，但沒模塊化是不可以的，之后產(chǎn)生了commonjs規(guī)范；

commonjs，使用全局require函數(shù)導(dǎo)入模塊，使用export導(dǎo)出變量；為將這種模塊化規(guī)范向前端開發(fā)遷移，又深化出其它的規(guī)范，如AMD；

?

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

?

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

?

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

?

?

ES6模塊化：

import語(yǔ)句，導(dǎo)入另一個(gè)模塊導(dǎo)出的綁定；

export語(yǔ)句，從模塊中導(dǎo)出函數(shù)、對(duì)象、值，供其它模塊import導(dǎo)入用；

?

例：

.src/moda.js

?

export default class A {?? //缺省導(dǎo)出類

???constructor(x) {

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

??? }

???show() {

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

??? }

}

?

export function fn() {??? //導(dǎo)出函數(shù)

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

}

?

export const CONSTA ='aaa';?? //導(dǎo)出常量

?

?

./modb.js

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

?

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

?

?

轉(zhuǎn)譯：

從一種語(yǔ)言代碼轉(zhuǎn)換到另一個(gè)語(yǔ)言代碼，也可從一種語(yǔ)言代碼的高版本轉(zhuǎn)譯到低版本的支持語(yǔ)句；

js存在不同版本、不同browser兼容的問(wèn)題，如何解決對(duì)語(yǔ)法的支持問(wèn)題？用transpiler轉(zhuǎn)譯工具解決；

?

babel：

開發(fā)中可用較新的ES6語(yǔ)法，通過(guò)轉(zhuǎn)譯器轉(zhuǎn)譯為指定的某些版本代碼；

?

https://babeljs.io/

Try it out，將一段代碼貼入，查看轉(zhuǎn)換效果；

?

本地安裝babel：

presets預(yù)設(shè)：

npm install --save-dev babel-preset-env?? #當(dāng)前環(huán)境支持的代碼

npm install --save-dev babel-preset-es2015?? #ES2015轉(zhuǎn)碼規(guī)則

npm install --save-dev babel-preset-react?? #react轉(zhuǎn)碼規(guī)則

npm install --save-dev babel-preset-stage-0?? #ES7不同階段語(yǔ)法提案的轉(zhuǎn)碼規(guī)則，共4個(gè)階段，選一個(gè)裝

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

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

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

?

?

離線轉(zhuǎn)譯安裝配置：

使用babel等轉(zhuǎn)譯器轉(zhuǎn)譯js非常流行；

開發(fā)者可以在高版本中使用新的語(yǔ)法特性，提高開發(fā)效率，把兼容性問(wèn)題交給轉(zhuǎn)譯器處理；

?

1、初始化：

$ npm init?? #把工程目錄變?yōu)閎abel可管理，執(zhí)行完后項(xiàng)目根下會(huì)生成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、設(shè)置鏡像：

可放到npm目錄下的npmrc文件中；可放到用戶家目錄中；可放到項(xiàng)目根目錄中；

$ vim .npmrc

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

?

3、安裝：

$ npm install babel-core babel-cli --save-dev?? #此命令在項(xiàng)目根下執(zhí)行，執(zhí)行后會(huì)自動(dòng)生成node_modules目錄，里面有babel相關(guān)模塊及依賴的模塊

……

+ babel-cli@6.26.0

+ babel-core@6.26.3

added 305 packages in 54.185s

?

注：

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

--save?? #自動(dòng)把模塊和版本號(hào)添加到package.json的dependencies部分

--save-dev?? #自動(dòng)把模塊和版本號(hào)添加到package.json的devDependencies部分

當(dāng)為一個(gè)模塊安裝一個(gè)依賴模塊時(shí)，正常情況下先安裝npm install MODULE_NAME，然后再手動(dòng)修改dependencies和devDependencies，使用--save或--save-dev將把手動(dòng)變?yōu)樽詣?dòng)；

?

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

$ vim package.json

? "scripts": {

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

? },

?

5、準(zhǔn)備目錄（項(xiàng)目根下）：

$ mkdir -p {src/,lib/}?? #src是源碼目錄，lib是目標(biāo)目錄

?

6、配置babel（項(xiàng)目根下），env可根據(jù)當(dāng)前環(huán)境自動(dòng)選擇：

$ vim .babelrc

{

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

}

?

7、安裝依賴：

$ npm install babel-preset-env --save-dev?? #package.json文件的devDependencies段會(huì)自動(dòng)添加"babel-preset-env"

……

+ babel-preset-env@1.7.0

added 120 packages in 22.888s

?

8、執(zhí)行轉(zhuǎn)換：

準(zhǔn)備要被轉(zhuǎn)換的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個(gè)文件被轉(zhuǎn)換

> 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?? #運(yùn)行文件

100

?

?

?

?

文章標(biāo)題：67ES6_異常_模塊化
本文地址：http://sd-ha.com/article28/gcjijp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、做網(wǎng)站、網(wǎng)站制作、電子商務(wù)、網(wǎng)站改版、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)