JS事件流
事件流包括三个阶段:
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
addEventListener(type, fn, false)
第一个参数:事件类型
第二个参数:事件函数
第三个参数:默认false表示使用冒泡机制,true表示捕获机制。
阻止冒泡:e.stopPropagation()
事件委托:e.target
返回触发事件的元素,不一定是绑定事件的元素e.currentTarget
返回的是绑定事件的元素($div.addEventListener),返回的就是$div
CommonJS、AMD、UMD
- CommonJS: 实现编译代码,创建一个比原先更大的代码包,其中包含了所有应用运行所需的代码。
1 | const axios = require('axios') |
特点:
没有回调函数
同步加载,每个require语句会短暂阻塞代码的运行,知道模块加载完毕。不过这个加载不是通过网络加载,而是从内存或者文件系统中加载,所以这个过程很快。
代码简单易懂
CommonJS模块不适合浏览器,因为浏览器的加载机制不支持同步。需要用打包工具把所有CommonJS模块打包成一个js文件。
- AMD:Asynchronous Module Definition(异步模块规范),用异步加载技术来定义模块和依赖。提供define方法和require方法来定义和加载模块。
工厂函数内部包含了模块代码,工厂函数最后返回的结果,就是要暴露给其他模块的功能。
1 | // define方法 |
define方法特点:
用AMD定义的模块至少需要一个工厂函数来暴露API给其他模块使用。
依赖数组中的依赖会被异步加载。
模块的加载通过客户端(浏览器)向服务器发送HTTP请求来完成的,这个传输过程需要大量时间。
可以定义具名模块,也可以定义匿名模块。具名模块通过开发者定义的名字加载,匿名模块隐式的以文件名加载。
require方法特点:
可以在代码的任何地方使用require加载另一个模块。
require调用会发送一个请求来下载模块。
异步加载,只有在回调函数里才能获取新拿到的API。
- UMD:Universal Module Definition(通用模块规范)是由社区想出来的一种整合了CommonJS和AMD两个模块定义规范的方法。
基本原理:用一个工厂函数来统一不同的模块定义规范。
原则:
所有定义模块的方法需要单独传入依赖
所有定义模块的方法都需要返回一个对象,供其他模块使用
示例:
1 | (function (global, factory) { |
限制请求并发数量
1 | function multiRequest(urls = [], maxNum) { |
Navigator.sendBeacon
navigator.sendBeacon()
方法可用于通过 HTTP POST
将少量数据异步传输到 Web
服务器。
它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest
)发送分析数据的一些问题。
语法:
1 | navigator.sendBeacon(url); |
参数:
url
url 参数表明 data 将要被发送到的网络地址。
data 可选
data 参数是将要发送的 ArrayBuffer
、ArrayBufferView
、Blob
、DOMString
、FormData
或 URLSearchParams
类型的数据。
返回值:
当用户代理成功把数据加入传输队列时,sendBeacon() 方法将会返回 true,否则返回 false。
参考文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon
https://blog.csdn.net/hsl0530hsl/article/details/88579958
TextDecoder
TextDecoder
接口表示一个文本解码器,一个解码器只支持一种特定文本编码,例如 utf-8、iso-8859-2、koi8、cp1261,gbk 等等。解码器将字节流作为输入,并提供代码点流作为输出。
在浏览器 WebAssembly
中,使用 TextDecoder
读取 WebAssembly
的二进制字节码文件。
参考文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/TextDecoder
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly
html css table中内容过多导致挤压变形的问题
table 表格 td 设置宽度后文字太多会导致自动换行,可以设置 table 的 style="table-layout:fixed;"
然后设置 td 的 style="word-wrap:break-word;"
即可。
前端性能监控–Performance
参考文档:
- https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceTiming
- https://zhuanlan.zhihu.com/p/215955734
- https://blog.csdn.net/weixin_44811417/article/details/90476615
- https://segmentfault.com/a/1190000009845281
- https://blog.csdn.net/qq_42033567/article/details/113755574
https://blog.csdn.net/wangchengiii/article/details/89186315 - https://blog.csdn.net/xgangzai/article/details/108860411
package.json 配置详解
- https://maimai.cn/article/detail?fid=1751256976&efid=BKFBo9RerPWVLuV_o-IMoQ
- https://zhuanlan.zhihu.com/p/148795036
service worker介绍
npm publish
- https://www.jianshu.com/p/a2dfee1b36cd
- https://www.cnblogs.com/momo798/p/15075312.html?ivk_sa=1024320u
Web Components
浏览器 DevTools 常用技巧
MicroApp
React 入门
egg-socket.io 使用
- https://www.eggjs.org/zh-CN/tutorials/socketio#%E4%BD%BF%E7%94%A8-egg-socketio
- https://www.eggjs.org/zh-CN/tutorials/socketio