大前端技术生态体系

切换至深色主题

模块化与组件化实现方案 ​

重要通知

。

基本概况 ​

模块导出综合方案 ​

(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 ​

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');

Released under the MIT License.

焰光实验室版权所有 | Copyright © 2022-present 王军