Vuejs 中的 ECMAScript

对于稍微有一定编程经验的同学，会发现我们使用的不是”原生的javascript”, 而是一种新的语言。 这个语言就是 ECMAScript.

严格的说， ECMAScript是Javascript的规范，Javascript是ECMA的实现。

ECMAScript出了 javascript, 还有Jscript 和 ActionScript这样的实现（也叫方言）

ECMAScript 也简称叫ES。 版本比较多， 有ES 2015, ES2016, ES2017 等。 很多时候我们用ES6来泛指这三个版本。 从这里： http://kangax.github.io/compat-table/es6/可以看到，ES6 的90%的特性都已经被各大浏览器实现了。 阮一峰先生的《ECMAScript入门》中对ES的历史有着非常精彩的阐述。

具体的细节我们不去深究，我们就暂且认为ECMAScript实现了很多 普通js无法实现的功能。 同时，在Vuejs项目中大量的使用了ES的语法。

下面是一个极简版的ES6的入门。 大家只要可以看懂这些代码，就可以通读本书。

let, var, 常量 与全局变量

声明本地变量,使用 let 或者 var .两者的区别是:

  • var: 有可能引起 变量提升,或者 块级作用域的问题.

  • let: 就是为了解决这两个问题存在的.

最佳实践: 多用let, 少用var. 遇到诡异变量问题的时候,就查查是不是var的问题.

下面是三个对比:

  1. var title = '标题';   // 没问题
  2. let title = '标题';   // 没问题
  3. title = '标题';       // 这样做会报错.

记得,在 webpack下的 vuejs中, 使用任何变量,都要使用 var 或者let来声明.

常量:

  1. const TITLE='标题';

对于全局变量, 直接在 index.html 中声明即可. 例如:

  1. window.title = '我的博客列表'

导入代码： import

import 用来引入导入外部代码. 如下所示： 

  1. import Vue from 'vue'
  2. import Router from 'vue-router'

上面的代码, 目的是引入 vue 和 vue-router (由于他们是在package.json 中定义了, 所以可以直接 import ... from <包名>. 否则要加上路径）

  1. import SayHi from '@/components/SayHi'

上面这个,在from后面,有 @符号, 表示是在本地文件系统中,引入文件. @代表 源代码目录,一般是 src.

在 @出现之前,我们在编码的时候也会这样写:

  1. import Swiper from '../components/swiper'
  2. import SwiperItem from '../components/swiper-item'
  3. import XHeader from '../components/header/x-header'
  4. import store from '../vuex/store'

大量使用了 ../.. 这样的代码,会引起代码的混乱. 所以推荐使用 @ 方法.

方便其他代码来使用自己: export default {..}

我们会看到,在每个 vue文件中的 <script>中, 都会存在这个代码.它的作用是方便其他代码对这个代码来引用.

对于Vuejs 程序员,我们就记住这个写法就好了.

在ES6之前js没有一个统一的模块定义方式，流行的定义方式有AMD, CommonJS等, 这些方式都是使用一种“打补丁”的形式来实现这个功能，总给人一种怪怪的感觉。 而ES6从语言层面对定义模块的方式进行了统一。

假设有: lib/math.js 文件内容如下:

  1. export function sum(x, y) {
  2.   return x + y
  3. }
  4. export var pi = 3.141593

可以看到， lib/math.js 文件，可以导出两个东西，一个是 function sum, 一个是 var pi.

我们可以定义一个新的文件， app.js, 文件内容如下:

  1. import * as math from "lib/math"
  2. alert("2π = " + math.sum(math.pi, math.pi))

可以看到，在上面的代码中， 可以直接调用 math.sum 和 math.pi方法。

我们再看一个例子： 新建一个文件 other_app.js , 内容如下:

  1. import {sum, pi} from "lib/math"
  2. alert("2π = " + sum(pi, pi))

可以看到， 上面的代码中，通过 import {sum, pi} from "lib/math", 可以在后面直接调用 sum() 和 pi

而 export default { ... } 则是暴露出一段没有名字的代码, (不像 export function sum(a,b){ .. }这样有个名字(叫sum) . )

在webpack下的Vuejs ，会自动对这些代码进行处理。 都属于框架内的工作。各位同学只需要按照这个规则来写代码，就一定没问题。

ES中的简写

我们会发现,这样的代码:

  1. <script>
  2. export default {
  3.   data () {
  4.     return { }
  5.   }
  6. }
  7. </script>

实际上,上面的代码是一种简写形式,它等同于下面的代码:

  1. <script>
  2. export default {
  3.   data: function() {
  4.     return { }
  5.   }
  6. }
  7. </script>

箭头函数 =>

跟coffeescript一样, ES 也可以通过箭头来表示函数.

  1.   .then(response => ... );

等同于:

  1.   .then(function (response) {
  2.     // ...
  3.   })

这样写法的好处，是强制定义了作用域。 使用了 => 之后，可以避免很多由于作用域产生的问题。 建议大家多使用。

hash中同名的 key, value的简写

  1. let title = 'triple body'
  3. return {
  4.   title: title
  5. }

等同于:

  1. let title = 'triple body'
  3. return {
  4.   title
  5. }

分号可以省略

例如： 

  1. var a = 1
  2. var b = 2

等同于：

  1. var a = 1;
  2. var b = 2;

解构赋值

我们先定义好一个hash:

  1. let person = {
  2.   firstname : "steve",
  3.   lastname : "curry",
  4.   age : 29,
  5.   sex : "man"
  6. };

然后，我们可以这样做定义：

  1. let {firstname, lastname} = person

上面一行代码，等价于:

  1. let firstname = person.firstname
  2. let lastname = person.lastname

我们可以这样定义函数:

  1. function greet({firstname, lastname}) {
  2.   console.log(`hello,${firstname}.${lastname}!`);
  3. };
  5. greet({
  6.   firstname: 'steve',
  7.   lastname: 'curry'
  8. });

但是不建议大家这样使用. 有一些奇淫技巧的感觉. 另外,浏览器和一些第三方支持的不是太好,我们在实际项目中,曾经遇到过与之相关的很奇葩的问题.

学习资料

国内比较好的中文教材，是阮一峰编写的 <>. 书中非常详实的阐述了相关的内容，概念和用法。

我们也可以在网上直接查看这本书的电子版： http://es6.ruanyifeng.com