摘要:废话真多,是的哈而要说清和的二三事,又不是件容易的事,简单理解,和指向同一内存区域。而对于当前模块来说是外部的模块。参考关于和的区别和的区别这篇文章很不赖。
AMD中define常见的形式
define("alpha" ,["require", "exports", "module"], function(require, exports, module) { var foo = require("foo"); module.exports = exports = function() { foo.doSomething(); } });
参数
第一个是要定义的模块名字(id)
第二个是要用到的模块名,其实更专业点讲是定义的这个模块所依赖的模块名称
第三个回调函数,是要定义模块内容
分析方法:替换部分代码进行分析
先来把回调中的require,exports,module替换了看看。
1.替换requirefunction callback(exports, module) { // 假设foo是最简单的对象,把require("foo")换成最简答的对象看看 var foo = { "doSomething": function() {} }; module.exports = exports = function() { foo.doSomething(); } }
那么其实已经不难看出,require其实就相当于是个查询函数吧,我给他传个对象名,它就能给我一个具体的对象。
var require = function(name) { var modules = {"foo": {"doSomething": function() {}}}; return modules[name] || {}; }
那么整个代码可以换成
var require = function(name) { var modules = {"foo": {"doSomething": function() {}}}; return modules[name] || {}; } function callback(exports, module) { var foo = require("foo"); module.exports = exports = function() { foo.doSomething(); } }
看起来好像有点道理哦,等会儿,等会儿,这里的modules又从哪儿冒出来的,哈哈哈,被发现了,别急慢慢来
2. 替换exports和module.exports在替换之前,先来了解下exports和module.exports这两货是干啥的,而要了解他们先来看看模块是啥。
其实模块么,简单来说就是一个高级别的function,输入,处理,输出。至于为啥js的模块化为啥这么困难,这个问题不是三言两语就能解释清楚的,就不展开了(其实真实情况是,我也不清楚,哈哈哈)
既然模块要做输出,那么输出什么东西总要知道吧,而module.exports的作用就是这个,存储模块输出的内容。
也就是说,这个模块中要给外部使用的东西全放在module.exports里头了。废话真多,是的哈- -.
而要说清exports和module.exports的二三事,又不是件容易的事,简单理解,exports和module.exports指向同一内存区域。有兴趣可以看看exports 和 module.exports 的区别。
那来改造一下,把module.exports,exports也提炼出来看看
var require = function(name) { var modules = {"foo": {"doSomething": function() {}}}; return modules[name] || {}; } var module = {}; var module.exports = exports = {}; function callback() { var foo = require("foo"); module.exports = exports = function() { foo.doSomething(); } }define的推测
// 这里的id相当于模块名,deps就是需要依赖的模块名称列表 define = function(id , deps, callback) { callback(require, exports, module); };
晕,那require,exports,module跑哪儿溜达去了?加上去看看
define = function(id , deps, callback) { var require = function(name) { var modules = {"foo": {"doSomething": function() {}}}; return modules[name] || {}; } var module = {}; var module.exports = exports = {}; callback(require, exports, module); };
看上去挺有道理的么,那么modules这玩意儿到底是哪儿冒出来的呢。
可以看出来modules 里面存放着的是foo模块的内容,那这些内容是怎么来的呢?通过foo的module.exports提供的啊。那么modules里面其实放的是,foo的module.exports。
而foo对于当前模块来说是外部的模块。而我想调用外面的东西,只有两种办法,要么传参数,要么通过全局变量(不过或许大神还有其他方案,我就只晓得这两种了)。define里面有的参数没有一个是存放module.exports的。那么答案呼之欲出了,modules是全局变量。
modules = {}; function load(id, exports) { (modules || (modules = {}))[id] = exports; }
再来看看完整的代码,变成啥样了
modules = {}; function load(name, exports) { (modules || (modules = {}))[name] = exports; } define = function(id, deps, callback) { var require = function(name) { return modules[name] || {}; } var module = {}; var module.exports = exports = {}; callback(require, exports, module); load(id, module.exports); };
到现在差不多已经成型了,那么这里的require, exports, module都是外来的模块吧bingo,其实callback里的模块都是根据deps来的,去掉require, exports, module
modules = {}; function load(name, exports) { (modules || (modules = {}))[name] = exports; } define = function(id, deps, callback) { // 相当于 // var module = {}; // var module.exports = {}; var module = modules["module"]; // 相当于 //var require = function(name) { // return modules[name] || {}; //} var require = modules["require"]; var args = deps.map(require); callback.apply(null, args); load(id, module.exports); };来看define的另一种形式
define("alpha" ,["foo"], function(foo) { return function() { foo.doSomething(); } });
咦,精简了不少诶。没有exports了诶,会返回了么
modules = {}; function load(name, exports) { (modules || (modules = {}))[name] = exports; } define = function(id, deps, callback) { var module = modules["module"]; var require = modules["require"]; var args = deps.map(require); var exports = callback.apply(null, args); load(id, exports || module.exports); };
OK,先告一段落了,累死我丫了。在慢慢优化吧,唉。
参考(关于exports 和 module.exports 的区别)exports 和 module.exports 的区别这篇文章很不赖。
人家大神已经说得非常好了。我在了浅薄的打个比方,我有个文件夹叫module.exports,然后我创建了一个超链接叫exports,那我在任何一个里面操作最终都会反应到另一个里,但如果我把超链接exports删了把它的指向地址改了,并不会影响真正的文件夹module.exports。
而有很多人明明已经改了超链接exports的指向地址(如:exports = 123;),再在超链接里面做了很多操作(如:exports.hello = 456;),那都不会对真正的文件夹module.exports起到任何作用(你是见不到module.exports.hello === 456的)。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79529.html
摘要:前言由于博主最近又闲下来了,之前觉得的官方文档比较难啃一直放到现在。文章会逐步分析每个处理的用意当然是博主自己的理解,不足之处欢迎指出沟通交流。后续将会补上构建生产的配置分析,案例参考。前端临床手札构建逐步解构下 前言 由于博主最近又闲下来了,之前觉得webpack的官方文档比较难啃一直放到现在。细心阅读多个webpack配置案例后觉得还是得自己写个手脚架,当然这个案例是基于vue的,...
摘要:一冒泡和捕获事件执行子元素在执行某个事件的前后,会引起上层元素触发相同事件。三补充关于和这两个其实和捕获与冒泡一点关系都没有,是用来阻止事件的默认行为的。 一、冒泡和捕获 事件执行:子元素在执行某个事件的前后,会引起上层元素触发相同事件。例:我点击了div,那么不光div会执行click事件,上层的body和html等等也会执行click。 冒泡与捕获解决了:事件执行顺序由谁开始,由谁...
摘要:感觉不能这样下去就学写一下单元测试,等他更新代码我都跑一遍确认一下,这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习 最近博主工作是和另一枚后端合作,但是经常发现他写的接口出错,苦逼连连。感觉不能这样下去就学写一下单元测试,等他更新代码我都跑一遍确认一下,这样工作安心多了。 经过博主一番查找,貌似被推荐比较多的有mocha和chai,下面记录简...
摘要:感觉不能这样下去就学写一下单元测试,等他更新代码我都跑一遍确认一下,这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习 最近博主工作是和另一枚后端合作,但是经常发现他写的接口出错,苦逼连连。感觉不能这样下去就学写一下单元测试,等他更新代码我都跑一遍确认一下,这样工作安心多了。 经过博主一番查找,貌似被推荐比较多的有mocha和chai,下面记录简...
摘要:然而我真的太天真,微信浏览器怎样会让你这样好过问题集中于自动播放视频这块,需求很简单自动播放全屏不显示工具条自动播放一步步来,自动播放这个问题在十分肯定默认是不支持的,必须基于用户操作下才能加载视频。至于在微信下和一个样。 某天收到旧同事的信息说希望我帮手做一下一个简单的H5,然后我看了看的确很简单: 就是图片滚动到最后自动播放视频,播完显示个按钮交互。 然而我真的太天真,微信浏览器怎...
阅读 1701·2021-10-18 13:30
阅读 2557·2021-10-09 10:02
阅读 2928·2021-09-28 09:35
阅读 2066·2019-08-26 13:39
阅读 3498·2019-08-26 13:36
阅读 1930·2019-08-26 11:46
阅读 1080·2019-08-23 14:56
阅读 1664·2019-08-23 10:38