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（使用标签），返回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
下一篇：65ES6_函数