JS模块加载器加载原理是怎么样的?

路人一:

原理一:id即路径 原则。
通常我们的入口是这样的: require( [ ‘a‘, ‘b‘ ], callback ) 。这里的 ‘a‘、‘b‘ 都是 ModuleId。通过 id 和路径的对应原则,加载器才能知道需要加载的 js 的路径。在这个例子里,就是 baseUrl + ‘a.js‘ 和 baseUrl + ‘b.js‘。

但 id 和 path 的对应关系并不是永远那么简单,比如在 AMD 规范里就可以通过配置 Paths 来给特定的 id 指配 path。

原理二:createElement(‘script‘) & appendChild
知道路径之后,就需要去请求。一般是通过 createElement(‘script‘) & appendChild 去请求。这个大家都知道,不多说。有时候有的加载器也会通过 AJAX 去请求脚本内容。

一般来说,需要给 <script> 设置一个属性用来标识模块 id, 作用后面会提到。

原理三:document.currentScript
a.js 里可能是 define( id, factory ) 或者是 define( factory ),后者被称为匿名模块。那么当 define(factory) 被执行的时候,我们怎么知道当前被定义的是哪个模块呢,具体地说,这个匿名模块的实际模块 id 是什么? 答案是通过 document.currentScript 获取当前执行的<script>,然后通过上面给 script 设置的属性来得到模块 id。

需要注意的是,低级浏览器是不支持 currentScript 的,这里需要进行浏览器兼容。在高级浏览器里面,还可以通过 script.onload 来处理这个事情。

原理四:依赖分析
在继续讲之前,需要先简单介绍下模块的生命周期。模块在被 Define 之后并不是马上可以用了,在你执行它的 factory 方法来生产出最终的 export 之前,你需要保证它的依赖是可用的。那么首先就要先把依赖分析出来。

简单来说,就是通过 toString 这个方法得到 factory 的内容,然后用正则去匹配其中的 require( ‘moduleId‘ )。当然也可以不用正则。

这就是为什么 require( var ); 这种带变量的语句是不被推荐的,因为它会影响依赖分析。如果一定要用变量,可以用 require( [ var ] ) 这种异步加载的方式。

原理五:递归加载
在分析出模块的依赖之后,我们需要递归去加载依赖模块。
上面的代码只是表达一个意思,实际上 load 方法很可能是异步的,所以递归的返回要特殊处理下。

实现一个可用的加载器并没有那么简单,比如你要处理循环依赖,还有各种各样的牵一发动全身的细节。但要说原理,大概就是这么几条。个人觉得,比起照着规范实现一个加载器,更加吸引人的是 AMD 或者 CommonJS 这些规范的完善和背后的设计思路。

路人二:

Require、Seajs模块器加载的原理是怎么样的?
1. 定义一套依赖规则, 如AMD CMD CommonJS Modules规范,规范即规则
2. 加载入口文件及其依赖,原理即按依赖关系递归执行 document.createElement(‘script‘) 
3. 维护模块从初始到销毁的生命周期

模块加载都有什么方式?
1. 手动模式 - 人肉管理
2. 自动模式- 模块加载器管理
3. 混合模式 - 1,2结合

不同方式各有什么利弊?
1. 首先千万别拿着锤子看啥都是钉子,依场景使用
2. 基于约定的模块依赖管理相比人肉是更好实践,但谨记1
3. 使用了模块管理器后,必然会引入复杂度,这是复杂度的转移,如何驾驭这些也是成为优秀工程师的修炼之路
4. 使用模块加载器后最头疼的是构建发布问题,使用seajs的童鞋应该深有体会吧

时间: 2025-01-08 05:32:08

JS模块加载器加载原理是怎么样的?的相关文章

JavaScript AMD 模块加载器原理与实现

关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者遵循 CMD规范.前者的规范产出比较适合于浏览器异步环境的习惯,后者的规范产出对于写过 nodejs 的同学来说是比较爽的.关于两者的比较,有兴趣的同学请参看玉伯在知乎的回答 AMD和CMD的区别有哪些.本文希望能按照 AMD 规范来简单实现自己的一个模块加载器,以此来搞清楚模块加载器的工作原理.

