JS 模块化- 01 模块化前传（举例：高质量男和拼团名媛相亲）

最新推荐文章于 2024-07-10 14:03:37 发布

程序员优雅哥

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量286

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/youyacoder/article/details/126958928

版权

JS 模块化 01 - 模块化前传

前端技术的发展不断融入了很多后端的思想，逐步形成前端的 ”四个现代化“：工程化、模块化、规范化、流程化。这个主题介绍 模块化 ，主要内容包括模块化前传（早期模块化的实现）、模块化的四个规范（Common JS、AMD、CMD、ESM）。本文就聊聊早期的模块化。

1. 原始时代 - 无模块

十多年前，工程师们一般都不好意思说自己会 JS 语言，太 Low逼 —— 大神们随便翻翻书，几下就可以把什么元素显示隐藏、表单校验等需求的 JS 脚本写出来了。反正在这群家伙眼里，写 JS、CSS 的人不是程序员，而是美工（仅仅是在过去的那个年代二逼们才会这么说）。代码中都从到尾都是逻辑代码，一堆变量函数和流程控制语句（ if/else/for/switch… ），JS 脚本是从上到下顺序执行，反正功能给你堆出来了，至于会带来什么后果，关我屁事，有接盘侠去弄。。。

二逼的人直接就在 HTML 文件中写 JS 代码；自我感觉良好一些的大神就独立一个 JS 文件，然后在 HTML 页面上通过

例如人类高质量男士阿三和拼团名媛阿花相亲，无模块时代就会这么写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块化 - 无模块化的原始时代</title>
</head>
<body>
<h1>模块化 - 无模块化的原始时代</h1>
</body>
<script>
    /** 人类高质量男士-姓名 */
    let manName = '阿三'

    /** 人类高质量男士-自我介绍 */
    function manIntro() {
     
        console.log('我是人类高质量男士，我叫', manName)
    }

    /** 拼团名媛-姓名 */
    let womanName = '阿花'

    /** 拼团名媛-自我介绍 */
    function womanIntro() {
     
        console.log('我是拼团名媛，我叫', womanName);
    }

    /** 约会 */
    function dating () {
     
        console.log('在无模块化的原始社会')
        console.log('两人开始约会....')

        manIntro()
        womanIntro()
    }

    // 调用约会函数，让两人真正开始约会
    dating()
</script>
</html>

在浏览器中直接运行，浏览器控制台显示结果：

在上面的代码中，如果 dating 函数定义在 manIntro 函数或 womanIntro 前，就会执行失败。所以 JS 的执行顺序是非常重要的。

2. 石器时代 - 全局函数

后端大神写后端代码，大多围绕着类和对象展开，每个类都可以写在一个独立的文件中，还能提取一些公共的工具类之类的，于是他们就想这个思路能否用于 JS 呢？于是就诞生了全局函数方式。

将不同功能的函数和变量拆分到不同的 JS 文件中，在入口 HTML 文件中按照顺序，通过 script 标签依次引入这些 JS 文件。

于是案例就可以抽取为三个 JS 文件：人类高质量男士 - man.js，拼团名媛 - woman.js，约会 - dating.js。这三个 JS 文件就是石器时代模块化的雏形了。代码实现如下：

人类高质量男士 man.js

最低0.47元/天解锁文章

程序员优雅哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS 模块化- 01 模块化前传（举例：高质量男和拼团名媛相亲）

前端技术的发展不断融入了很多后端的思想，逐步形成前端的 ”四个现代化“：工程化、模块化、规范化、流程化。这个主题介绍模块化，主要内容包括模块化前传（早期模块化的实现）、模块化的四个规范（Common JS、AMD、CMD、ESM）。本文就聊聊早期的模块化。
复制链接

扫一扫