Umd规范包的一些疑惑

bigonion

本帖最后由 bigonion 于 2023-1-23 04:49 编辑

本帖最后由 bigonion 于 2023-1-23 03:42 编辑

最近在把一些常用的函数写成模块

问题篇

以下是umd导出的时候实现的两个方式

• CommonJs导出：

(function () {
    'use strict';
    (function (c, x) {
        x(exports)  
    }
    )(this, function (c) {
        c.version = "v0.0.1"
    })
}
)();

cjs调用

const kit=require('./test.js')
console.log(kit);

可以正常使用输出kit对象

疑惑：

但是我就不是很看得懂这是啥意思：x(exports) 为什么这样就能够导出

• 浏览器环境导出

(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 = {})) 我也不是很看得明白，希望大佬们指条路

解决篇

感谢steven026
和道哥的深夜帮助
问题得到解决了
这里如道哥所说

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

本帖最后由 steven026 于 2023-1-23 03:12 编辑

就是2个自执行函数，
第1个自执行函数未传参就是个闭包可以忽略

    (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"

李恒道

(function () {
    'use strict';
    (function (c, x) {
        x(exports)  
    }
    )(this, function (c) {
        c.version = "v0.0.1"
    })
}
)();

实际是IEFI函数，也就是自执行函数，拆开可以理解为

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
[md]就是2个自执行函数，
第1个自执行函数未传参就是个闭包可以忽略

半夜不睡觉抢我答题！

steven026

李恒道 发表于 2023-1-23 03:06
半夜不睡觉抢我答题！

我下午开始玩文明6，玩着玩着就半夜了………………

bigonion

李恒道 发表于 2023-1-23 03:06
[md]```js
(function () {
    'use strict';

这么晚还在啊道哥，这个就是可执行的例子啊

bigonion

本帖最后由 bigonion 于 2023-1-23 04:12 编辑

就是2个自执行函数，
第1个自执行函数未传参就是个闭包可以忽略

[/quote]
gg x(exports) 是/p>

bigonion

steven026 发表于 2023-1-23 03:05
[md]就是2个自执行函数，
第1个自执行函数未传参就是个闭包可以忽略

感谢gg ，已经理解了！

bigonion

感谢steven026 && 道哥

李恒道

bigonion 发表于 2023-1-23 04:50
感谢steven026 && 道哥

哥哥牛逼~