js学习笔记(八)

JavaScript

JavaScript 的浏览器兼容性问题

兼容性

由于2015年Ecma（欧洲电脑制造商协会）推出了新版本的js标准ES6，但很多浏览器还有部分语法，所以需要利用一些方法将新版本的ES6语法转化为老版本ES5语法以便适应不同的浏览器支持。
ES6主要引入了一下特性：
- 增加了let和const变量类型;
- 增加了字符串插入的template literals ${variable};使用反引号创建多行和动态字符串。

ES6的优点主要有：
- 与其他程序语言在语法上更为相似，程序员更容易从其他语言转换；
- 可读性和代码经济性（更短更强功能）；
- 改进了ES5的一些错误源。

我们可以利用网站caniuse查询浏览器对模块、指令的兼容性。

方法

可以通过将ES6的js转为ES5语法了处理兼容性问题，需要通过npm安转Babel库来进行重新转换。

npm和参考以及node

#安转babel库并进行代码兼容性转换
npm install babel-cli
npm install babel-preset-env
# 例如src文件夹下有main.js,转换后会保持在./lib/
npm run build

下面对于每一步过程进行详细记录：

对于js项目的npm 初始化 npm init

#在文件夹下穿件src文件夹，同时利用npm init生成package.json文件
#package.json包含了元数据、依赖包和命令行键值对儿
npm init
#提升输入名称、描述等，回车就按默认生成
#初始化后结构如图所示
#|_ src
#|___ main.js
#|_ package.json

安装对应的工具包 npm install

npm install babel-cli -D  #command line
npm install babel-preset-env -D   #env map code
#其中-D选项是开发者依赖，为package.json添加devDepencies属性，其他开发者便可直接使用。
#新的文件结构，增加了node_modules：
#project
#|_ node_modules
#|___ .bin
#|___ ...
#|_ src
#|___ main.js
#|_ package.json'
#-----------------------
#同时利用touch 创建新文件预设初始化条件
touch .babelrc
#在.babelrc中写入一个对象:
{
  'presers':['env']
}  #保存
#-----------------------
#在打开package.json 中对"scripts"对象进行编辑，在test属性后加入build属性
"build": "babel src -d lib" #利用babel命令对src文件进行转化，并将转换后代码保存在lib文件夹中-d。

完成参数设置后编译即可
npm run build
转换后的js文件将存在lib文件夹下（script对象中build属性制定的位置）

总结

进行代码转换时一般需要五个步骤：
- npm init 初始化目录生成package.json，并创建/src文件夹；
- 安装命令行工具babel-cli和映射信息babel-preset-env,利用npm install package -D；
- 生成.babelrc来制定源码version；
- 在package.json中script对象，添加build属性。制定命令、源码和目标位置；
- npm run build 利用编译指令进行转换

tips
1.ls -l | wc -l 用wc 统计文件个数，同样也可以使用ls -a |grep '^-'|wc -l
2.BASH代码注释
3.touch 命令用于更新已有文件的时间标签，或者创建新的空文件touch
4.着重注意json ""！！！js中'单引号'和"双引号"是通用的，但对于json格式来说，所有字符串都需要用"双引号"double quotes来表示；官网标准
5.几个颜色中英文名对照的参考，用于设置css颜色，参考1，参考2，参考3；
6.最新的ES7-2016标准，es8-2017参考，特性