javascript 模块依赖管理的本质深入详解


Posted in Javascript onApril 30, 2020

本文实例讲述了javascript 模块依赖管理的本质。分享给大家供大家参考,具体如下:

模块模式定义

模块是'javascript'的一种设计模式,它为函数定义一个包装函数,并且该包装函数的返回值与模块的API保持一致:

function createModule() {
 function hello(name) {
 console.log(name + '帅哥你好!');
 }

 return {
 hello: hello
 }
}
// 这里调用 createModule 来创建一个模块实例
var foo = createModule();
foo.hello('fayin');

单例模块模式

仔细研究上面的模块,我们发现每次调用 createModule 都会生成一个实例,很浪费。于是我们简单的包装一下,就有了单例模块模式:

var myModule = (function createModule() {
 function hello(name) {
 console.log(name + '帅哥你好!');
 }

 return {
 hello: hello
 }
})()

// 调用方式
myModule.hello('fayin')

模块依赖管理

现代大多数模块依赖管理器本质上都是将这种模块定义封装进一个友好的API。其核心的方法可以通过下面的例子一窥究竟:

// 通过模块的单例模式来保存定义的方法
var MyModules = (function() {

 var modules = {};

 function define(name, deps, impl) {
 console.log(deps.length)
 for(var i = 0, len = deps.length; i < len; i++) {
  // deps[i] 看做是函数名
  // modules[deps[i]] 是保存在 modules 对象上的一个属性为 deps[i] 的方法
  // 每次遍历将对应的方法绑定到函数名上
  deps[i] = modules[deps[i]]

 }
 // 在modules 对象上保存方法,其函数名为 name 
 // 如函数 bar ,impl 为 bar 的函数体
 modules[name] = impl.apply(null, deps);

 console.log( modules)
 }

 function get(name) {
 return modules[name]
 }
 return {
 define: define,
 get: get
 };
})();

// 这里定义一个函数 bar,返回一个对象
MyModules.define('bar', [], function() {
 function hello(who) {
 return 'Let me introduce: ' + who;
 }
 return {
 hello: hello
 }
})

MyModules.define('foo', ['bar'], function(bar) {
 var hungry = 'hippo';

 function awesome() {
 return bar.hello(hungry).toUpperCase()
 }

 return {
 awesome: awesome
 }
})

var bar = MyModules.get('bar')
console.log(bar.hello('fay'))

var foo = MyModules.get('foo')

console.log(foo.awesome())

模块模式的缺陷

从上面的案例我们知道,这个模式是基于函数来实现的,它的优势这里不在赘述(参考jQuery),而它的缺点也非常的明显。由于函数的上下文环境是在运行时确定的,在编译期间无法确定它的依赖关系,在运行期间我们可以随意更改API,这导致基于函数的模块模式并不稳定。

而相比之下,ES6的模块API更加的稳定......

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
vue实现动态按钮功能
May 13 Javascript
ES5新增数组的实现方法
May 12 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
JavaScript find()方法及返回数据实例
Apr 30 #Javascript
js this 绑定机制深入详解
Apr 30 #Javascript
JS 图片压缩原理与实现方法详解
Apr 29 #Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 #Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 #Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 #Javascript
JavaScript实现放大镜效果代码示例
Apr 29 #Javascript
You might like
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
一篇入门的php Class 文章
2007/04/04 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
为数据添加append,remove功能
2006/10/03 Javascript
js 编写规范
2010/03/03 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
python中对list去重的多种方法
2014/09/18 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
基于python3实现倒叙字符串
2020/02/18 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
EJB发布WEB服务一般步骤
2012/10/31 面试题
策划助理岗位职责
2013/11/18 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
党员自我对照检查材料
2014/08/19 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
初一数学教学反思
2016/02/17 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers