摘要：类的数据类型就是函数，类本身就指向构造函数。另一个需要注意的地方是，在子类的构造函数中，只有调用之后，才可以使用关键字，否则会报错。
1.ES6-- 新一代JavaScript标准 1.1 const和let关键字
以前只有全局变量以及函数内部的局部变量，所以以前的局部变量只能定义在函数里面，但是现在不是了，可以通过let关键字来定义局部变量。同时通过const关键字来定义常量，定义后的基本类型数据是不能改变的，但是定义的是引用类型的变量的话，还是可以改变的。
1.2 函数1.箭头函数，在回调中很有作用，箭头函数永远是匿名的
2.this在箭头函数中的使用：在嵌套函数中，碰到setInterval, setTimeout等定时器函数时，this会发生漂移，指向windows（global对象），以前我们要将this缓存[var self = this;]()或者通过[(){}.bind(this]())来改变this的内部函数的指向，但是有了箭头函数后，再也不用更担心这个问题了；
3.函数默认参数，以前的函数默认参数 [var a = a || []]();但是ES6支持了函数的默认参数；
4.rest参数[...](),rest参数是没有指定变量名的参数数组，而arguments是所有参数的集合。而且arguments参数不是一个真正的数组，而rest参数是一个真的数组，可以调用sort和map方法。可以告别arguments参数了；
1.3.展开符操作...可以用于函数的调用，数组字面量，以及对象的展开（ES7）.
1.4.模板字符串用反引号标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。模板字符串中嵌入变量，需要将变量名写在${}之中。
// 字符串中嵌入变量
var name = "Bob", time = "today";
Hello {name}, how are you {time}?
1.5 解构赋值
解构方法可以很快的从数组或者对象中提取变量，可以用一个表达式读取整个解构；
1.6 类JavaScript是原型继承的，但声明起来却很怪，所有提供了一个原型链的class语法糖。通过class关键字定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。类的数据类型就是函数，类本身就指向构造函数。
Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。
子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。另一个需要注意的地方是，在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例。
super这个关键字，既可以当作函数使用，第一种情况，super作为函数调用时，代表父类的构造函数。第二种情况，super作为对象时，指向父类的原型对象。可以采用super(). + 方法名字来调用父类的方法。
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
1.7 模块1.首先推出Require.js的AMD规范，Node.js诞生后，随之而来的是CommonJS格式，后来的browerify，知道es6推出了模块化，对模块化进行了支持；
es6模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。通过as取别名。
export {firstName, lastName, year};
import {firstName, lastName, year} from "./profile";
function setName(element) {
element.textContent = firstName + " " + lastName;
}
1.8 使用Babel
各种方案层出不穷，JavaScript不断发展，导致很多性能无法普及，babel提供了JavaScript多用途编译器。让你可以开心的使用ES6.
Babel通过安装插件（plugin）或者预设（preset，就是一组设定好的插件）来编译代码。创建一个.babelrc文件。
{
"presets":[],
"plugins":[]
}
2.Component组件与模块化
首先要明白两个概念：模块（module）和组件（component）,模块是指的语言层面的，在前端大多数指的是一个JavaScript模块，往往变现为一个JavaScript文件，以及其对外暴露的一些属性和方法。组件更偏向于业务层面，往往是一个独立功能的实现，比如一个下拉菜单，文本编辑器，路由系统等。一个组件往往包括其所需的所有资源，包括逻辑js,样式css，模板html（template），甚至图片和文字。
2.1模块化方案的阶段1.全局变量+命名空间：
避免污染全局作用域，模块内部通常用匿名自执行函数。问题多多：（1）依赖全局变量，污染全局变量的同时，不安去.（2）依赖约定的命名空间，不可靠。（3）要手动管理并控制执行，容易出错，在上线前要手动合并一些模块
2.AMD+CommonJs
解决时上述的问题，全局下定义require和define，不需要其他变量
通过文件路径或模块声明来定义模块
依赖与加载都是由加载器完成，提供了打包工具自动分析依赖并合并
3.ES6模块化
JavaScript带来了自己的模块化方案，相比AMD/CommonJS,功能更强大，引用和暴露的方式更多样，支持复杂的静态分析，使构建工具更细粒度地移除模块实现中的无用代码。
2.2 组件化阶段1.基于命名空间的多入口文件
基于前面的第一种模块化方案，不同资源手动导入，最典型的就是jQuery插件；
2.基于模块的多入口文件
随着前端模块化方案的流行，组件也趋于AMD这样的规范，把组件也暴露为一个模块。一个AMD模块的JavaScript，一个CSS(Less,Sass)模块的样式，以及其他资源。
3.单JavaScript入口的组件
这是现在比较流行的方案，借助browerify、webpack这样的打包工具，允许我们将一般的资源当做JavaScript模块来对待。并一致的加载进来。
4.Web Component
这是组件化里的国家队，与2011年提出，但是还处于不温不火的状态，主要包括自定义元素（Custom Element）、HTML模板（HTML Template）、Shadow DOM、HTML 的引入（HTML Import）
3.前端开发常用工具1.包管理工具
用来安装、管理和分享JavaScript包，同时自动处理多个包之间的依赖。主要有包管理工具，Bower、Component、Spm、以及Node.js的亲儿子npm;
2.任务流工具
在前端项目中会遇到各种各样的任务，比如压缩合并代码、验证代码格式、测试代码、监视文件等等，执行这些方法不可能每次都去手动写这些命令，非常麻烦，接触Linux的肯定会想到shell脚本。现在前端比较流行的有Grunt和Gulp两个；
3.模块打包工具
主要有bundler和webpack两个，webpack作为后起之秀，它支持AMD、CommonJS类型，通过loader机制也可以使用ES6的模块格式，正向一个全能型构建工具发展。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81530.html
摘要：确定新的包命名规则为了尽可能避免包的误植域名现象，将不会再允许使用相似的包命名不过会进一步鼓励开发者使用自己的命名空间来发布包。本文是对其几十年来技术之路的回顾与展望，也是一代技术人的青春回忆。 showImg(https://segmentfault.com/img/remote/1460000012846628); 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了...
摘要：的网站仍然使用有漏洞库上周发布了开源社区安全现状报告，发现随着开源社区的日渐活跃，开源代码中包含的安全漏洞以及影响的范围也在不断扩大。与应用安全是流行的服务端框架，本文即是介绍如何使用以及其他的框架来增强应用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清单专注...
摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。 前端开发者手册2019 Cody Lindley 编著 原文地址 本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。 下载：PDF ...
摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。 前端开发者手册2019 Cody Lindley 编著 原文地址 本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。 下载：PDF ...
摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。 前端开发者手册2019 Cody Lindley 编著 原文地址 本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。 下载：PDF ...
