最近更新时间:2018年8月10日18:44:50
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
问题来源
在开发业务模块时,由于业务场景和逻辑较为复杂,开发的过程中,经过seajs将各个模块打包加载后,运行失败(没有任何结果),也没有任何报错。经查证,模块之间出现了如下图所示的互相引用的问题,导致内存泄露,无法执行。
图一所示,A模块是入口模块,A模块调用了B模块,没有任何问题。但B调用C、C调用D、D调用B,出现了模块之间的引用死循环。
图二所示,A模块是入口模块,A模块调用了B模块,没有任何问题。但B调用C、C调用B,出现了模块之间的引用死循环。
这种情况,seajs是无法处理模块之间的关系,导致加载失败。这个就是模块解耦问题,核心原理,切断模块之间的互相引用关系,如图所示,只要切断任何一个红色×
的引用,就可以解决引用死循环问题。
问题引申
seajs
SeaJS 是一个适用于 Web 浏览器端的模块加载器。使用 SeaJS,可以更好地组织 JavaScript 代码。
在 SeaJS 的世界里,一个文件就是一个模块。所有模块都遵循 CMD 规范。
SeaJS 具有以下核心特性:简单一致的模块格式;依赖的自动管理;脚本的异步并行加载;丰富的插件;友好的调试。
SeaJS 带来的最大好处是:提升代码的可维护性。
//seajs的使用
seajs.config({
alias: {
'jquery': 'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'
}
});
seajs.use(['../src/js/app', 'jquery'], function(app, $) {
//some code
});
//app.js
define(function(require, exports, module) {
var $ = require('jquery');
exports.sayHello = function() {
$('#hello').toggle('slow');
};
});
CMD 规范
CMD(Common Module Definition) 模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。
seajs-issues汇总
#240 模块系统
#242 CMD 模块定义规范
#258 模块标识
#259 require 书写约定
#260 模块的加载启动
#262 Sea.js 配置
#263 Sea.js 的调试接口
#264 插件开发指南
#276 如何参与开发
#426 为什么要有约定和构建工具
#538 构建工具
#971 如何改造现有文件为 CMD 模块
参考
- github - seajs
- github - seajs - issues
- SeaJS - A Module Loader for the Web
- SeaJS - A Module Loader for the Web
感谢阅读,欢迎评论^-^