乐趣区

关于前端:现代JavaScript高级教程前端模块化

jiezi
点击在线浏览，体验更好 链接
古代 JavaScript 高级小册 链接
深入浅出 Dart 链接
古代 TypeScript 高级小册 链接

前端模块化

引言

前端开发中，代码的组织和治理始终是开发者面临的一大挑战。随着 Web 利用日益简单，对代码构造和组织的需要也更为显著。这种背景下，模块化编程应运而生，开发者们能够将简单的代码拆分为可治理和可重用的模块。在本文中，咱们将通过理论代码示例，来摸索前端模块化的倒退历程及各种模块化计划的实现原理。

前端模块化的倒退历程

1. 全局函数式编程

在晚期的 Web 开发中，通常应用全局范畴内申明函数和变量的形式来组织代码。例如：

var module1Data = 'module1 data';
function module1Func(){console.log(module1Data);
}

这种形式存在的问题次要有命名抵触、函数间依赖关系不显著、保护艰难等。

2. 命名空间模式

随着对代码组织形式的需要减少，开发者开始通过定义全局对象，将所有函数和变量封装在这个对象中，也就是命名空间模式。

var myApp = {
    module1Data: 'module1 data',
    module1Func: function(){console.log(this.module1Data);
    }
};

这种形式解决了全局命名抵触的问题，然而模块间的依赖关系仍旧不显著，同时所有依赖都须要在命名空间对象中手动治理。

3.CommonJS

CommonJS 模块标准是 Node.js 采纳的标准，应用 require 函数加载模块，通过 module.exports 导出模块。

// a.js
module.exports = 'Hello world';

// b.js
var a = require('./a');
console.log(a); // 输入 'Hello world'

CommonJS 应用同步加载形式，实用于服务器端，但因为网络申请的异步个性，不适宜在浏览器环境应用。

require函数

require函数的次要工作是依据模块的文件门路读取模块文件，而后执行模块代码，最初返回模块的 exports 对象。

require函数的实现代码大抵如下：

function require(modulePath){
    // 读取模块代码
    const code = fs.readFileSync(modulePath);
    
    // 包装模块代码
    const wrapper = Function('exports', 'require', 'module', '__filename', '__dirname', `${code}\n return module.exports;`);
    
    const exports = {};
    const module = {exports};
    
    // 执行模块代码
    wrapper(exports, require, module);
    
    // 返回模块的 exports 对象
    return module.exports;
}

其中，wrapper函数的参数 exports 和module就是模块的 exports 和module对象，这样咱们就能够在模块中通过 exports 和module.exports来导出模块。

require函数在执行模块代码时，会先将模块代码包装到一个函数中，而后调用这个函数。这样做的益处是能够将模块代码隔离到一个函数作用域中，避免模块内的变量净化全局作用域。

module.exports

每个 CommonJS 模块都有一个 module 对象，这个对象有一个 exports 属性用于导出模块。当其余模块通过 require 函数加载这个模块时，就能够获取到 module.exports 对象。

module.exports的初始值是一个空对象 {}，咱们能够增加属性到这个对象上，也能够间接将module.exports 赋值为一个函数或其余类型的值。

例如，以下代码展现了如何应用 module.exports 导出一个函数：

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

// b.js
const a = require('./a');
a(); // 输入 'Hello world'

以上就是 CommonJS 模块的实现原理。尽管 CommonJS 次要用于服务器端，但其模块化思维和实现形式对于前端模块化的倒退有着深远影响。

4.AMD（Asynchronous Module Definition）

AMD 标准是由 RequireJS 提出的，特点是异步加载模块，适宜用在浏览器环境。

// AMD
define(['dependency'], function(){return 'module content';});

AMD 标准的语法较为简单，但能在浏览器环境中异步加载模块。

5.UMD（Universal Module Definition）

UMD 标准试图提供一种解决方案，让同一段代码在 CommonJS 和 AMD 环境中都能运行。

(function (root, factory) {if (typeof define === 'function' && define.amd) {
        // AMD
       

 define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS
        module.exports = factory(require('jquery'));
    } else {
        // 浏览器全局变量
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {// 模块代码}));

UMD 通过判断环境中是否存在 define 和exports对象，来判断是哪种模块环境，从而应用对应的模块化计划。

6.ES6 模块化

ES6 模块化是 ECMAScript 6（ES2015）中新引入的模块零碎，应用 import 关键字加载模块，通过 export 关键字导出模块。

// a.js
export const a = 'Hello world';

// b.js
import {a} from './a.js';
console.log(a); // 输入 'Hello world'

ES6 模块化具备动态性，这种动态性质让依赖关系更加显著，有利于工具进行优化。此外，ES6 模块是异步加载，也适宜在浏览器环境中应用。

论断

模块化是前端开发中的一种重要的编程思维，它让代码组织更加清晰，便于保护和重用。通过多年的倒退，前端模块化计划曾经从简略的全局函数，倒退到以后的 ES6 模块化。每一种模块化计划都有其实用场景，抉择哪种计划次要取决于我的项目的需要。了解不同模块化计划的实现原理，能够帮忙咱们更好地应用和抉择这些工具。

退出移动版