模块化演变,ESM基础知识、与Node.js,CMS关系

模块化演变

CommonJS规范

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

因为同步模式加载模块,不适用浏览器,于是出现了
AMD(Asynchronous Module Definition异步模块定义规范)并出现了Require.js,实现了AMD规范,用define定义。但是使用起来相对复杂,模块JS文件请求频繁

EsModule

特性
1,通过给 script 添加 type = module 的属性,就可以以 ES Module 的标准执行其中的 JS 代码了

 

2,ESM 自动采用严格模式,忽略 'use strict'

  

3,每个 ES Module 都是运行在单独的私有作用域中


  

4,ESM 是通过 CORS 的方式请求外部 JS 模块的
5,ESM 的 script 标签会延迟执行脚本

导出

导出的只是一个引用,导出的是存放值得地址

export {name,age}

导入

导入中的from不能省略掉.js文件名,需要填写完整文件路径名。也可以使用完整URL来加载文件.
import不能放在类似if这种嵌套语法中,需要放在文件顶层。如果需要动态加载,使用import()函数,返回一个promise

import('./module.js').then(function(module){
    console.log(module) // 返回对象在module中
})

如果导出内容很多,有多个对象,还有一个default。导入的时候其他对象可以正常导入,如果想导入import成员,需要重命名

export {a,b}
export default "c";

//---------------------
import {a,b default as c} from "module.js"
//或者如下,tilte可以随意命名
import title,{a,b} from "module.js"

导出导入成员

项目中经常会出现一些公用模块,比如component,business,page等类似的公众区域,
使用的时候挨个导入会很麻烦,可以新建一个index.js文件,统一导出

import {comA}  from "./comA.js
import {comB}  from "./comB.js"

export {comA,comB}

ESM兼容性问题

因为市面上存在一些浏览器不兼容ESM,除了webpack打包编译转换为ES5等方式外,有一个浏览器环境polyfill。直接引入unpkg网站的两个cdn链接,IE不支持promise,还需要引入promise的polyfill

   
  
  

如果在script标签中加入module属性,只会在不兼容ESM规范的浏览器中运行

 
                    
                    

你可能感兴趣的:(模块化)