1 2 3 4

ES6简单扩展和单文件组件

 

 es6简介

ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现

ES6新特性

多样化的声明方式
1. var
2. let
3. const
4. function
5. import
6. class

Babel

Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。 这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});

 

 let

ES6新增了let命令,用于声明变量,用let声明的变量,只在let命令所在的代码块内有效

let其实是为JavaScript新增了块级作用域。在之前的js中没有块级作用域,只有函数能够产生作用域!

 

 

const

常量:不变的量

什么是不变的量,与变(var/let)的区别

字符串扩展

在原先js的基础上增加了一些新的方法,扩展了一些新的功能
最好用的莫过于模板字符串,大大简化了我们的书写方式

 

函数扩展

 

module语法

历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。 其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import, 但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。 ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

 

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量

数组的扩展

 

 
 

数值的扩展

单文件组件

单文件组件:就是将我们的组件部分单独抽取到一个.vue文件
通过单文件组件的方式,可以完美的解决上述问题

 简单的单文件组件示例

 复杂页面的组件化开发

模块分离的思想
将一个个单独的功能模块抽取成一个个单文件组件进行使用
  1. 在较大项目中降低文件结构的复杂度
  2. 便于页面内容的修改,也就是更新迭代,在修改文件内容的时候直接查找对应的单文件组件,变得更方便
  3. 最重要的一点,对于一些多次使用的组件,我们可以单独将其抽取,使用的时候直接调用,实现组件的复用
在主页面,将整体的功能结构划分成头部----主体----底部三部分,每一部分提取成一个组件,具体实现如下

完整功能的实现,完善App.vue和main.js

 

 
posted @ 2018-04-24 20:34  Winner.王  阅读(1738)  评论(0编辑  收藏  举报