• 深入理解模块化


    一.为什么会出现模块化,模块化的由来
    1.一个函数,只需要考虑函数内作用域
    2.然后把把变量往上提,就出现变量容易污染,就出现模块化解决变量的作用域
    3.给一个合理的方式管理函数的变量和作用域,可以将关联的函数和变量聚集在一块
    4.用闭包自执行

    5.CommonJs,同步的,常用在node服务器,因为可以直接读磁盘

    6.AMD是异步,因为浏览器是需要网速支持,要是等待执行的话,必须要采用异步加载的模式,不然会出现阻塞假死

    7.webpack其实就是模拟一个node服务器来搭建一个本地服务

    8.babel本质是做语法转换的

    9.循环引言因为引用的拷贝的值

    10.common 输出一个值后,后面的值影响不好

    11.amd是老外提的

    12,尽量静态化,使得编译时就能确定模块的依赖关系,提前预制好出来的

    13.CommonJS 模块是运行时加载,ES6 模块是编译时输出接口

    ESM工作流程

    1.先生成依赖关系图,并暴露字段名
    2.将模块的记录存储起来
    3.模块的实例包括模块的源码和模块状态,状态是指我们将变量和函数存储在内存中的,从而提高了引用的效率,其实就是搭了内存的光,吃内存模式,吃内存赋予一种本地服务化的能力,现代的前端就是利用偷取服务端的能力,服务端的能力就是存储变量的能力

    三个阶段怎么执行,esm只定义标准

    变量其实只先标记没有赋值,只是先产生索引

    esm是异步的,因为构建,实例化和求值,他是在分别的时机完成的

    commonJs,他的模块和他的依赖一次性构建,随时使用,随时销毁,不做滞留,代表一种执行动作多一些,服务端的职能是一种动态指令的结合

    esm是用来描述不同的文件状态,赋予前端多态的能力

    浏览器下载文件可能需要很长时间,像这样阻塞主线程会使使用模块的应用程序使用起来太慢。这也是ES模块规范为什么将算法分成多个阶段的原因

    esm才用模块化规范将算法分成多个阶段,

    commonjs 只有在运行是知道有没有模块

    esmodule 不允许直接命令变量 是一个求值阶段

    静态解析?

    ESM动态import采用import()去实现动态调用,返回一个promise,即动态导入的模块可以再进行另外的动态的导入

    .mjs扩展名来标识这个文件是一个ESM

    设计哪些是异步等待回调

    哪些是等一个东西强制完成再完成另外一个的同步

    esm是一种预制菜,提前暴露好

    comomjs是直接炒菜直接吃

    后缀名mjs对应ESM,那么cjs就对应了CommonJS

    require、__dirname 、 __filename将无法使用,因为这是node环境注入的

    1.引用化模块解析成模块记录,都是有映射关系

    2.实例化,存在内存上的,实例化就是把方法,就是变量与内存的链接,描述各种值在内存中记录,而且是以二进制的方式读写的

    JS引擎会创建一个模块环境记录(上下文)来管理模块记录中的变量

    commonJS后面的值是改变不了前面的值,导致他不是动态的,因为他的内存地址不同

    求值是代码的真实值

    上下级模块的export和import都指向同一个内存地址

    commonjs指向是同一个值

    连接就是关系,就是指向同一个内存地址,来做模块之间的关联

    求值就是赋值出结果,就是是内存中有真实的值,求值只运行一次,因为他有缓存,如果有,就直接去取,

    求值多次会产生多个值会有副作用

    工厂模式是什么

    commonjs 是运行时,有requie会直接进去,直到他可以导出

    计数器模块视图访问导出对象,但是因为该对象在主模块中并未求值,所以返回的是undefined

    求值是在什么时候,

    动态绑定就是解决循环依赖的方法。因此相比CommonJS,ESM最终不会有这个问题

    b引用a,a为什么是undefined,是因为a没有求值吗?commonJs的求值是在哪一步,是在导出那一步吗?因为没导出就引用了

    esm导出的值可以在任何时候改变值

    esm导入值模块不能更改,但能更改对象上的属性

    UMD是一种通用模块化定义规范

    commom为什么会出现循环引用的错误的问题?
    其中a引用b,b又引用a,a为什么是undefined,是因为a没有求值吗?commonJs的求值是在哪一步,是在导出那一步吗?因为没导出就引用原因吗?

    common运行就是求值,是一口气做掉,是一部到位的

    import语句中不能有变量,因为这些变量还没有值

    require 是可以有变量的,因为他的变量存在全局中是node的一种特性,但是import引用时是先在构建阶段,这个时候他的变量是没有值的

    其中esm的核心三步
    ● 构建(Construction):查找,下载并解析所有的文件到模块记录
    ● 实例化(Instantiation):分配内存空间来存放模块所有导出的变量,但这时候内存中并没有分配变量的值。然后将对应导出与导入指向同一内存空间
    ● 求值(Evaluation):运行代码,将内存中的之前未分配值的变量赋为真实的值

  • 相关阅读:
    【算法】网络最大流问题,三次尝试以失败告终
    过滤器(Filter)入门
    前端线上部署,如何通知用户有新版本
    【八股总结】至今为止遇到的八股(上半)
    buuctf(探险2)
    Java中的IO流详解(二)
    【Pytorch】各种维度变换函数总结
    原型和原型链
    Python Urllib:网络库(stdlib)的强大功能与灵活运用
    阅读JavaScript文档-函数相关
  • 原文地址:https://blog.csdn.net/duancsdn/article/details/126911691