2024年前端最新可能是最详细的UMD模块入门指南(2),2024年最新2024年最新前端面试点梳理

学习分享,共勉

题外话,毕竟我工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

(function(root, factory) {

console.log(‘没有模块环境,直接挂载在全局对象上’)

root.umdModule = factory();

}(this, function() {

return {

name: ‘我是一个umd模块’

}

}))

我们把factory写成一个匿名函数,利用IIFE(立即执行函数)去执行工厂函数,返回的对象赋值给root.umdModule,这里的root就是指向全局对象this,其值可能是window或者global,视运行环境而定。

打开效果页面链接(要看源码的话,点开Git仓库),观察Network的文件加载顺序,可以看到,原则就是依赖先行。

global调用UMD模块

再进一步,兼容AMD规范

要兼容AMD也简单,判断一下环境,是否满足AMD规范。如果满足,则使用require.js提供的define函数定义模块。

(function(root, factory) {

if (typeof define === ‘function’ && define.amd) {

// 如果环境中有define函数,并且define函数具备amd属性,则可以判断当前环境满足AMD规范

console.log(‘是AMD模块规范,如require.js’)

define(factory)

} else {

console.log(‘没有模块环境,直接挂载在全局对象上’)

root.umdModule = factory();

}

}(this, function() {

return {

name: ‘我是一个umd模块’

}

}))

打开效果页面链接,可以看到,原则是调用者先加载,所依赖的模块后加载。

requirejs调用UMD模块

起飞,直接UMD

同理,接着判断当前环境是否满足CommonJSCMD规范,分别使用相应的模块定义方法进行模块定义。

(function(root, factory) {

if (typeof module === ‘object’ && typeof module.exports === ‘object’) {

console.log(‘是commonjs模块规范,nodejs环境’)

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

效果如下:

nodejs调用umd模块

有依赖关系的UMD模块


当然,我们不能止步于此,模块会被调用,当然也会调用其他模块。因此我们还需要实现一个有依赖关系的UMD模块,来验证UMD规范的可行性。

全局对象挂载属性

这个简单,在html中你的模块前引入所依赖的模块即可。umd-module-dependedumd-module都是UMD模块,后者依赖前者。

Test 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依赖写法

同理,各种规范要求你怎么写模块依赖,你就怎么写就行。

文末

篇幅有限没有列举更多的前端面试题,小编把整理的前端大厂面试题PDF分享出来,一共有269页

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

文末

篇幅有限没有列举更多的前端面试题,小编把整理的前端大厂面试题PDF分享出来,一共有269页

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 17
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值