模块化 --- day01 | 易学教程

webpack 和 rullup都是打包工具：

　　webpack倾向于应用程序的打包

　　rollup更适合在文件打包方面，例如 jq库， vue代码库等

模块化是模块编程思想的体现，在开发环境中，通过本地启用server方式的开发；例如 nodejs

在浏览器环境中是不能直接支持的或者存在兼容问题，这需要一个打包工具使打包后的代码可以在浏览器环境中良好运行。（打包成静态代码）

模块化的核心：

　　1. 独立的作用域

　　2.导出模块内的数据（模块数据的输出）

　　3.引入模块内的数据

　　2和3合起来是模块数据的导出和利用

commonJS 规范

　　核心：

　　　　独立作用域：一个文件是一个模块（通过直接读取硬盘文件实现，如Nodejs通过文件系统实现）

　　　　导出模块内的数据： module.exports 或 exports 导出数据 ---> 每个文件都有一个 module 对象，导出的数据挂载在上面

　　　　引入模块内的数据： let a = require("./a.js"); ---> 引入的是导出的数据

　　对比：

　　　　数据：

　　　　　　后端同步加载，文件系统；

　　　　　　web ajax 异步加载

　　　　nodeJS 文件系统、I/O操作及net操作等在浏览器中无法实现

　（此规范无法在浏览器中实现，只有另外制定了一套规范）；

WEB模块化规范：

　　AMD UMD ESM

CMD 叫做通用模块定义规范（Common Module Definiton），它是类似于 CommonJs 模块化规范，但是运行于浏览器之上的

　　淘宝玉伯的 SeaJS 库

　　CMD 规范拥有简单、异步加载脚本、友好的调试并且兼容 Nodejs

　　define(function(require, exports, module) {
　　　　var a = requrie("./a");
    　　module.exports = { 
        　　a: 1,　　　　　　b: a
    　　};

　　});

AMD 异步模块定义

　　requireJS库（开发需要有服务端环境才能运行） define定义模块 require引入模块

　　引入代码库：　　<script data-main="./main.js" src="./vendors/require.js"></script> ---> 是独立与浏览器之外的，server

　　data-main: 项目的入口文件名字路径， 当 requirejs 库加载完后会自动加载入口文件；（head中会自动通过 script 标签 引入入口文件）  模块的定义：　　　　define()方法定义模块，　　　　　　define({a:1, b:2, c:3})  ---> 可以是直接一个对象，导出的是一个对象　　　　　　define(function(){  return obj })   --->  通过回调函数 必须有 return 　数据的导出： 　　　　同模块的定义  数据的引入：

　　　　静态引入：define(["./a","./b"],function(a,b){ console.log(a, b)})     依赖前置　　　　动态引入： define(function(requrie){ let a = require("./a"); console.log(a) });  需要时require

　模块的配置：require.config 方法

　　　　　require.config({
   　　　　 paths: {
   　　　　     jquery: 'jquery.min'
   　　　　 }
　　　　  });

UMD ：通用模块定义规范（Universal Module Definition）

　　　　同一个 JavaScript 包运行在浏览器端、服务区端等（符合多端规范）

　　　　（它没有自己专有的规范，是集结了 CommonJs、CMD、AMD 的规范于一身）

　　((root, factory) => {
    　　if (typeof define === 'function' && define.amd) {
        　　//AMD
        　　define(['jquery'], factory);
    　　} else if (typeof exports === 'object') {
        　　//CommonJS
        　　var $ = requie('jquery');
        　　module.exports = factory($);
    　　} else {
        　　root.testModule = factory(root.jQuery);
    　　}
　　})(this, ($) => {
    　　//todo
　　});

ESM

　　es6 module ：静态加载，export 和 export 不能出现在判断等动态语句

　　　　　　　　　获取的是模块接口的引用（模块内数据发生改变，接口引用数据也会改变）

　　　　　　　　　commonjs中获得的是接口运行结果的缓存
　　　　　　　　　es6 module内部自动采用严格模式

=====================没有从语言层面上根本解决模块化问题（独立作用域、默认严格模式）=================================================

来源：https://www.cnblogs.com/baota/p/12381401.html

标签

模块化