Umd规范包的一些疑惑
本帖最后由 bigonion 于 2023-1-23 04:49 编辑> 本帖最后由 bigonion 于 2023-1-23 03:42 编辑
# 最近在把一些常用的函数写成模块
## 问题篇
以下是umd导出的时候实现的两个方式
* CommonJs导出：
```js
(function () {
'use strict';
(function (c, x) {
x(exports)
}
)(this, function (c) {
c.version = "v0.0.1"
})
}
)();
```
cjs调用
```js
const kit=require('./test.js')
console.log(kit);
```
可以正常使用输出kit对象
#### 疑惑：
但是我就不是很看得懂这是啥意思：**x(exports)** 为什么这样就能够导出
* 浏览器环境导出
```js
(function () {
'use strict';
(function (c, x) {
(c = c || self, x(c.kit = {}))
}
)(this, function (c) {
c.version = "v0.0.1"
})
}
)();
```
浏览器控制台直接输入即可看到**kit**已经被注册为全局变量
#### 疑惑：
这里的写法 **`(c = c || self, x(c.kit = {}))`** 我也不是很看得明白，希望大佬们指条路
## 解决篇
感谢(https://bbs.tampermonkey.net.cn/?55086)
和道哥的深夜帮助
问题得到解决了
这里如道哥所说
```js
function main(){
const resiter=(obj,callback)=>{
callback(obj)
}
resiter(this,(c)=>c.version="v0.0.1")
}
main()
```
以下把原文中的c都改成obj便于理解
第一个：他把exports传入，exports是module.exports的别名
相当于执行了exports.version="v0.0.1"
exports是obj
callback是function (obj) {
obj.version = "v0.0.1"
}
第二个：
` (obj = obj || self, x(obj.kit = {}))`
这里可以写成正常的形式
obj = obj \|\| self
x(obj.kit={})
“由于是严格模式，所以this是undefined，c=self，而self在浏览器里指向window，所以obj=window ” ------**steven026**
x(obj.kit={}) 可以理解为先开辟了一个kit对象，再把obj.kit作为参数传输回调函数中去执行
之前看到传参一行是赋值就没看懂，其实就是一种简写的方式,一行做了两件事而已
再次感谢steven026 && 道哥，新的一年，继续披荆斩棘！ 本帖最后由 steven026 于 2023-1-23 03:12 编辑
就是2个自执行函数，
第1个自执行函数未传参就是个闭包可以忽略
```js
(function (c, x) {
(c = c || self, x(c.kit = {}))
}
)(this, function (c) {
c.version = "v0.0.1"
})
```
第2个自执行传参了
c=this || self
x=function(c){c.version = "v0.0.1"}
由于是严格模式，所以this是undefined，c=self，而self在浏览器里指向window，所以c=window
又c.kit={}，所以window.kit={}，并且传一个window.kit作为x函数的参数，所以x函数中c.version="v0.0.1"就代表window.kit.version="v0.0.1" ```js
(function () {
'use strict';
(function (c, x) {
x(exports)
}
)(this, function (c) {
c.version = "v0.0.1"
})
}
)();
```
实际是IEFI函数，也就是自执行函数，拆开可以理解为
```js
function main(){
cosnt resiter=(obj,callback)=>{
callback(obj)
}
resiter(this,(c)=>c.version="v.0.1")
}
main()
```
this在commonjs特性会被当成module.exports
在commonjs输入测试可以发现二者等价，相当于兼容了cjs标准
至于浏览器同理，利用了this等价于window
但是你贴的代码感觉不太对劲
因为用了严格模式
按严格模式来说this是为undefined的
最好提供一个例子看看
steven026 发表于 2023-1-23 03:05
就是2个自执行函数，
第1个自执行函数未传参就是个闭包可以忽略
半夜不睡觉抢我答题！ 李恒道 发表于 2023-1-23 03:06
半夜不睡觉抢我答题！
我下午开始玩文明6，玩着玩着就半夜了………………{:4_86:} 李恒道 发表于 2023-1-23 03:06
```js
(function () {
'use strict';
这么晚还在啊道哥，这个就是可执行的例子啊 本帖最后由 bigonion 于 2023-1-23 04:12 编辑
steven026 发表于 2023-1-23 03:05
就是2个自执行函数，
第1个自执行函数未传参就是个闭包可以忽略
gg x(exports) 是啥呢 steven026 发表于 2023-1-23 03:05
就是2个自执行函数，
第1个自执行函数未传参就是个闭包可以忽略
感谢gg ，已经理解了！ 感谢steven026 && 道哥 bigonion 发表于 2023-1-23 04:50
感谢steven026 && 道哥
哥哥牛逼~
页:
[1]