4）ES6的新特性

原创

rulix 2021-08-08 15:32:44 博主文章分类：JavaScript和Vue ©著作权

©著作权归作者所有：来自51CTO博客作者rulix的原创作品，请联系作者获取转载授权，否则将追究法律责任

针对vue.js下的JavaScript（ES6）新特性:

1、变量提升的let和const

无论在哪里声明变量，var都可使变量提升至顶级作用域，这带来了一些问题
ES6引入了let来声明一个不会提升的变量，const则声明一个常量

2、模版字面量

JavaScript中多行字符串要使用反斜线来定义换行，ES6引入了反引号来定义多行字符串

关于语言中的变量占位符
1）Rails中的双引号字符串占位符 #{ variable }
2）Django中的双引号占位符 "{ v }".format(v=xxx)
3）ES6中的双引号占位符 ${ variable}

关于模版中的变量占位符
1) Rails下template中使用 <% v1 %> 或 <%= v2 %>
2) Django与ES6下template中使用 {{ 插值 }}

3、函数的改进

1）函数参数的默认值，可以通过形参直接指定

2）函数不限制传递的参数数量，多余的参数存放到arguments对象中
ES6引入了rest参数，其表现形式是： ...，它只能位于函数参数的最后一个位置

3）特殊的函数 —— 箭头函数
定义：函数名 = （形参) => 返回值
该函数与this关键词有着微妙的关系，可以利用函数的bind方法进行绑定

4、类与构造函数

ES5以前JavaScript不提供类的定义，只能通过构造函数和原型链定义；
ES6引入了新的class关键词，并使用constructor作为构造函数；

比如：
class {
constructor(var1, var2) {
this.xxx = xxxx
}
function_1(var3) {
...
}
static function_2(var4){
... /* 静态方法只能通过类名访问 */
}
}

extend 表示类的继承，并使用super调用父类的构造函数

5、模块的导出导入

ES5以前，社区为其指定的模块加载方案是CommonJS和AMD两种
ES6引入了模块机制，一个模块通常意义上是一个独立的JS文件

内部的变量、常量、和函数除非通过export导出，否则外部不可见

ES6相比于ES5增加类的相关支持，比如类的定义、构造函数、访问器、并支持继承
随后ES6开始支持模块导出(export)，取代了CommonJS和AMD，直接导致npm和yarn的出现
随后衍生出webpack打包，自此前端开始真正流行模块化编程

模块化功能导出 export { var1, var2, func}
模块化功能引入 import ==> 代表你引入了一个类或者方法

6、Promise支持

JavaScript解释器Node.js（或者是浏览器v8引擎）是基于单线程事件循环机制构建的
它采用任务队列的方式，将要执行的代码块放到队里中，事件循环会指定队列中下一个要执行的任务

事件循环是解释器引擎里的一段代码，负责监控代码执行并管理任务队列
这种机制的异步方式是基于：事件和回调，而ES6给出了promise更强大的一步编程解决方案

一个promise可以通过promise构造函数来创建，构造函数只接受一个参数：
包含初始化promise代码和执行器（executor）函数

7、VUE登场

安装该框架使用命令：yarn add vue; 它提供了vue实例对象
vue-cli脚手架，是生成前端项目结构的辅助工具，提供开发服务器打包等功能
换句话说：没有脚手架一样可以使用vue框架，另外vue代码并不属于node项目

Vue.js项目仍然以HTML为模版语法，无论如何也跑不出html+css的牢笼
采用MVVM软件架构模式，它是一种基于事件驱动编程的用户界面开发方案，由微软提出

模式的核心是双向绑定，数据驱动，即ViewModel => 是View和Model的关系映射
它负责将Model数据对象转化为View中变量，更便于使用和管理!!!
而View和Model是不可以直接通信的，必须借助中间的ViewModle观察者
ViewModel => 数据绑定ModelBinding 并视图监听ViewLister