目录
异常:... 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(使用<script></script>标签),返回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目前支持还不够;
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
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。