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 相关文章推荐
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
js常用代码段收集
Oct 28 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
jquery.post用法示例代码
Jan 03 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 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
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php输入流php://input使用浅析
2014/09/02 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
PHP对象实例化单例方法
2017/01/19 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
axios实现简单文件上传功能
2019/09/25 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
详解python 内存优化
2020/08/17 Python
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
天网工程实施方案
2014/03/26 职场文书
安全宣传标语
2014/06/10 职场文书
初中毕业生自我评价
2015/03/02 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python
全网非常详细的pytest配置文件
2022/07/15 Python