JavaScript模块化历程(一)

已于 2023-08-22 18:37:05 修改
阅读量157 收藏
点赞数
分类专栏： JavaScripy 文章标签： javascript 开发语言 模块化
于 2023-08-22 18:36:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/code_liujun/article/details/132432442
版权

文章目录

1. 模块化概述

  • 提高代码的复用性：模块化可以将代码划分成可重用的部分，降低代码的冗余和重复，提高代码的复用性。

  • 简化代码的维护和调试：当一个软件系统变得越来越复杂时，进行模块化开发可以使得每个模块都相对独立，这样就可以方便地维护和调试每个模块，而不必考虑整个系统的复杂性。

  • 提高代码的可读性：模块化可以使得代码更加结构化，清晰明了，从而提高代码的可读性和可维护性。

  • 提高开发效率：模块化开发可以使得团队成员在不同模块上并行开发，从而提高开发效率。

  • 降低项目的风险：模块化开发可以使得开发人员更加关注模块之间的接口和依赖关系，从而降低项目的风险。
    总之，模块化开发是一种有效的软件开发模式，可以提高软件开发的质量、效率和可维护性，特别是在大型软件系统的开发中，模块化更是必不可少的。1

2. 模块化演变2

2.1.文件划分模式(了解)

将每个功能以及它相关的一些状态数据，单独存放到不同的文件当中，我们去约定每一个文件就是一个独立的模块。
我们去使用这个模块，就是将这个模块引入到页面当中，然后直接调用模块中的成员（变量 / 函数）。
一个script标签就对应一个模块，所有模块都在全局范围内工作

缺点:

  • 污染全局作用域
  • 命名冲突问题
  • 无法管理模块依赖关系

示例代码:

// Student.js
var maths = 80;
var chinese = 90;
function score() {
    return maths + chinese;
}

// Cook.js
var name = "煮饭";
function make_food() {
    return new Promise(function (resolve, reject) {
        setTimeout(() => {
            resolve("煮好饭了")
        }, 1000);
    })
}

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件划分模式</title>
</head>
<body>
	<script src="Cook.js"></script>
    <script src="Student.js"></script>
    <script>
        var studentScore = score();
        console.log(studentScore );
		make_food().then((message) => console.log(message));
    </script>

</body>
</html>
2.2.命名空间模式(了解)

我们约定每个模块只暴露一个全局的对象，我们所有的模块成员都挂载到这个全局对象下面。
在第一阶段的基础上，通过将每个模块「包裹」为一个全局对象的形式实现，
有点类似于为模块内的成员添加了「命名空间」的感觉。

  • 没有私有空间
  • 模块成员仍然可以在外部被访问/修改
  • 无法管理模块依赖关系

迪米特法则:又叫作最少知识原则（The Least Knowledge Principle），一个类对于其他类知道的越少越好，就是说一个对象应当对其他对象有尽可能少的了解,只和朋友通信，不和陌生人说话。英文简写为: LOD。

// Student.js
var Student = {
    maths: 80,
    chinese: 90,
    score: function () {
        return this.maths + this.chinese;
    },
    skills: [Cook]
}

// Cook.js
var Cook = {
    name: "煮饭",
    make_food: function () {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                resolve("煮好饭了")
            }, 1000);
        })
    }
}

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>命名空间划分模式</title>
</head>

<body>
    <!-- 在这里因为有引用,顺序不能乱 -->
    <script src="Cook.js"></script>
    <script src="Student.js"></script>
    <script>
        // 我们可以用命名空间来访问属性,成员
        var studentScore = Student.score();
        console.log(studentScore);
        Student.skills[0].make_food().then((message) => console.log(message));
    </script>

</body>

</html>
2.3.IIFE(立即执行函数表达式)和参数依赖声明(了解)

使用立即执行函数的方式，去为我们的模块提供私有空间。将模块中每个成员都放在一个函数提供的私有作用域当中，
对于需要暴露给外部的成员，我们可以通过return的方式实现。确保了私有成员的安全。
有了私有成员的概念，私有成员只能在模块成员内通过闭包的形式访问。
利用立即执行函数的参数传递模块依赖项

