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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
js 走马灯简单实例
2013/11/21 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
vue服务端渲染缓存应用详解
2018/09/12 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
python生成随机mac地址的方法
2015/03/16 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
Python通过文本和图片生成词云图
2020/05/21 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
小学生学习雷锋倡议书
2014/05/15 职场文书
同志主要表现材料
2014/08/21 职场文书
专业见习报告范文
2014/11/03 职场文书
商场营业员岗位职责
2015/04/14 职场文书
飞屋环游记观后感
2015/06/08 职场文书
七夕情人节问候语
2015/11/11 职场文书
关于做家务的心得体会
2016/01/23 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python