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规范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 通过给script添加type=module属性， 就可以以esModule的标准执行其中js代码 -->
    <script type="module">
        console.log('这是一个esmodue')
    </script>
    <!-- 自动采取严格模式， 忽略 ’use strict‘, 严格模式中，不能再全局直接使用this -->
    <script type="module">
        console.log(this) // undefined
    </script>

    <!-- 每一个ES Module都是运行在单独的私有作用域中 -->
    <script type="module">
        var fot = 100;
        console.log(fot)
    </script>
    <script type="module">
        console.log(fot) // 访问不到
    </script>

    <!-- ESModule 通过CORS 的方式请求外部 JS模块的 -->
    <script type="module" src='https://www.baidu.com'></script>

    <!-- ESModule会延迟执行 脚本 相当于 defer -->
    <script defer type="module"></script>
</body>
</html>

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：生产阶段尽量不要使用，影响页面加载效率

常用的模块化打包工具