立即执行函数 : (function() {})()

// Student.js
; let Student = (function (modules) {
    var maths = 80;
    var chinese = 90;
    var skills = [modules['cook']];
    score = function () {
        return maths + chinese;
    }
    return {
        score,
        skills
    }
})({ cook: Cook }); // 模块的传入

// Cook.js
// 为什么加 ; 
// 怕别的导入的库后面没有加 ";"
; let Cook = (function () {
    var name = "煮饭";
    make_food = function () {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                resolve("煮好饭了")
            }, 1000);
        })
    }
    return {
        make_food: make_food
    }
})();

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立即执行函数</title>
</head>

<body>
    <script src="Cook.js"></script>
    <script src="Student.js"></script>
    <script>
        // 我们可以用命名空间来访问属性,成员
        var studentScore = Student.score();
        console.log(studentScore);
        Student.skills[0].make_food().then((message) => console.log(message));
    </script>

</body>

</html>

3.模块化规范

3.1 CommonJS

一个文件就是一个模块
每个模块都有单独的作用域
通过module.exports导出成员
通过require函数载入模块

缺点:

  • CommonJS的出现本来是为了解决Node.js问题,约定的是以同步模式加载模块，在浏览器端使用会导致效率低下
// Student.js
let cook = require("./Cook")

var maths = 80;
var chinese = 90;
var skills = [cook];
function score() {
    return maths + chinese;
}

module.exports = {
    score,
    skills
}

var name = "煮饭";
function make_food() {
    return new Promise(function (resolve, reject) {
        setTimeout(() => {
            resolve("煮好饭了")
        }, 1000);
    })
}
module.exports = { make_food }

/**
 * 一个文件就是一个模块
 * 每个模块都有单独的作用域
 * 通过module.exports导出成员
 * 通过require函数载入模块
 * CommonJS约定的是以同步模式加载模块，在浏览器端使用会导致效率低下。
 */
let student = require('./Student')
var studentScore = student.score();
student.skills[0].make_food().then((message) => console.log(message));
console.log(studentScore)
Require的基本实现逻辑(重点看)
/**
 * require的基本实现原理
 * webpack打包原理
 */

(function () {
    var modules = {
        "./Cook.js": function (module, require) {
            var name = "煮饭";
            function make_food() {
                return new Promise(function (resolve, reject) {
                    setTimeout(() => {
                        resolve("煮好饭了")
                    }, 1000);
                })
            }
            module.exports = { make_food }
        },
        "./Student.js": function (module, require) {
            let cook = require("./Cook.js")

            var maths = 80;
            var chinese = 90;
            var skills = [cook];
            function score() {
                return maths + chinese;
            }
            module.exports = {
                score,
                skills
            }
        },
        "./main.js": function (module, require) {
            let student = require('./Student.js')
            var studentScore = student.score();
            student.skills[0].make_food().then((message) => console.log(message));
            console.log(studentScore)
        }
    }

    // 为什么多次require只执行一次 因为有缓存
    // 为什么多次require只执行一次 因为有缓存
    var caches = {};
	
	// 基本实现逻辑
	// 基本实现逻辑
    function require(moduleId) {
        if (caches[moduleId]) {
            return caches[moduleId];
        }
        var module = { exports: {} }
        //需要把模块运行一下
        modules[moduleId](module, require);
        caches[moduleId] = module.exports;
        return module.exports;
    }

    require("./main.js")
})();
3.2 AMD

这个规范的出现主要是为了解决在浏览器里面,因为网络慢,加载JS卡顿的问题
作为一个规范，只需定义其语法API，而不关心其实现。AMD规范简单到只有一个API，即define函数：
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

  • module-name: 模块标识，可以省略。
  • array-of-dependencies: 所依赖的模块，可以省略。
  • module-factory-or-object: 模块的实现，或者一个JavaScript对象。
AMD的基本实现逻辑(重点看)
// 缓存 为什么多个require只会执行一次
var modules = {};

