V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
yezheyu
V2EX  ›  程序员

最近学习了下前端的模块化,自己做了些笔记,想请大家帮我看看有没有理解错的

  •  
  •   yezheyu · 2023-05-29 10:56:54 +08:00 · 1829 次点击
    这是一个创建于 575 天前的主题,其中的信息可能已经有所发展或是发生改变。

    模块化的发展史:

    • 在单文件的开发中,所以的业务都写在一个文件中,当代码量大时,代码就变得臃长,耦合性高
    • 所以出现了模块化管理,要把业务拆分到一个个文件中,每个文件既是一个模块
    • 同时为了突出模块的一体性,CommonJS 规范中提出包(package)概念,把一组负责相同功能的模块包装在一个文件夹中,用于整体对外提供功能,并使用一个 package.json 文件描述项目信息,并建议使用 bin 目录存放二进制目录,doc 目录存放文档,lib 目录存放 JavaScript 代码,test 目录存放单元测试
    • 为了方便管理包,还开发出了 npm 工具来管理

    对于 node 中的模块化实现,是类似下面这种方式实现的吗?

    实现猜测:node 在内存中使用模块路径作为 key ,模块中暴露的数据(module)作为 value 在内存中生成一个 k-v 内存数据库,把所有暴露的模块数据保存在内存中

    • 当使用 require 函数从数据库中获取路径参数所指定的模块暴露的数据时,先执行指定的模块,把模块包装到一个函数中执行(防止模块中变量暴露为全局变量),如果文件名在数据库中已存在则不执行(防止重复导入)
      // a.js
      console.log(arguments.callee + "");
      
      // 执行 node a.js 的输出是一个函数字符串,说明模块中代码被 node 包装到一个函数中执行
      function (exports, require, module, __filename, __dirname) {
      console.log(arguments.callee+'');
      }
      
    • 并把需要暴露的数据绑定到这个模块(module)的 exports 对象上,保存到数据库中。因为数据库中的数据是导入时才生成,所以很精简
    • 最后获取模块暴露的数据 exports 返回给 require 函数
    5 条回复    2023-05-29 16:16:55 +08:00
    tianzi123
        1
    tianzi123  
       2023-05-29 11:51:35 +08:00
    现在一般用 es 模块化吧,这才是主流啊
    jones2000
        2
    jones2000  
       2023-05-29 12:24:05 +08:00
    以前 1 个前端自己写点 js 代码就可以搞定, 现在变成了 N 个前端+一堆第 3 个方插件来搞, 最后编译完了还是 js.
    cangcang
        3
    cangcang  
       2023-05-29 15:26:45 +08:00
    以前一个农民自己拿镰刀就可以完成收获,现在变成了 N 个农民+一堆机器来搞,最后收获完了还是那堆稻子。
    yishibakaien
        4
    yishibakaien  
       2023-05-29 15:57:29 +08:00   ❤️ 1
    前端不强调模块化,而强调工程化

    前端模块化的方案有很多种,主要是 commonjs esmodule ,主要的作用是把各个功能放在一个个文件中隔离开,并对外暴露,给外部使用,同时便于维护管理

    模块化的目的是为了工程化

    工程化的目的是为了提高应用的可维护性、可迭代性,最终是为了提高效率,降低成本
    insanny
        5
    insanny  
       2023-05-29 16:16:55 +08:00
    可以看下 require 的简易版本实现,理解透了就知道 module 是怎么回事了
    ( node 运行时底层的 nativeModule 和 buitin 也有一套 Module 的模块机制,不过这一块涉及到源码,我看不太懂,看了一会就把自己绕晕了...如果不是很有兴趣不建议花太多时间在这)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3078 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 12:47 · PVG 20:47 · LAX 04:47 · JFK 07:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.