大前端架构设计与疑难技术解决方案

模块化与组件化实现方案

重要通知

。

基本概况

  • GitHub：https://github.com/seajs/seajs
  • 官网：https://requirejs.org/
  • GitHub：https://github.com/requirejs/requirejs

模块导出综合方案

(function(global, factory) {
  /**
   * 上下文环境
   * 根据不同环境导出函数
   */

   //node环境
   if (typeof exports === 'object' && typeof module !== 'undefined') {
    module.exports = factory();
     return ;
   }
   //AMD
   if (typeof define === 'function' && define.amd) {
    define(factory);
     return ;
   }
   //CMD
   //指定作用域对象, 此处假设我的类库就Ysun, 然后抛出全局对象
   global.Ysun = factory();
})(this, function() {
  'use strict';
});

模块化组件设计

ES Module(esm) 模块

// 示例一 a.js
export function run() {}

import { run } from 'a.js';





// 示例二 b.js
export default {}

import { default as A } from 'b.js';
import A from 'b.js';





// 示例三 c.js
function A() {}
export { A as B };

// 
import * as A from '';





// 示例四
// moduleA.js
export const functionA = () => {
  console.log('Function A');
};

// moduleB.js
export const functionB = () => {
  console.log('Function B');
};

// index.js
export * from './moduleA';
export * from './moduleB';

// main.js
import { functionA, functionB } from './index';
functionA(); // Output: Function A
functionB(); // Output: Function B

CommonJS

// 示例一
// a.js
exports.run = function() {}

// b.js
const animal = require('a.js'); 
animal.run();





// 示例二
// a.js
module.exports = function() {
  this.version = '1.0.0';
  this.run = function() {}
}

// b.js
const Animal = require('b.js'); 
const animal = new Animal();
animal.run();

CMD 模块

CMD(Common Module Definition) ，即同步模块定义。

define(function(require, exports, module) {
  // The module code goes here
});

SeaJS

AMD 模块

AMD（Asynchronous Module Definition），即异步模块定义，指定了一种用于定义模块的机制，以便可以异步加载模块及其依赖项。这特别适用于同步加载模块会产生性能、可用​​性、调试和跨域访问问题的浏览器环境。

  • 基本特征：提前执行、依赖就近。
  • 实现AMD的库有RequireJS 、curl 、Dojo 、bdLoad、JSLocalnet 、Nodules 等。

RequireJS

  • 官网：https://requirejs.org/
  • RequireJS，从 2.0 开始，也改成可以延迟执行。
define(id?, dependencies?, factory);

UMD 模块

UMD（Universal Module Definition），即通用模块定义规范。

((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
});

ES Module

export function run() {}

import { run } from '';


  // basic.js
  export default var c = "error"; 

  // app.js
  import app from "basic.js";
  console.log(app.c);
</script>

# export 与 import：
// basic.js
let name = 'Ysun';
let sex = '男';
export {
  name,
  sex as sx,
}

// app.js
import { name } from "basic.js";



// 类型一：/utils/plugins.js
export default {
  add() {
    console.log("add");
  }    
}
// 整体文件导入
import plug from "plugin.js";
plug.add();

// 空的导入(Empty Import)
import './module.js';



// 类型二：/utils/plugins.js
export let name = "import 与 export模块";
export function add() {
  console.log("add");
}
// 按需导入模块
import { name, add } from "plugin.js";
add();  //add

// 导出所有模块 | 存在污染其他变量予函数的可能
import * from "@/plugin.js";
console.log(plug.name);  // import 与 export模块
plug.add();              //add





// 类型三：/utils/plugins.js
export { default } from './src/toast.js';
//等价于
import toast form './src/toast.js';
export default toast;

import { Students: { Student } } from 'School';

// test.js
export const name = 'Eshen';
export function print() {};
// app.js
import { print } from 'path'
import { print as Printname } from 'path'  // 重命名模块
import * as Action from 'path'  // 合并导出：Action.name | Action.print


// test.js
export default {
  name: ''
}
// app.js
import obj from 'path'  
// as 的用法
import obj as obje from 'path';
// default as user
import { default as User } from 'path';

obj.name


// 动态加载模块
import('/modules/myModule.mjs')
  .then((module) => {
    // Do something with the module.
  });


export { name, sex }

CMD

CMD(Common Module Definition) 同步模块定义

同步加载 实现案例：SeaJS是一个遵循CMD规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。

SeaJS

延迟执行

AMD

AMD（Asynchronous Module Definition）异步模块定义 异步加载 将 JavaScript 代码封装进一个个模块，对全局对象的依赖变成了对其他模块的依赖，无须再声明一大堆的全局变量。 通过延迟和按需加载来解决各个模块的依赖关系。 模块化的 JavaScript 代码好处很明显，各个功能组件的松耦合性可以极大的提升代码的复用性、可维护性。 这种非阻塞式的并发式快速加载 JavaScript 代码，使 Web 页面上其他不依赖 JavaScript 代码的 UI 元素，如图片、CSS 以及其他 DOM 节点得以先加载完毕，Web 页面加载速度更快，用户也得到更好的体验。

RequireJS

提前执行、依赖就近，异步按需加载 作为统一的加载器来加载其他框架 RequireJS 是一个非常小巧的 JavaScript 模块载入框架，是 AMD 规范最好的实现者之一。

define(id?, dependencies?, factory);

UMD

UMD（Universal Module Definition）通用模块定义规范 | CommonJ 它可以通过运行时或者编译时让同一个代码模块在使用 CommonJs、CMD 甚至是 AMD 的项目中运行 同步加载

module.exports = function() {}
export.run = function() {}

const Animal = require('url');

node.js require加载机制

// basic.js
exports.world = function() {
  console.log('Hello World');
}

// app.js
var { world } = require('basic.js');
world();



// basic.js
module.exports = function() {
  console.log('Hello World');
  this.run = function() {
    console.log('');
  }
}

// app.js
const Basic = require('basic.js');
Basic();

const basic = new Baisc();
Basic.run();



export.world = function() {
  //
}
// var hello = require('./hello');
// hello.world();


module.exports = function() {
  var name; 
  this.setName = function(thyName) { 
      name = thyName; 
  }; 
  this.sayHello = function() { 
      console.log('Hello ' + name); 
  }; 
}

// var Hello = require('./hello'); 
// hello = new Hello(); 
// hello.setName('BYVoid');
Last Updated:
Contributors: 709992523, Eshen