FE.ES-JavaScript的模块化历史

caoym 发布于2019-08-23 14:39 / 792人阅读

摘要：模块化之前的污染，命名污染命名空间模式减少上变量数量，但仍不安全匿名闭包模式应用由模块组成，采用模块规范。要想让模块再次运行，必须清除缓存。中优先于模块内的其他内容执行。与其对应的值是动态绑定关系，实时取到模块内部的值。

模块化之前的JavaScript

//Global污染，命名污染
function foo(){}

//命名空间 NameSpace模式
var Module= {
    foo: function(){},
}
Module.foo();
//减少Global上变量数量，但仍不安全

//匿名闭包 IIFE模式
var Module = (function(global){
    var _private = $("body");
    var foo = function(){console.log(_private)}
    return {
        foo: foo
    }
})($)
Module.foo();
Module._private; // undefined

COMMONJS

Node 应用由模块组成，采用 CommonJS 模块规范。每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。在服务器端，模块的加载是运行时同步加载的；在浏览器端，模块需要提前编译打包处理。

所有代码都运行在模块作用域，不会污染全局作用域。

模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

模块加载的顺序，按照其在代码中出现的顺序。

//add.js
module.exports.add = function(a, b) {
  return a + b;
};
//main.js
const add = require("./add.js").add;
module.exports.square_difference = function(a, b) {
  return add(a, b) * decrease(a, b);
};

AMD

（Asynchronous Module Definition 异步加载模块定义）
用于浏览器端，异步加载，依赖前置（提前加载）其核心接口是：define(id?, dependencies?, factory)

//require.js
var a = require("./a");
a.doSomething();
var b = require("./b")
b.doSomething();
// AMD recommended style
define(["a", "b"], function(a, b){
    a.doSomething();
    b.doSomething();
})

AMD规范之后又允许输出模块兼容CommonJS规范和依赖后置，代码和下面的cmd一样。

CMD

（Common Module Definition 通用模块定义）
用于浏览器端，异步加载，依赖就近。

//sea.js
define(function(require, exports, module){
    var a = require("a");
    a.doSomething();
    var b = require("b");
    b.doSomething();    // 依赖就近，延迟执行
})

UMD

类似于兼容 CommonJS 和 AMD 的语法糖

(function (root, factory) {
    if (typeof define === "function" && define.amd) {// AMD
        define(["b"], function (b) {
            return (root.returnExportsGlobal = factory(b));
        });
    } else if (typeof module === "object" && module.exports) {// CommonJS. (Node)
        module.exports = factory(require("b"));
    } else {// Browser globals
        root.returnExportsGlobal = factory(root.b);
    }
}(typeof self !== "undefined" ? self : this, function (b) {
    return {};
}));

ES Moulde

import XXX from "./a.js"
export function a() {}
//export default function() {}

对比 CommonJS 和 ES6 循环依赖处理

在 CommonJS 规范中，当遇到 require() 语句时，会执行 require 模块中的代码，并缓存执行的结果，当下次再次加载时不会重复执行，而是直接取缓存的结果。
ES6 中,import 优先于模块内的其他内容执行。export与其对应的值是动态绑定关系，实时取到模块内部的值。

参考资料：
前端模块化详解
模块系统
探索 JavaScript 中的依赖管理及循环依赖

GPU云服务器云服务器云计算的历史 linux历史的书人工智能的历史云服务器的历史

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100946.html

[译]JS 模块化历史简介

摘要：诚然，主要服务于模块和包，由于简单的模块化语法和可复用性，大量和浏览器的包出现在上，也成为世界上最大的包管理器。规范中包含了一个原生的模块化系统，一般称之为。对于 JavaScript 来说，模块化是一个相对现代的概念，这篇文章会带你在 JavaScript 的世界里快速浏览模块化的历史进程~ Script 标签和闭包在早些年间，JavaScript 就是直接写在 HTML 的 ...

bovenson 2019-08-23 18:21 评论0 收藏0
如何用vue打造一个移动端音乐播放器

摘要：写在前面没错，这就是慕课网上的那个音乐播放器，后台是某音乐播放器的线上接口扒取，虽然这类项目写的人很多，但不得不说这还是个少有的适合提升的好项目，做这个项目除了想写一个比较大并且功能复杂的项目，主要原因是要拿它来应对面试，也确实对我的业务能写在前面没错，这就是慕课网上的那个vue音乐播放器，后台是某音乐播放器的线上接口扒取，虽然这类项目写的人很多，但不得不说这还是个少有的适合vu...

lanffy 2019-08-23 10:55 评论0 收藏0
React 历史项目维护与优化实践

摘要：本文介绍了作者接手维护一个中型历史项目时的一系列改进实践，包括模块结构拆分业务逻辑梳理打包优化等。代码中如菜单名称结构表单字段名等的各种硬编码配置分散在各处。最后，在提升面向开发者的打包体验方面，本次优化中主要实现的是与的解耦。本文介绍了作者接手维护一个中型 React 历史项目时的一系列改进实践，包括模块结构拆分、业务逻辑梳理、Webpack 打包优化等。背景这是一个 PC 的...

toddmark 2019-08-20 16:50 评论0 收藏0
Linux系统安全以及相关应用

摘要：如果开启第行和第行，表示只有用户和组内的用户才可以使用命令。应用程序调用相应的配置文件，从而调用本地的认证模块，模块放置在下，以加载动态库的形式进行认证。对账号各项属性进行检查，如是否允许登录系统，帐号是否已经过期，是否达到最大用户数等。 @[toc]1、账号安全控制1.系统账号清理将非登录用户的Shell设为...

junfeng777 2021-11-24 09:39 评论0 收藏0