// 代码实现页面可能有需要依赖的其他js
// 所以里面也用到了loadScript
function define(name, deps, factory) {
    var pending = deps.length;
    // 创建一个数组 来看看依赖是否全部加载完成
    var resolvedDeps = new Array(pending);

    deps.forEach(function (dep, index) {
        if (modules[dep]) {
            resolvedDeps[index] = modules[dep];
            pending--;
        } else {
            loadScript(dep + ".js", function () {
                resolvedDeps[index] = modules[dep];
                pending--;
                // 这里面是异步执行了的 所以在这里
                // 在if外面都要做一个加载完成的判断
                if (pending === 0) {
                    modules[name] = factory.apply(null, resolvedDeps);
                }
            })
        }

        if (pending === 0) {
            modules[name] = factory.apply(null, resolvedDeps);
        }
    });
}

// 引用的时候也有可能需要依赖其他的js
// 所以在这个里面也用到了 loadScript
function require(deps, callback) {
    var pending = deps.length;
    var resolvedDeps = new Array(pending);

    deps.forEach(function (dep, index) {
        if (modules[dep]) {
            resolvedDeps[index] = modules[dep];
            pending--;
        } else {
            loadScript(dep + ".js", function () {
                resolvedDeps[index] = modules[dep];
                pending--;
                // 这里面是异步执行了的 所以在这里
                // 在if外面都要做一个加载完成的判断
                if (pending === 0) {
                    callback.apply(null, resolvedDeps);
                }
            })
        }
        if (pending === 0) {
            callback.apply(null, resolvedDeps);
        }
    })
}

// 动态加载script的话,并不会让document的渲染进行卡顿
function loadScript(url, callback) {
    var script = document.createElement("script");
    script.src = url;
    // 加载的过程实际就是 执行 define 函数的过程
    script.onload = callback || function () { };
    document.head.appendChild(script);
}

require(["student"], function (student) {
    var studentScore = student.score();
    console.log(studentScore)
})

//student.js
// AMD的实现
define("student", [], function () {
    var maths = 80;
    var chinese = 90;
    function score() {
        return maths + chinese;
    }
    return { score }
});
3.3 CMD

实现逻辑与AMD基本类似,就不写了

4.模块化标准规范

ToDO

  1. 什么是模块化？为什么要进行模块化开发？ ↩︎

  2. 细说前端模块化开发 ↩︎

