资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

67ES6_异常_模块化-创新互联

目录

目前创新互联已为近1000家的企业提供了网站建设、域名、网站空间网站运营、企业网站设计、伊宁网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

异常:...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文件

67ES6_异常_模块化

$ 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

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前题目:67ES6_异常_模块化-创新互联
文章出自:http://cdkjz.cn/article/csoipp.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220