目錄
目前創(chuàng)新互聯(lián)已為近1000家的企業(yè)提供了網站建設、域名、網站空間、網站運營、企業(yè)網站設計、伊寧網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。異常：...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沒有模塊化系統(tǒng)；
js主要在前端的browser中使用，js文件下載緩存到客戶端，在瀏覽器中執(zhí)行，如簡單的表單本地驗證，漂浮一個廣告；
服務器端使用asp、jsp等動態(tài)網頁技術，將動態(tài)生成數據嵌入到一個HTML模板，里面夾雜著js（使用標簽），返回browser端，這時的js只是一些簡單函數和語句的組合；
05年，隨著glogle大量使用ajax技術，可異步請求服務器端數據，帶來了前端交互的巨大變化，前端功能需求越來越多，代碼也越來越多，隨著js文件的增多，災難性的后果產生了，由于習慣了隨便寫，js腳本中各種全局變量污染（覆蓋），函數名沖突，無法表達腳本之間的依賴關系，都是用加載腳本的先后來實現的，亟待模塊化的出現；
08年v8引擎發(fā)布，09年誕生了nodejs，支持服務端js編程，但沒模塊化是不可以的，之后產生了commonjs規(guī)范；
commonjs，使用全局require函數導入模塊，使用export導出變量；為將這種模塊化規(guī)范向前端開發(fā)遷移，又深化出其它的規(guī)范，如AMD；
AMD，asynchronous module definition，異步模塊定義，使用異步方式加載模塊，模塊的加載不影響它后面語句的執(zhí)行，所有依賴這個模塊的語句，都需定義一個回調函數，回調函數中使用模塊的變量和函數，等模塊加載完成之后，這個回調函數才會執(zhí)行，就可安全的使用模塊的資源，其實現就是AMD/RequiresJs，AMD雖然是異步，但是會預先加載和執(zhí)行；
CMD，common module definition，使用seajs，作者是淘寶前端玉伯，兼容并包解決了RequierJs的問題，CMD推崇as lazy as possible，盡可能的懶加載；
由于社區(qū)的模塊化呼聲很高，ES6開始提供支持模塊的語法，但browser目前支持還不夠；
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上語法支持，但運行環(huán)境，包括v8引擎，都不能很好的支持模塊化語法
從一種語言代碼轉換到另一個語言代碼，也可從一種語言代碼的高版本轉譯到低版本的支持語句；
js存在不同版本、不同browser兼容的問題，如何解決對語法的支持問題？用transpiler轉譯工具解決；
babel：
開發(fā)中可用較新的ES6語法，通過轉譯器轉譯為指定的某些版本代碼；
https://babeljs.io/
Try it out，將一段代碼貼入，查看轉換效果；
本地安裝babel：
presets預設：
npm install --save-dev babel-preset-env?? #當前環(huán)境支持的代碼
npm install --save-dev babel-preset-es2015?? #ES2015轉碼規(guī)則
npm install --save-dev babel-preset-react?? #react轉碼規(guī)則
npm install --save-dev babel-preset-stage-0?? #ES7不同階段語法提案的轉碼規(guī)則，共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非常流行；
開發(fā)者可以在高版本中使用新的語法特性，提高開發(fā)效率，把兼容性問題交給轉譯器處理；
1、初始化：
$ npm init?? #把工程目錄變?yōu)閎abel可管理，執(zhí)行完后項目根下會生成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?? #此命令在項目根下執(zhí)行，執(zhí)行后會自動生成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將把手動變?yōu)樽詣樱?/p>
4、修改package.json的scripts部分：
$ vim package.json
"scripts": {
"build": "babel src -d lib"
},
5、準備目錄（項目根下）：
$ mkdir -p {src/,lib/}?? #src是源碼目錄，lib是目標目錄
6、配置babel（項目根下），env可根據當前環(huán)境自動選擇：
$ 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、執(zhí)行轉換：
準備要被轉換的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
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
重慶分公司
重慶分公司
