摘要:本文主要简单地解读一下的源码和模块化原理。其中,是这次源码解读的核心,但我也会顺带介绍一下其他文件的作用的。对代码比较简单,其实就是声明一下全局的命名空间。然而,真正的核心在于处理模块依赖的问题。
seajs 简单介绍
seajs是前端应用模块化开发的一种很好的解决方案。对于多人协作开发的、复杂庞大的前端项目尤其有用。简单的介绍不多说,大家可以到seajs的官网seajs.org参看介绍。本文主要简单地解读一下seajs的源码和模块化原理。如果有描述不实的地方,希望大家指正和交流。
注:本文的解析是基于seajs的2.2.1版本。
解压seajs之后的src目录结构如下:
intro.js -- 全局闭包头部 sea.js -- 基本命名空间 util-lang.js -- 语言增强 util-events.js -- 简易事件机制 util-path.js -- 路径处理 util-request.js -- HTTP 请求 util-deps.js -- 依赖提取 module.js -- 核心代码 config.js -- 配置 outro.js -- 全局闭包尾部
src目录存放主要的seajs源代码。各个文件的作用也如上面所示。其中,module.js是这次源码解读的核心,但我也会顺带介绍一下其他文件的作用的。
sea.js对代码比较简单,其实就是声明一下全局的seajs命名空间。
intro.js和outro.js则是我们熟悉的匿名函数包裹基本代码的方式,只是这里比较特别的是,这段匿名函数被拆分成intro.js和outro.js两个文件。这样的做法主要是方便调试,在调试的环境下,不引用intro.js和outro.js即可以直接在全局里暴露seajs内部的接口,调试起来比较方便。intro.js和outro.js合并起来的代码如下:
(function(global, undefined) { if (global.seajs) { return } // .... })(this);
其他文件的用途就不一一重复叙述了,看列表即可。
页面如何动态加载js文件在解析seajs的源码和原理之前,让我们来回忆一下,在没有seajs或者requirejs的情况下,最原始的动态脚本加载方法是怎样的。方法很简单:其实就是创建一个script的标签,设置了src为你想要加载的脚本url,把script标签append到Dom里去就想了,so easy!没错,绝大部分模块加载js库的原理都是如此。
var script = document.createElement("script"); script.setAttribute("src", "example.js"); script.onload = function() { console.log("script loaded!"); }; document.body.appendChild(script);
上述代码即可以完成一次简单的动态脚本加载。然而,seajs真正的核心在于处理模块依赖的问题。在前端JS开发领域,尤其是复杂的web应用,模块依赖问题一直是令人头疼的问题。
很简单的道理,例如A、B、C、D四个模块对应于A.js、B.js、C.js、D.js四个文件。他们之间的依赖关系例如以下:
A 依赖 B
B 依赖 C和D
问题在于,如何找出模块里的依赖关系,如何确保A在运行前已经加载了B等等。这些都是前端模块化和模块依赖需要解决的问题。
模块化实现思路seajs的模块化实现原理,说简单其实不简单,说复杂其实也不是很复杂。主要思路可以用下面这一段代码来说明:
Module.define = function (id, deps, factory) { // 获取代码中声明的依赖关系 deps = parseDependencies(factory.toString()); // 保存 Module.save(); // 匹配到url var url = Module.resolve(id); // 加载脚本 script.url = url; loadScript(); // 执行factory并保存模块的引用 ... };获取代码中声明的依赖
首先我们来看看如何获取代码中声明需要依赖的模块。一般情况下,seajs中同步加载模块的写法是类似这样的:
define("scripts/a", function(require, exports, module) { var factory = function() { var moduleB = require("scripts/b"); ... }; module.exports = factory; });
那么需要获取依赖的信息,我们可以借助Function的toString方法,一个函数的toString方法是会返回函数本身的代码的(对于JavaScript自身的函数,会返回[native code])。只需要正则表达式来匹配require关键词后面的引用关系即可。所以seajs中函数parseDependencies的写法就像这样(这一部分代码在util-deps.js):
var SLASH_RE = //g var REQUIRE_RE = /"(?:"|[^"])*"|"(?:"|[^"])*"|/*[Ss]*?*/|/(?:/|[^/ ])+/(?=[^/])|//.*|.s*require|(?:^|[^$])requires*(s*([""])(.+?)1s*)/g function parseDependencies(code) { var ret = [] code.replace(SLASH_RE, "") // 匹配require关键词,找出依赖关系 .replace(REQUIRE_RE, function(m, m1, m2) { if (m2) { ret.push(m2) } }) return ret }通过id来匹配脚本的url地址
然后找出代码中声明的依赖id,通过id来匹配正确的脚本url地址。这一部分的代码在util-path.js
function id2Uri(id, refUri) { if (!id) return "" id = parseAlias(id) id = parsePaths(id) id = parseVars(id) id = normalize(id) var uri = addBase(id, refUri) uri = parseMap(uri) return uri }
这里有个特别的地方,类似require("a/b/c")这样的写法,seajs是如何知道脚本地址的绝对路径的呢?道理很简单,就是通过seajs自己往dom里添加的id为"seajsnode"的script节点或者是当前html中最后一个script节点,通过这些节点的src属性获取脚本的绝对路径。
模块加载过程让我们把目光移回到核心的module.js中。seajs为模块的加载过程定义了6种状态。
var STATUS = Module.STATUS = { // 1 - The `module.uri` is being fetched FETCHING: 1, // 2 - The meta data has been saved to cachedMods SAVED: 2, // 3 - The `module.dependencies` are being loaded LOADING: 3, // 4 - The module are ready to execute LOADED: 4, // 5 - The module is being executed EXECUTING: 5, // 6 - The `module.exports` is available EXECUTED: 6 }
也就是:
* FETCHING 开始加载当前模块
* SAVED 当前模块加载完成并保存模块数据
* LOADING 开始加载依赖的模块
* LOADED 依赖模块已经加载完成
* EXECUTING 当前模块执行中
* EXECUTED 当前模块执行完成
其实这一加载执行过程并非线性的,当前模块在加载所依赖的模块的是,所依赖的模块同样也需要进行这一过程,直到所有的依赖都加载执行完毕,当前模块才开始执行。
在module.js中seajs中的一些方法说明了上述整个流程。
Module.use 构造一个没有factory的模块,开始整个加载流程,状态初始化为FETCHING到SAVED;
Module.prototype.load 通过load方法,开始加载子模块,状态由SAVED到LOADING;
Module.prototype.onload 当子模块都加载完成后都会调用onload方法,状态由LOADING到LOADED;
Module.prototype.exec 加载过程都结束了,开始执行模块,状态由EXECUTING到EXECUTED;
这里每个方法的详细过程就不一一解析,有兴趣的同学可以去看源码。
实际上,seajs会对加载过的模块保存一份引用在cachedMods中,在require的时候会先调用缓存中的模块。
seajs.require = function(id) { var mod = Module.get(Module.resolve(id)) if (mod.status < STATUS.EXECUTING) { mod.onload() mod.exec() } return mod.exports } Module.get = function(uri, deps) { return cachedMods[uri] || (cachedMods[uri] = new Module(uri, deps)) }总结
前端模块化一直是前端开发中比较重要的一点。前端开发相对其他语言来说比较特殊,尤其是对应大型Web项目的前端代码,如何简洁优雅地划分模块,如何管理这些模块的依赖问题,这些都需要花一定的时间去认识和探讨。因此,Common.js(致力于设计、规划并标准化 JavaScript API)的诞生开启了“ JavaScript 模块化的时代”。前端领域的模块化方案,像requireJS、SeaJS等都是Common.js的实践者,对我们规划前端的代码很有帮助。然而,问题其实还有很多,seajs依然未能完全满足前端模块化开发,在性能问题、打包部署等方法还有着不足,不过技术的未来总在进步,相信以后会有更好的解决方法。
参考http://island205.github.io/HelloSea.js/
http://seajs.org/docs/#docs
http://chuansongme.com/account/wtp-notes
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/78062.html
摘要:这里的依赖都是通过来异步加载的,加载完毕之后立刻执行函数,在模块文件执行完毕后包括和其他代码,触发的事件。 入口 seajs.use seajs.use直接调用Module.use(),Module.use的源码如下: // Use function is equal to load a anonymous module // ids:模块标识,uri是dirname + _us...
摘要:如果这个模块的时候没有设置,就表示是个匿名模块,那怎么才能与之前发起请求的那个相匹配呢这里就有了一个全局变量,先将元数据放入这个对象。模块加载完毕的回调保存元数据到匿名模块,为请求的不管是不是匿名模块,最后都是通过方法,将元数据存入到中。 近几年前端工程化越来越完善,打包工具也已经是前端标配了,像seajs这种老古董早已停止维护,而且使用的人估计也几个了。但这并不能阻止好奇的我,为了了...
摘要:所有依赖这个模块的语句,都定义在一个回调函数中,等到所有依赖加载完成之后前置依赖,这个回调函数才会运行。如果将前面的代码改写成形式,就是下面这样定义了一个文件,该文件依赖模块,当模块加载完毕之后执行回调函数,这里并没有暴露任何变量。 模块化是我们日常开发都要用到的基本技能,使用简单且方便,但是很少人能说出来但是的原因及发展过程。现在通过对比不同时期的js的发展,将JavaScript模...
摘要:依赖信息是一个数组,比如上面的依赖数组是源码如下是利用正则解析依赖的一个函数时间出发函数主要看这个部分注释是防止拷贝该时间的回调函数,防止修改,困惑了一下。对的赋值需要同步执行,不能放在回调函数里。 sea.js想解决的问题 恼人的命名冲突 烦琐的文件依赖 对应带来的好处 Sea.js 带来的两大好处: 通过 exports 暴露接口。这意味着不需要命名空间了,更不需要全局变量。...
阅读 4124·2023-04-26 02:40
阅读 2637·2023-04-26 02:31
阅读 2725·2021-11-15 18:08
阅读 552·2021-11-12 10:36
阅读 1396·2021-09-30 09:57
阅读 5136·2021-09-22 15:31
阅读 2610·2019-08-30 14:17
阅读 1253·2019-08-30 12:58