随笔分类 - javascript
1
摘要：业务需要内容展示后日志打点，于是使用到了IntersectionObserver，实践中发现一个问题：如果内容出现在了可视区内，但是被其他元素遮挡住了，这时候仍然会打日志。 于是寻找解决方案，发现IntersectionObserver 还有一个v2版本，刚好能解决这个问题。 在v2版本中，Inte
阅读全文
摘要：目录 方法一： console.log 方法二： debugger 方法三： console.table 方法四：内容宽度 总结 方法一console.log 在safari中，如果打开了控制台，console.log打印日期实例、函数实例、正则实例会触发两次toString方法，那么可以重写toS
阅读全文
摘要：目录 前言 模块联邦概念 使用配置 模块联邦优点 模块联邦缺点 动态远程模块 前言 工作中公共模块通过子仓库在多个项目中使用，其中公共头部，登录，反馈、举报等模块业务与技术栈都和项目耦合很深，在每个项目都会将这些公共模块打包进去，为了减少流量成本，考虑将这些模块打包后放到cdn，对比了webpack
阅读全文
摘要：# chrome事件循环的自问自答 ## 目录 - [1. 宏任务有哪些？](#1-宏任务有哪些) - [2. 微任务有哪些？](#2-微任务有哪些) - [3. dom渲染是事件循环的一部分么？](#3-dom渲染是事件循环的一部分么) - [4. requestAnimationFrame的回调
阅读全文
摘要：前言 通过工具规范git提交信息也是工程化的一部分，在前端领域有一些工具为我们提供了相关功能，在这里做一下使用总结。 commitlint commitlint是什么？ 就像eslint用来检查js代码是否标准，commitlint用来检查提交信息是否满足固定格式的工具。 同样，commitlint
阅读全文
摘要：前言 在微前端实践过程中有一个必然会遇到的问题：全局作用域变量的污染问题，具体来说就是window对象挂载数据会被主子应用获取和修改导致数据相互污染问题，这时候如果能在应用之间做个数据隔离，最好能实现一个沙箱环境，对解决问题很有帮助。 iframe方案 说到沙箱隔离，首先想到的是iframe，自带数
阅读全文
摘要：问题 在服务端支持协议从http1.1升级到http2的时候，项目中正常的请求流程出现了错误，经排查是ajax封装代码使用xmlHttpRequest的statusText属性判断是否正常返回，进而导致错误，那么statusText属性在不同协议间发生了什么变化呢？ 通过MDN文档(英文版本)查询到
阅读全文
摘要：概述 一个状态管理工具 Store：保存数据的地方，你可以把它看成一个容器，整个应用只能有一个 Store。 State：包含所有数据，如果想得到某个时点的数据，就要对 Store 生成快照，这种时点的数据集合，就叫做 State。 Action：Action 就是 View 发出的通知，表示 St
阅读全文
摘要：有时候想看看文件的16进制，又不想编写代码来处理，那么这时候可以使用vscode和插件Hex Editor一键查看文件的16进制 安装Hex Editor 插件 右键文件选择打开方式，然后选择Hex Editor 然后就可以查看文件的16进制了
阅读全文
摘要：写一些demo的时候使用vue/react脚手架来初始项目太小题大做，直接在html中写代码需要找到一些框架和库的cdn，这里做下推荐，仅限在测试环境用。 bootcdn 优点：是国内速度快，使用简单。 缺点：是资源有限，比如vue目前只有3.x版本，没有2.x版本 unpkg 缺点: 优势网络会中
阅读全文
摘要：前言 在web端打印是比较常见的需求，实际工作中也接触了不少，在这里对工作中用到的做一下总结 1.通过媒体查询隐藏元素 通过style标签内联引入，或者使用媒体查询media="print"外链样式表。然后将无关元素隐藏，只将需要打印的内容展示出来；这时候需要专门写一套打印样式，页面修改，打印样式可
阅读全文
摘要：使用html2canvas和jspdf将页面保存位pdf <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js" ></script> <script src="https://unpkg.com/html2canvas@
阅读全文
摘要：前言 在vue要求在遍历的时候最好加上key，在使用过程中总有些疑问，在这里做下分析 1.不使用key的时候vue是怎么处理的 在vue2.x文档中有如下描述 key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key
阅读全文
摘要：前言 在浏览器中表单元素天然支持focus和blur事件，这两个事件在开发过程中出现的频率还是挺高的，前端开发者也都比较熟悉，在这里特意总结一下。 触发场景 鼠标点击 键盘tab键 直接调用dom的focus,blur方法 使用tabIndex使非表单元素支持focus和blur事件 给一个普通的d
阅读全文
摘要：
1.纯css方案 使用user-select: none实现，效果很好，缺点是不能用鼠标拖动选中了。 <div>少时诵诗书所所所所所所所</div> <style> div{ user-select: none; } </style> 2.使用js实现-mousedown 在mousedown事件上
阅读全文
1.纯css方案 使用user-select: none实现，效果很好，缺点是不能用鼠标拖动选中了。 <div>少时诵诗书所所所所所所所</div> <style> div{ user-select: none; } </style> 2.使用js实现-mousedown 在mousedown事件上
阅读全文
摘要：
平时想写一个简单的react demo，需要使用create-react-app来初始一个项目，或者使用其他脚手架初始项目，属实有些小题大做；而使用vue的时候，新建一个html文件，然后外链vue包文件，立马就能像使用jquery一样开始写vue组件，非常的方便； 那么是否可以在html中直接引用
阅读全文
平时想写一个简单的react demo，需要使用create-react-app来初始一个项目，或者使用其他脚手架初始项目，属实有些小题大做；而使用vue的时候，新建一个html文件，然后外链vue包文件，立马就能像使用jquery一样开始写vue组件，非常的方便； 那么是否可以在html中直接引用
阅读全文
摘要：虽然webpack5已经发布两年了，然而公司内部还有许多个项目仍然使用的是webpack4，最近一个小需求却导致打包结果发生了很大变化，于是重新研究了下splitChunks配置。 默认配置 splitChunks: { chunks: 'async', minSize: 30000, maxSiz
阅读全文
摘要：es6模块和commonjs模块都属于js这门语言的模块规范，commonjs服务于nodejs，es6服务于浏览器并且在nodejs中的支持度越来越高，那么目前阶段这两者有什么不同呢？ 相关代码地址：https://github.com/blank-x/blog-code/tree/main/1-
阅读全文
摘要：对json对象遍历我们一般使用for in循环，或者Object.keys + 数组方法。在接触js以来听到过一种说法： for in 遍历顺序是不可靠的 但是在实际开发中for in 循环也是按照其键值对的排列先后被遍历，直到遇见了下面的数据： const data = { "11": 11, "
阅读全文
摘要：事件循环 event loop 究竟是什么一些概念浏览器运行时是多进程，从任务管理器或者活动监视器上可以验证。 打开新标签页和增加一个插件都会增加一个进程，如下图：浏览器渲染进程是多线程，包含GUI渲染线程，js引擎线程，事件触发线程，定时器线程，异步请求线程等， 平时说js是单线程就是指js引擎线程。事件触发线程：用来控制事件循环，管理着一个任务队列，会将鼠标点击，ajax异步请求等任务(通...
阅读全文
1
