ES6简单扩展和单文件组件

Posted 2020-11-01 winner-one

 

 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