ES6的模块化

ES6的模块化一般不会独立运行,是在框架语法中配合框架语法使用

特点

ES6的模块化 必须通过服务器运行

是官方定义的模块化开发程序 
不需要导入独立的外部文件

导入整合模块的script标签 必须要添加 `type="module"` 属性

基本语法

独立模块

    设定变量函数

    export default { } 
        以 一个对象作为整体导出数据

依赖模块

    import 变量 from '导入模块的路径' ;
        将 导入模块中的导出数据 以对象形式 存储到设定变量中


整合模块
    import 变量1 from '导入模块的路径' ;
    import 变量2 from '导入模块的路径' ;
    ...


导入语法2
    export 变量... ;
    export 数据... ;

        独立导出一个或者多个数据 

    import { 变量名1 , 变量名2 ... } from '导入模块的路径' ;

        使用 解构赋值语法 将 模块独立导出的变量数据 
        存储到 设定 的变量名称中

    独立导出的变量名称 和 import {} 解构的变量名称必须一致

html文件

    <!-- 导入整合模块外部文件 script标签 必须要添加 type="module" -->
   <script src="./c.js" type="module"></script>
   <script src="./e.js" type="module"></script>

独立模块

// 独立模块

// 直接定义数据和函数方法

// 定义数据和函数方法等
let name = '张三';
let age = 18;
let sex = '男';

const arr = [100, 200, 300, 400];
const obj = { addr: '北京', phone: 123456, email: '123@qq.com' };

function fa1() { };
function fa2() { };
function fa3() { };

// 导出这个模块的数据和函数方法
// 以 一个对象 整体导出设定的数据
export default { name , age , sex , arr , obj , fa1 , fa2 , fa3 };

依赖模块

// 依赖模块
// 需要依赖模块A中的数据

// 导入模块A的数据
// 将 导入的模块A 的数据 存储到设定的变量 valA 中
import valA from './a.js' ;

let name = '李四' ;
let age = valA.age - 5 ;
let sex = '女' ;

const arr = valA.arr.map( item => {

    return item / 100 ;

})

const obj = valA.obj ;

function fb1 (){}
function fb2 (){}
function fb3 (){}
function fb4 (){}

export default { name , age , sex , arr , obj , fb1 , fb2 , fb3 , fb4 } ;

整合模块

// 整合模块
// 导入 模块A 模块B

import valA from './a.js' ;
import valB from './b.js' ;

console.log( valA );
console.log( valB );

其他用法

// 设定那个 就导出那个

let name = '张三';
export let age = 18;
let sex = '男';

export const arr = [100, 200, 300, 400];
export const obj = { addr: '北京', phone: 123456, email: '123@qq.com' };

function fa1() { };
function fa2() { };
function fa3() { };

// 使用结构赋值语法形式 存储 模块D 导出的独立的数据
// 将 模块D 中 独立导出的数据 以结构语法形式 独立存储到变量中
import { age , arr , obj } from './d.js' ;

ES6模块化

ES6的模块化

特点

基本语法

其他用法