67ES6_异常_模块化

 

 

目录

异常:... 1

抛出异常:... 1

捕获异常:... 2

模块化:... 2

ES6模块化:... 3

转译:... 4

离线转译安装配置:... 4

 

 

 

 

异常:

 

抛出异常:

js的异常语法和java相同,使用throw关键字抛出;

throw关键字可抛出任意对象的异常;

一切皆对象,一切皆可抛;

 

throw null;   //Xerror.constructor.name拿不到,解决:加个判断,该判断写成函数

throw undefined;   //X

 

js中要小心的地方,nullundefinedNaN

 

例:

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

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

// throw 1;

// throw 'not ok';

// throw [1,2,3];

// throw {'a':1};

// throw () => {};

 

 

捕获异常:

Cjavajs中都是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文件下载缓存到客户端,在浏览器中执行,如简单的表单本地验证,漂浮一个广告;

服务器端使用aspjsp等动态网页技术,将动态生成数据嵌入到一个HTML模板,里面夹杂着js(使用<script></script>标签),返回browser端,这时的js只是一些简单函数和语句的组合;

 

05年,随着glogle大量使用ajax技术,可异步请求服务器端数据,带来了前端交互的巨大变化,前端功能需求越来越多,代码也越来越多,随着js文件的增多,灾难性的后果产生了,由于习惯了随便写,js脚本中各种全局变量污染(覆盖),函数名冲突,无法表达脚本之间的依赖关系,都是用加载脚本的先后来实现的,亟待模块化的出现;

 

08v8引擎发布,09年诞生了nodejs,支持服务端js编程,但没模块化是不可以的,之后产生了commonjs规范;

commonjs,使用全局require函数导入模块,使用export导出变量;为将这种模块化规范向前端开发迁移,又深化出其它的规范,如AMD

 

AMDasynchronous module definition,异步模块定义,使用异步方式加载模块,模块的加载不影响它后面语句的执行,所有依赖这个模块的语句,都需定义一个回调函数,回调函数中使用模块的变量和函数,等模块加载完成之后,这个回调函数才会执行,就可安全的使用模块的资源,其实现就是AMD/RequiresJsAMD虽然是异步,但是会预先加载和执行;

 

CMDcommon 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文件

1.jpg

 

$ 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相关模块及依赖的模块

……

+ [email protected]

+ [email protected]

added 305 packages in 54.185s

 

注:

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

--save   #自动把模块和版本号添加到package.jsondependencies部分

--save-dev   #自动把模块和版本号添加到package.jsondevDependencies部分

当为一个模块安装一个依赖模块时,正常情况下先安装npm install MODULE_NAME,然后再手动修改dependenciesdevDependencies,使用--save--save-dev将把手动变为自动;

 

4、修改package.jsonscripts部分:

$ 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"

……

+ [email protected]

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个文件被转换

> [email protected] 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

 

 

 

 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章