【模块化编程】理解requireJS-实现一个简单的模块加载器

在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ...... 为了深入了解加载器,中间阅读过一点requireJS的源码,但对于很多同学来说,对加载器的实现依旧不太清楚 事实上不通过代码实现,单单凭阅读想理解一个库或者框架只能达到一知半解的地步,所以今天便来实现一个简单的加载器 加载器原理分析 分与合 事实上,一个程序运行需要完整的模块,以下代码为例: 1

webpack.config.js====CSS相关:::css加载器

1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev //loader加载器加载css和less模块 cnpm install style-loader css-loader less less-loader --save-dev //样式抽离文件 如果是webpack4.X 需要加@next //现在webpack4.x支持mini-css-ext

如何构建一个微型的CMD模块化加载器

前言 前端模块化是一个老生常谈的话题,模块化的好处是不言而喻,比如易于代码复用.易于维护.易于团队开发d等云云.对于前端模块加载器,以前仅仅止步于会用的阶段,为了加深对前端模块化的理解,大概花了一周的时间来学习.调研并尝试自己实现一个简易版的符合CMD规范的加载器. 设计 加载器是按照CMD规范进行设计的,具体的CMD规范就不列出了,详情请见CMD规范. 入口函数 use(ids, callback) 模块定义函数 define(factory) 模块加载函数 require(id) 取得模块接

JVM加载class文件的原理机制

JVM加载class文件的原理机制 1.Java中的所有类,必须被装载到jvm中才能运行,这个装载工作是由jvm中的类装载器完成的, 类装载器所做的工作实质是把类文件从硬盘读取到内存中 2.java中的类大致分为三种:     1.系统类     2.扩展类     3.由程序员自定义的类 3.类装载方式,有两种     1.隐式装载, 程序在运行过程中当碰到通过new 等方式生成对象时,隐式调用类装载器加载对应的类到jvm中,     2.显式装载, 通过class.forname()等方法,

Day18 (一)类的加载器

一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这个虚拟机实例也就随之消亡. 如果在同一台计算机上同时运行多个Java程序,将得到多个Java虚拟机实例,每个Java程序都运行于它自己的Java虚拟机实例中. 在如下几种情况下,Java虚拟机将结束生命周期: 1.执行了System.exit()方法 2.程序正常执行结束 3.程序在执行过程中遇到了异常或错误而异常终止 4.由于操作系统出现错误而导致Java虚拟机进程终

Java加载Class文件的原理机制

详见:http://blog.sina.com.cn/s/blog_6cbfd2170100ljmp.html 1.Java中的所有类,必须被装载到jvm中才能运行,这个装载工作是由jvm中的类装载器完成的,类装载器所做的工作实质是把类文件从硬盘读取到内存中 2.java中的类大致分为三种: 1.系统类 2.扩展类 3.由程序员自定义的类 3.类装载方式,有两种 1.隐式装载, 程序在运行过程中当碰到通过new 等方式生成对象时,隐式调用类装载器加载对应的类到jvm中. 2.显式装载, 通过cl

Java提高篇——JVM加载class文件的原理机制

1.JVM 简介 2.JVM 的组成部分 3.JVM加载class文件的原理机制 在面试java工程师的时候,这道题经常被问到,故需特别注意. 回到顶部 1.JVM 简介 JVM 是我们Javaer 的最基本功底了,刚开始学Java 的时候,一般都是从“Hello World ”开始的,然后会写个复杂点class ,然后再找一些开源框架,比如Spring ,Hibernate 等等,再然后就开发企业级的应用,比如网站.企业内部应用.实时交易系统等等,直到某一天突然发现做的系统咋就这么慢呢,而且时

JVM理解(上):classloader加载class文件的原理和机制

转自:https://www.jianshu.com/p/52c38cf2e3d4 JVM理解(上):classloader加载class文件的原理和机制 安东尼_Anthony关注 12018.11.10 10:16:40字数 4,361阅读 3,731 1 JVM架构整体架构 在进入classloader分析之前,先了解一下jvm整体架构: JVM架构 JVM被分为三个主要的子系统 (1)类加载器子系统(2)运行时数据区(3)执行引擎 1. 类加载器子系统 Java的动态类加载功能是由类加载