2024年前端最新可能是最详细的UMD模块入门指南(3),2024年最新头条web前端面试算法是什么

计算机网络

  • HTTP 缓存

  • 你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?

  • HTTP 常用的请求方式,区别和用途?

  • HTTPS 是什么?具体流程

  • 三次握手和四次挥手

  • 你对 TCP 滑动窗口有了解嘛?

  • WebSocket与Ajax的区别

  • 了解 WebSocket 嘛?

  • HTTP 如何实现长连接?在什么时候会超时?

  • TCP 如何保证有效传输及拥塞控制原理。

  • TCP 协议怎么保证可靠的,UDP 为什么不可靠?

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

算法

  • 链表

  • 字符串

  • 数组问题

  • 二叉树

  • 排序算法

  • 二分查找

  • 动态规划

  • BFS

  • DFS

  • 回溯算法

起飞,直接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依赖写法

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

(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

效果如下:

nodejs调用有依赖的UMD模块

总结

框架相关

原生JS虽能实现绝大部分功能,但要么就是过于繁琐,要么就是存在缺陷,故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架,两者工作原理上存在共通点,也存在一些不同点,对于校招来说,不需要两个框架都学得特别熟,一般面试官会针对你简历中写的框架进行提问。

在框架方面,生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的,在学习的过程可以结合框架的官方文档

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

Vue框架

知识要点:
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点:
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

Vue框架

知识要点:
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-l88GuObz-1715613905135)]

React框架

知识要点:
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-WBjyXdq6-1715613905136)]

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值