ES6前端技术课

ES6前端技术课

ES6前端技术

第一章：ES6入门简介

回顾：

• JavaScript

本章内容：

• JavaScript和ECMAScript的关系
• ES的版本历史
• 浏览器兼容性
• 开发工具

为什么要学习ES6

1.ES6是ES版本系列里面变化内容最多，具有里程碑意义

2.ES6加入很多新的语法特性，使编程更加简单、高效

.ES6是目前前端公司比较流行的开发技术，比如说开发、支付宝小程序、前端页面等等

4.ES6是前端发展趋势，就业必备技能、面试必问

第一节 名词介绍

1.JS和ES的关系

JS:是javascript的简称，是网景公司开发的语言，当时为了凑java的热度，改名叫javascript，为了让js走出美国、走向世界，把该语言托付给了欧洲豪门（ECMA）。

JS：BOM、DOM、ECMAScript

ECMAScript:随了ECMA的姓--》ECMAScript

什么意思：ECMA是豪门，子女众多，老爷子随便给ECMAScript编号，叫262.

2.ECMA

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际。

Ecma 国际制定了许多标准 .htm

ECMA-262（ECMAScript）历史版本查看网址 .htm

.ECMASCript历史

简称ES

ES1 1997

ES2 1998

....

ES4 2008，当时版本过于超前，被废弃了

ES5 2009年 ，到现在还在使用

ES6 2015年 ，因为面向对象开发已经风靡全球，互联网发展如火如荼，js为了适应发展，增加了很多新的特性，let ct，解构赋值、扩展运算符、箭头函数、promise编程。

ES7 2016年

ES8 2017

...

动态下一个版本

4.TC-9

ES是一门语言的标准，需要一帮大佬来维护，ECMA已看262，发展良好，给他弄个奶爸团，名字叫TC-9.

主要是大厂派来的高手，是浏览器大厂代表，比如说有谷歌、苹果、微软，TC-9定期召开会议，提出新标准。

5个阶段

Stage0 展示阶段， 提建议

Stage1 征求意见 问委员会，行不行

Stage2 草案阶段 统一，弄个草案

Stage 候选阶段

Stage4 定案阶段

第二节：IDE和浏览器兼容性问题解决

常言道：“工欲善其事必先利其器”，“磨刀不误砍柴工”，我们在编写ES6程序的时候，使用什么IDE（开发工具）

1.IDE开发工具

WebStorm

​ WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。

2.浏览器兼容性问题解决

/

IE10+、Chrome、FireFox、移动端、odeJS都支持

给用户看的，有的用户还使用旧的浏览器，但是程序员追求新技术，用户，打不开，有bug，发牢。

2.1 在线转换

使用一个转换文件js,在打开ES6程序时候，提前调用转换文件，当然这种情况，就会浪费资源

需要一个文件js

代码语言：javascript代码运行次数：0运行复制

<script src="js"></script>
    <script type="text/babel">
        let name="张三";
        cole.log(name);
        //
        var fn=(v=>cole.log(v));
        fn('this is a dog');
    </script>

2.2提前编译

​ 编译概念：需要编译器，这里需要Babel编译器，是js的编译器，可以把最新的ES代码编译成当前项目可执行的代码，简而言之，可以让我们在当前的项目中使用最新的ES版本（6 7 8 9 10),为了更好的使用ES系列新版本，必须掌握Babel。

2.2.1 安装ode.js

soft目录，或者关注AAA企业，索取一下即可。

2.2.2 更改镜像

npm工具，外国，我们使用阿里

代码语言：javascript代码运行次数：0运行复制

npm config set registry /
npm config get registry

2.2.安abel-cli

代码语言：javascript代码运行次数：0运行复制

npm install babel-cli -g
或npm install babel-cli -g

完毕之后，看babel的版本号

babel -V

2.2.4 初始化项目

代码语言：javascript代码运行次数：0运行复制

npm init

完毕之后，会多出来一个package.json文件

2.2.5 创建babel的配置文件

代码语言：javascript代码运行次数：0运行复制

echo.>.babelrc

配置一下这个文件

代码语言：javascript代码运行次数：0运行复制

{
  //设置转码规则
  "presets": ["es2015","stage-2"],
  "plugins": ["transform-runtime"] //设置插件
}

2.2.6 安装要转换的插件

代码语言：javascript代码运行次数：0运行复制

npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 -save-dev

2.2.7 修改package.json

代码语言：javascript代码运行次数：0运行复制

 "build": "babel src -w -d lib"

表示要转换（编译）的源文件和目标文件，需要目录来管理，src:源文件;lib:目标文件

2.2.8 创建index.js

代码语言：javascript代码运行次数：0运行复制

var fn=(v=>cole.log(v));
fn('this is arrow by zhang');

babel-node index.js可以执行js

2.2.9转换一下

代码语言：javascript代码运行次数：0运行复制

npm run build

lib目录下的index.js转换文件为：

代码语言：javascript代码运行次数：0运行复制

'use strict';

var fn = function fn(v) {
  return cole.log(v);
};
fn('this is arrow by zhang');

扩展：

Babel 是巴比伦文化里的通天塔，用来给 6to5 这个项目命名真得太贴切了！羡慕这些牛逼的人，不光代码写得好，还这么有文化，不像我们，起个变量名都得憋上半天，吃了没有文化的亏。

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：202-09-04，如有侵权请联系 cloudcommunity@tencent 删除前往查看前端编译开发开发工具浏览器兼容性