总结
大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
module.exports = factory();
} else if (typeof define === ‘function’ && define.amd) {
console.log(‘是AMD模块规范,如require.js’)
define(factory)
} else if (typeof define === ‘function’ && define.cmd) {
console.log(‘是CMD模块规范,如sea.js’)
define(function(require, exports, module) {
module.exports = factory()
})
} else {
console.log(‘没有模块环境,直接挂载在全局对象上’)
root.umdModule = factory();
}
}(this, function() {
return {
name: ‘我是一个umd模块’
}
}))
最终,使用require.js
, sea.js
, nodejs
或全局对象挂载属性等方式都能完美地使用umd-module.js
这个模块,实现了大一统。
给个sea.js
调用UMD
的效果页面链接,sea.js调用UMD模块
而nodejs
调用UMD
模块需要执行node
命令,
node umd-simple-used-by-nodejs
效果如下:
当然,我们不能止步于此,模块会被调用,当然也会调用其他模块。因此我们还需要实现一个有依赖关系的UMD
模块,来验证UMD
规范的可行性。
全局对象挂载属性
这个简单,在html
中你的模块前引入所依赖的模块即可。umd-module-depended
和umd-module
都是UMD
模块,后者依赖前者。
测试UMD模块
点开效果页面链接,看得更清楚明白!
兼容AMD规范
我们先在入口文件umd-main-requirejs.js
中,定义好模块路径,方便调用。
require.config({
baseUrl: “./assets/js/umd-dep/”,
paths: {
umd: “umd-module”,
depModule: “umd-module-depended”
}
});
被依赖的模块umd-module-depended
,只需要简单实现UMD
规范即可。
而调用者umd-module
,则需要做一些处理。按照require.js
的规范来即可, define
时,指定依赖的模块depModule
,而匿名工厂函数需要在参数上接收依赖的模块depModule
。
(function(root, factory) {
if (typeof define === ‘function’ && define.amd) {
console.log(‘是AMD模块规范,如require.js’)
define([‘depModule’], factory)
} else {
console.log(‘没有模块环境,直接挂载在全局对象上’)
root.umdModule = factory(root.depModule);
}
}(this, function(depModule) {
console.log(‘我调用了依赖模块’, depModule)
// …省略了一些代码,去代码仓库看吧
return {
name: ‘我自己是一个umd模块’
}
}))
打开效果页面链接,看得更清楚明白!
UMD依赖写法
同理,各种规范要求你怎么写模块依赖,你就怎么写就行。
(function(root, factory) {
if (typeof module === ‘object’ && typeof module.exports === ‘object’) {
console.log(‘是commonjs模块规范,nodejs环境’)
var depModule = require(‘./umd-module-depended’)
module.exports = factory(depModule);
} else if (typeof define === ‘function’ && define.amd) {
console.log(‘是AMD模块规范,如require.js’)
define([‘depModule’], factory)
} else if (typeof define === ‘function’ && define.cmd) {
console.log(‘是CMD模块规范,如sea.js’)
define(function(require, exports, module) {
var depModule = require(‘depModule’)
module.exports = factory(depModule)
})
} else {
console.log(‘没有模块环境,直接挂载在全局对象上’)
root.umdModule = factory(root.depModule);
}
}(this, function(depModule) {
console.log(‘我调用了依赖模块’, depModule)
// …省略了一些代码,去代码仓库看吧
return {
name: ‘我自己是一个umd模块’
}
}))
给个sea.js
调用的示例链接。
而nodejs
调用也是通过命令行测试,
node umd-dep-used-by-nodejs
效果如下:
=====================================================================
以上实现了简单的UMD
模块,也验证了UMD
模块间存在依赖关系时的可行性。虽然本文是以简单对象导出为例,但足以作为我们深入UMD
规范的起点,加油!
最后厚着脸皮求个star
,点亮我吧
最后更多分享:前端字节跳动真题解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
===========
以上实现了简单的UMD
模块,也验证了UMD
模块间存在依赖关系时的可行性。虽然本文是以简单对象导出为例,但足以作为我们深入UMD
规范的起点,加油!
最后厚着脸皮求个star
,点亮我吧
最后更多分享:前端字节跳动真题解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- [外链图片转存中…(img-7BOWIhw9-1715887139571)]