# 模块化是什么

所谓模块化,就是指根据功能的不同进行划分,每个功能就是一个模块。最终,一个完整的产品是由各个模块组合而成的

  • 独立性。可以针对一个模块单独进行设计、研发,相对工作量和难度变小。

  • 复用性。一些通用模块(例如登录或注册)可以被重复使用,而不用每次重新开发。

  • 解耦性。模块与模块之间,将相互影响降到最低,使得更换、升级或添加某个模块,不影响其他模块的工作。

  • 灵活性。通过选择和组合不同的模块,可以快速构建一个新的产品。

# ES5 中的模块化

  1. 函数的封装
    • 每个函数的作用域仅在内部有效
    • 函数作用域之间没有关系,低耦合
    • 污染全局命名空间
  2. 对象封装
    • 两个对象相互之间是独立的,低耦合
    • 全局与用语中可以随意修改
  3. 自调函数
    • 低耦合
    • 在全局作用域中无法访问自调函数内部的函数或方法
  4. 自调函数配合全局对象

# ES6 中的模块化

当使用 JavaScript 文件当作是一个模块

  • 当前 JavaScript 模块文件自动开启严格模式
  • 使用 export 命令将当前模块内容导出

export 导出

var v = 100;
const c = 1000;
function fn() {
  return "666";
}
export { v, c, fn };

import 导入

import { v as n, c, fn } from "./9. ES6中的模块化-export";
// 允许使用别名
console.log(n, c, fn);

存在不支持的情况,所以运行可能失败。

# RequireJS

  1. 引入 requireJS

    <script async='true' defer src="https://cdn.bootcdn.net/ajax/libs/require.js/0.10.0/require.min.js"></script>
    • async

      表示异步加载

    • defer

      兼容 IE 浏览器

  2. 引入主模块

    为上一步引入的 script 标签添加自定义属性 data-main ,其值为主模块。

    <script data-main="./requireJS/index.js" async='true' defer
     src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
  3. 定义模块

    编写模块用到的函数为 define() 函数,其定义方式有多种:https://www.html.cn/doc/requirejs/

    // 模块文件
    define(function () {
      return "Hello RequireJS";
    });
  4. 引入模块

    利用 require.config() 函数对模块加载自定义

    // 主模块
    // 对模块加载进行自定义
    require.config({
      paths: {
        hello: "./moudle",
      },
    });
    // 加载指定模块 - require (names,callback)
    //names: 数组类型 加载模块的名称
    //callback: 回调函数,将加载完毕的模块结果进行处理
    require(["hello"], function (value) {
      console.log(value);
      var h1 = document.createElement("h1");
      h1.textContent = value;
      document.body.appendChild(h1);
    });

    image-20201028095422941

# SeaJS

官方网站:http://seajs.github.io/seajs/docs/

  1. 引入 script 标签

    <script async='true' src="./seaJs/index.js"></script>
  2. 编写模块

    // 模块文件
    /**
     * @param {any} require 用于导入其他模块
     * @param {any} exports 用于导出当前模块
     * @param {any} moudle moudle.exports 用于导出当前模块
     * @returns {any}
     */
    define(function (require, exports, moudle) {
      exports.hello = "Hellp SeaJS!";
    });
  3. 配置

    seajs.config({
        bash: './seaJs/',
        paths: {
            moudle: 'moudle'
        },
        alias: {
            'hello': 'moudle'
        }
    })
    seajs.use('hello', function (value) {
        var h1 = document.createElement("h1");
        h1.textContent = value.hello;
        document.body.appendChild(h1);
        console.log(value);
    })
更新于

请我喝[茶]~( ̄▽ ̄)~*

Dreamy.TZK 微信支付

微信支付

Dreamy.TZK 支付宝

支付宝