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