js模块化规范

介绍

js模块化规范当下最重要的前端开发范式之一
为了解决，作用域，变量冲突，代码组织的问题，早期是没有模块化，随着前端日益复杂，代码组织越来越困难，出现了一系列模块化规范

功能不同，划分为不同模块 ，是一种思想，并不包含实现

演变介绍

1.基于文件划分
最原始 ，单独存放在不同文件，通过script将文件引用到代码中,
 没有私用空间，都是全局变量，容易引起命令冲突，无法管理依赖关系，完全依靠约束

2.命名空间
将每个对象包裹在不同的函数模块内
任然没有私用空间，依赖关系任然没解决

3.IIFE 立即执行函数方式提供私用空间

image.png

标准和规范

1.Common.js

nodejs提出的一套标准，nodejs遵循此规范，通过module.exports导出模块，通过require导入

浏览器使用有问题，通过同步方式加载模块，如果在浏览器中导致降低效率

2.AMD (Asynchronous Module Definition) 异步模块加载规范

request.js实现了AMD规范 强大的模块加载器
AMD使用方式

//定义一个模块  定义一个私有空间
define('module1', ['jqury', './module2' ], function($, moudle2){
  return { // 导出一些成员
      start: function(){
          $('body').animate({ margin: '200px' })
          module2()
        }
   }
}) 

载入一个模块

require(['module1', function(module1){
  module1.start()
}]

目前绝大多数第三库支持AMD规范
缺点：请求次数多，页面效率低

同期一个淘宝推出规范类似AMD
sea.js CMD

目前模块化已经比较成熟，主要浏览器使用 esModule, nodejs使用Common.js

image.png

Common.js nodejs内置的模块系统

esModule
最主流的浏览器模块管理工具
ECMAScript2015(es6)新出的模块规范

esModuel特性

目前大多数浏览器已经支持esModule规范

esmodule导入和导出

module.js
var str = 'esmodule'
export {str}

app.js
import {str} from './module.js'

由于esModule是新出的规范，一些浏览器（IE，国产的小型浏览器）还不支持此规范，所以需要考虑兼容，polyfill
可以使用插件# es-module-loader

image.png

如果ie报不支持promise则还需要引用 promise-polyfill

Tip：生产阶段尽量不要使用，影响页面加载效率

常用的模块化打包工具