模块化(回顾)

概念

模块化的好处：

1. 解决命名冲突
2. 提供复用性
3. 提高代码可维护性

Monorepo项目架构中，打包的时候，可以选择打包方式

"buildOptions": {
  "formats": ["esm-bundler", "cjs"]
}

立即执行函数

iife - 使用立即执行函数实现模块化是常见的手段，通过函数作用域解决了命名冲突、污染全局作用域的问题，会暴露一个全局对象

// JQuery封装
(function (window, undefined) {
    njQuery = function () {
        return new njQuery.prototype.init();
    };
    njQuery.prototype = {
        constructor: njQuery,
        init() { },
    };
    njQuery.prototype.init.prototype = njQuery.prototype;
    window.njQuery = window.$ = njQuery;
})(window);

AMD 和 CMD

目前这两种实现方式已经很少见到，，采用异步方式加载模块，AMD 推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行。sea.js是基于CMD规范

// AMD
define(['./a', './b'], function(a, b) {
  // 加载模块完毕可以使用
  a.do()
  b.do()
})
// CMD
define(function(require, exports, module) {
  // 加载模块
  // 可以把 require 写在函数体的任意地方实现延迟加载
  var a = require('./a')
  a.doSomething()
})

CommonJS

cjs最早是 Node 在使用，服务端渲染

// a.js
module.exports = {
    a: 1
}
// or
exports.a = 1

// b.js
var module = require('./a.js')
module.a // -> log 1

ES Module

esm 是原生实现的模块化方案，兼容es6，会编译成 require/exports 执行

// 引入模块 API
import XXX from './a.js'
import { XXX } from './a.js'
// 导出模块 API
export function a() {}
export default function() {}

类封装

class MVVM{
  constructor(el,data){ //数据模块
    this.el = document.querySelector(el)//要渲染的区域
    this._data = data //数据
    ...
  }
  init(){//init函数管理模块模块
    this.initData()
    this.bindInput(this.el)
    this.bindDom(this.el)
  }
  initData(){ 功能1 }
  ...
}