模块化开发

模块化开发

模块化开发规范

commonJS in node.js

commonJS规范：同步模式加载模块，导致效率低–node.js环境
一个文件就是一个模块
每个模块都有单独地作用域
通过module.exports导出成员
通过require函数载入模块

AMD(Asynchronous Module Definition)规范：
使用相对复杂
模块JS文件请求频繁

require.js定义，加载模块

//定义一个模块
define('module1【模块名】',['jquery【依赖1】','./module2【依赖2】'],function($,module2){//一一对应依赖导出名
   return {
     start:function(){
       $('body').animate({margin:'200px'})
       module2()
     }
   }
})

//加载模块
require(['./module1'],function(module1){
  module1.start()
})

sea.js+CMD规范【类似CommonJS规范】:

define(function(require,exports,module)){
  //require引入依赖
  var $ = require('jquery')
  //通过exports或module.exports对外暴露
  module.exports = function(){
     console.log(module2)
     $('body').append('<p>module2</p>')
  }
}

ES Modules in Browser

ESM特性

通过给script标签添加type = module属性,就可以用ES Module 标准执行其中JS代码
特性：
1.ESM自动采用严格模式。忽略use strict
2.每个ES Module模块都是运行在单独的私有作用域中
3.ESM是通过CROS方式请求外部JS模块
4.ESM的script标签会延迟执行脚本：等待渲染完成后执行脚本，首先显示页面元素

ESM导入导出

export{变量1，变量2}:导出变量值，无法在import文件中修改
import {变量1，变量2} from ‘模块1

ESM浏览器环境polyfill

IE浏览器不支持 ES Module 的script标签
script 标签引入es-module-loader模块，使IE兼容module特性
src= https://unpkg.com/browse/browser-es-module-loader@0.4.1/dist/babel-browser-build.js
src= https://unpkg.com/browse/browser-es-module-loader@0.4.1/dist/browser-es-module-loader.js
src = https://unpkg.com/promise-polyfill@8.2.0/dist/polyfill.min.js 兼容promise特性

ESM在node.js中使用

1.修改js文件后缀为.mjs，新版本ESM可通过在pakage.json文件中配置type = 'module’实现，不用修改后缀名为mjs
2.启动js文件：node --experimental-modules index.mjs【文件名】
注意：import导入不支持第三方模块，因为第三方模块导出默认成员default
允许通过import方式提取系统内置成员，因为内置模块兼容ESM提取成员方式

ESM在node环境中使用CommonJS

1.ESM支持导入CommonJS模块，但导入默认成员：import 模块1 = ‘模块url’
2.CommonJS不能通过require导入ESM模块
3.CommonJS始终导出默认成员
4.import不是结构导出成员
5.使用区别：

常用的模块化打包工具

基于模块化工具开发现代web应用

打包工具的优化技巧