seajs模块之间互相引用导致加载失败的问题

SEajs模块化与解耦
本文探讨了在使用SEajs进行模块化编程时遇到的模块间互相引用导致的内存泄露问题。通过分析SEajs的核心特性及CMD规范,提出了有效的解决方案。
最近更新时间:2018年8月10日18:44:50
《猛戳-查看我的博客地图-总有你意想不到的惊喜》

我的关联文章《JavaScript模块化编程》

问题来源

在开发业务模块时,由于业务场景和逻辑较为复杂,开发的过程中,经过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 模块

参考

感谢阅读,欢迎评论^-^

打赏我吧^-^

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值