第三节：ES6模块化历史 及 默认、按需、直接导入导出、Vue单文件

一. 模块化历史

1. 浏览器端模块化

(1). AMD(Asynchronous Module Definition,异步模块定义) ：代表产品为：Require.js 

(2). CMD(Common Module Definition,通用模块定义) ：代表产品为：Sea.js

2. 服务器端模块化

服务器端的模块化规范是使用CommonJS规范：

(1).使用require引入其他模块或者包

(2).使用exports或者module.exports导出模块成员

(3).一个文件就是一个模块，都拥有独立的作用域

3. 大一统的ES6模块化

(1).每一个js文件都是独立的模块

(2).导入模块成员使用import关键字

(3).暴露模块成员使用export关键字

PS: 推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范. 

二. ES6模块化

1. 默认导入、导出

导出：

//1. 默认导出
//注意：：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象 
let a=1;
let b=2;
function Add(m,n){
    return m+n;
}
export default{
    a,
    b,
    Add
}

导入：

//1. 默认导入
import moudleA from "./05-ES6ModuleA.js";

console.log('--------------下面执行默认导入的成员----------------------');
console.log(moudleA.a);
console.log(moudleA.b);
console.log(moudleA.Add(5,6));

2. 按需导入、导出

导出：

export let num = 998;
export let myName = "jack";
export function Say() { console.log("Hellow World") }

导入：

//2. 按需导入
import {num as num1,myName,Say} from "./05-ES6ModuleA.js";

console.log('--------------下面执行按需导入的成员----------------------');
console.log(num1);
console.log(myName);
Say();

3. 直接运行

直接运行js

//直接运行
import './Temp/11.js';

注：如何运行呢？

　nodejs中不能直接执行ES的模块化写法，需要npm init一下，然后在package.json中，加上一句话：  "type": "module",  

补充匹配规则 ：

(1). 如果是完整路径，则直接引入 。eg：import moudleA from "./find.js";

(2). 如果不是完整路径，比如：import mA from  './find'

　A. 先找同名的js文件，即找 find.js

　B. 如果找不到，再找find文件夹，找到后，再匹配find文件夹中的index.js文件。

　C. 如果找不到index.js文件，会去当前文件夹中的package.json文件中查找main选项中的入口文件。

　D. 全都没有的话，则报错。

三. Vue单文件

1. 传统Vue组件的缺陷

　 全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持css(当html和js组件化时，css没有参与其中)  没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）

2. 解决方案

　使用Vue单文件组件，每个单文件组件的后缀名都是.vue 每一个Vue单文件组件都由三部分组成

(1).template组件组成的模板区域

(2).script组成的业务逻辑区域

(3).style样式区域

代码如下： 

<template>

    组件代码区域

</template>

<script>

    js代码区域

</script>

<style scoped>

    样式代码区域

</style>

!

• 作       者 : Yaopengfei(姚鹏飞)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
• 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。