大大的水壶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习历程和心得小结
10-28
除此之外，学习JavaScript还涉及函数、闭包、原型链、异步编程、模块化开发等多个方面。随着技术的发展，ES6、ES7等新版本的引入带来了箭头函数、Promise、async/await等特性，使得JavaScript的语法更加简洁，同时也...
jQuery公司发展历程时间轴代码
06-24
4. **模块化**：2011年，jQuery 1.5引入了模块化设计，允许开发者按需加载库的特定部分，减少了文件大小，提升了页面加载速度。 5. **向现代Web迈进**：随着HTML5和CSS3的普及，jQuery 2.0在2013年发布，不再支持旧...
JavaScript模块化开发的演进历程
IronKee的博客
12-14 1362
JavaScript模块化开发的演进历程
JavaScript 模块化开发历程
Ni_dhogg的博客
05-17 569
# JavaScript 模块化开发 方式简单化实现     + 模块与模块之间相互协作构成了模块系统 - 程序模块化开发的优点     + 开发效率高         * 代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发类似的功能     + 可维护性高         * 软件的声明周期中最长的阶段其实并不是开发阶段，而是维护阶段，需求变更比较
javascript模块化发展历程
weixin_33968104的博客
07-09 122
什么是模块化 ? 为什么要做Javascript模块化? JavaScript 模块化发展历程 什么是模块化 ? 模块化是一种处理复杂系统分解成为更好的可管理模块的方式，它可以把系统代码划分为一系列职责单一，高度解耦且可替换的模块，系统中某一部分的变化将如何影响其它部分就会变得显而易见，系统的可维护性更加简单易得。 一个模块就是实现特定功能的文件, 逻辑上相关的代码组织到同一个包内，包内是...
理解JavaScript模块化开发
qq191433211的博客
11-03 288
理解JavaScript模块化开发 一、前言 ​ 最近公司有AngularJS项目需要用到我开发的第三方库，我用Webpack将自己的项目打包成一个JS文件，但在引用的时候遇到了一些坑，这篇文章用来梳理一下自己的趟坑之路。在梳理的过程中，了解了JS模块化的进化历程，学习到了CommonJS、AMD规范、CMD规范和ES6模块化等，下面我会根据自己的理解一一介绍。 二、什么是模块化 ​ 还记得刚...
JavaScript 模块化
guoqkmiss的博客
05-11 228
JS 模块化 1、模块化发展历程 IIFE 自执行函数 AMD 使用 requireJS 来编写模块化（依赖必须提前声明好。） CMD 使用 seaJS 来编写模块化（支持动态引入依赖文件。） CommonJS nodeJs 中自带的模块化 UMD 兼容 AMD、CommonJS 语法 webpack(require.ensure)：webpack 2.x 版本中的代码分割 ES Modules： ES6 引入的模块化，支持 import 来引入另一个 js script 标签 type="module"
JavaScript 模块化历程
weixin_34037515的博客
08-29 63
这是一篇关于js模块化历程的长长的流水账，记录js模块化思想的诞生与变迁，展望ES6模块化标准的未来。经历过这段历史的人或许会感到沧桑，没经历过的人也应该知道这段历史。 无模块时代 在ajax还未提出之前，js还只是一种“玩具语言”，由Brendan Eich花了不到十天时间发明，用来在网页上进行表单校验、实现简单的动画效果等等，你可以回想一下那个网页上到处有公告块飘来飘去的时代。 这...
Javascript模块化的演进历程
weixin_33997389的博客
07-19 159
ES2015 在2015年6月正式发布，官方终于引入了对于模块的原生支持，如今 JS 的模块化开发非常的方便、自然，但这个新规范仅仅持续了3年。就在7年前，JS 的模块化还停留在运行时的支持；13年前，通过后端模版定义、注释定义模块依赖。对于经历过的人来说，历史的模块化方式还停留在脑海中，久久不能忘怀。 为什么需要模块化 模块，是为了完成某一功能所需的程序或者子程序。模块是系统中“职责单一”且“可...
JavaScript模块化发展历程
zhenghaohan1999的博客
11-08 348
JavaScript模块化发展历程 原始时期 函数封装 使用函数封装为一个独立作用域 function foo(){ //... } 缺点是会造成全局污染，函数名与所在环境变量名冲突 Namespace 用对象来构造namespace var obj = { a:1 } 缺点是私有成员暴露，内部状态可被外部改写 立即执行函数 使用IIFE构造独立作用域 (function(){ //.....
JavaScript模块化
雨的印记的博客
02-08 82
深度剖析： JavaScript ES5/AMD/CMD/COMMONJS/ES6模块化，提升对前端模块化历程每个阶段的理解与掌握
[removed]javascript用
06-21
4. 模块化：通过CommonJS、ES6模块或Webpack等工具，JavaScript可以组织和管理复杂的代码结构。 5. 前端框架和库：React、Vue、Angular等前端框架以及jQuery等库，都基于JavaScript，提供了更高级的抽象和功能，简化...
JavaScript_有格调地阅读电子书.zip
05-21
其中，ES6引入了类、模块化、箭头函数、模板字符串等，显著提升了代码的可读性和可维护性。 提到JavaScript，我们不能忽视Node.js，这是一个让JavaScript运行在服务器端的平台，基于Chrome V8引擎。Node.js利用非...
study-js-env:一个研究JavaScript近期开发环境的项目
06-25
在JavaScript的发展历程中，模块化变得越来越重要。CommonJS、AMD（Asynchronous Module Definition）和ES6模块是三种常见的模块化解决方案。CommonJS主要用于服务器端，如Node.js环境中，通过`require`和`module....
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 166
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 84
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 872
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
前端javascript中的排序算法之插入排序
峰会路转的博客
07-09 179
【代码】前端javascript中的排序算法之插入排序。
JavaScript快速入门.docx
09-05
"JavaScript快速入门——基础与...随着技能的提升，可以探索更高级的主题，如异步编程、模块化、Promise、async/await等。最后，了解并实践Node.js，将JavaScript的能力拓展到服务器端，将有助于成为全面的前端开发者。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值