模块化开发发展过程

模块化开发发展过程

一. nodeJs Commonjs规范

以同步模式加载模块

• 一个文件就是一个模块
• 每个模块都有单独的作用域
• 通过module.exports导出成员
• 通过require 函数载入模块

二、AMD规范 require.js

异步加载模式
define定义 require请求

ES modules

1、基本特性

	<!-- 1、ESM自动采用严格模式，忽`use strict` -->
    <script type="module">
        console.log(this) //undefined
    </script>
    <!--  2、每个ES Module 都是运行在独立的私有作用域中-->
    <script type="module">
        var foo=100
        console.log(foo) //100
    </script>

    <script type="module">
        console.log(foo) //undefined
    </script>

    <!-- 3. ESM 是通过 CORS 的方式请求外部 JS 模块的 -->
    <script type="module" src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>

    <!-- 4. ESM 的 script 标签会延迟执行脚本 -->
    <script  type="module" src="demo.js"></script> //等同于js中的defer

2、ES Module 的导入和导出

导出的并不是一个字面量对象
是导出引用关系
导出成员只读 导入不能修改

var name='foo module'

function hello(){
    console.log(`hello`)
}
class Person{}

export {name,hello,Person} //导出

import {name} from './module.js' //导入

//导出重命名 as
export{
    name as default, //设置为default默认导出成员 导入的时候必须重命名 import {default as fooName} from module.js
    hello as fooHello
}
import {fooHello} from './module.js' //导入的是重命名

export default name //默认导出name
import fooName from './module.js'  //导入变量名自定义

3、import注意点

 1、关于路径
	必须要有完整的路径名称
	相对路径的./不能省略
	使用绝对路径、完整的url

2、import {} from './module.js' //只加载模块 不提取成员

3、import * as md from './module.js' //提取所有成员 md.提取指定成员

4、动态导入模块 import只能出现最顶层 不能嵌套 
import('./module.js').then(function(module){
    //返回promise对象 拿到成员
})

5、同时导出默认成员和命名成员
import {name,age,default as defaultName} from './module.js'
import defaultName,{name,age} from './module.js'

4、可以导出导入的成员

export {name} from './module.js'
export {age} from './module2.js'
export {default as fooName} from './module.js' //导出导入带默认成员

5、ES Modules 与 CommonJs

• ES Modules中可以导入CommonJS 模块
• CommonJs中不能导入ES Modules模块
• CommonJS 始终只会导出一个默认成员
• import不是解构导出对象 只是固定语法