随笔分类 - js
script 标签中的defer 和 async 属性
摘要：浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 <script> 标签 ，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。整个过程如下图所示： 可以看到，script 阻塞了浏览器对 HTML 的解析，如果获取 JS 脚本
阅读全文
阻止默认事件，阻止冒泡，阻止捕获
摘要：一、阻止默认事件： event.preventDefault(); let aEle = document.getElementsByTagName("a")[0]; aEle.addEventListener("click", e => { let event = e || window.even
阅读全文
vue升级Babel支持可选链和合并空值运算符
摘要：一、babel作用: (我偷懒了,直接用官网介绍) Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。据我所知, 无论是webpack项目还是vite项目都需要使用到babe
阅读全文
babel plugin和presets是什么，怎么用?
摘要：https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时，开发者可能经常需要在不同的babel configuration(.bablerc)中切换。你应该在pac
阅读全文
babel.config.js 和 .babelrc 对比
摘要：Babel 有两种并行的配置文件格式，可以一起使用，也可以分开使用。 项目范围的配置 babel.config.js 文件，具有不同的拓展名（json、js、html）babel.config.js 是按照 commonjs 导出对象，可以写js的逻辑。 相对文件的配置 .babelrc 文件，具有
阅读全文
perfect-scrollbar 一个全浏览器适用的自定义scrollbar
摘要：在开发过程中为了保持界面样式的一致性，需要自定义scrollbar的样式，可是只有chrome可以定义样式，IE只能设置颜色，火狐是直接不可以设置，于是就找了这个库，它是github开源的，但没有中文文档，只有英文的，下面是我翻译的中文文档，英语水平不好，有错请见谅，可以评论告诉我修改。 源码以及英
阅读全文
位运算
摘要：参考：https://www.w3school.com.cn/js/js_bitwise.asp https://blog.csdn.net/qq_39207948/article/details/80507613
阅读全文
path-to-regexp使用及源码解析
摘要：一.使用 该方法的作用是把字符串转为正则表达式。 我们在vue-router中，react-router或koa-router中，我们经常做路由匹配像这种格式的 /foo/:id 这样的，或者其他更复杂的路由匹配，都能支持，那么这些路由背后是怎么做的呢？其实它就是依赖于 path-to-regexp
阅读全文
document.execCommand 的用法
摘要：selectAll 全选 无参数 open – – stop 执行浏览器停止命令，避免加载后续无用资源 saveAs – – print – – Cut 剪切选中文字 (“Cut”, “false”, null); FontName 改变选中文字字体 参数：文字字体名称 FontSize – 参数：
阅读全文
手写JSON.stringify
摘要：// string -> string `"${string}"` // number -> `${number}` // bigInt -> throw new Error('Do not know how to serialize a BigInt at JSON.stringify'); //
阅读全文
Object常用方法
摘要：Object.assign(target,source1,source2,...) 该方法主要用于对象的合并，将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身属性，不拷贝继承的属性。 Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果
阅读全文
手写lodash.set
摘要：// 处理 path， path有三种形式：'a[0].b.c'、'a.0.b.c' 和 ['a','0','b','c']，需要统一处理成数组，便于后续使用 function toArrayPath(path) { if (Array.isArray(path)) { return path; }
阅读全文
手写lodash.get
摘要：1.简单版 /** * @param {object} source * @param {string | string[]} path * @param {any} [defaultValue] * @return {any} */ function get(source, path, defau
阅读全文
手写MVVM
摘要：// 创建一个Mvvm构造函数 // 这里用es6方法将options赋一个初始值，防止没传，等同于options || {} function Mvvm(options = {}) { // vm.$options Vue上是将所有属性挂载到上面 // 所以我们也同样实现,将所有属性挂载到了$op
阅读全文
虚拟dom和real dom区别
摘要：Real DOM，真实DOM， 意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM结构， Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。 区别： 虚拟DOM不会进行排版与重绘操作 虚拟DOM进行频繁修改，然后一次性比较
阅读全文
浏览器四大进程
摘要：一、浏览器四大进程 1.Browser进程：浏览器的主进程（负责协调、主控），只有一个。 主要作用： 负责浏览器界面显示，与用户交互。如前进，后退等 负责各个页面的管理，创建和销毁其他进程 将渲染（Renderer）进程得到的内存中的Bitmap（位图），绘制到用户界面上 网络资源的管理，下载等 2
阅读全文
ES6中类Class的super关键字
摘要：super 关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。 1、super当做函数使用 super 作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次 super() 函数。注意：作为函数时，super() 只能用在子类的构造函数之中，用
阅读全文
js中replace的第二个参数是函数的情况应用
摘要：1.把字符串中所有单词的首字母都转换为大写： var str = 'aaa bbb ccc'; uw=str.replace(/\b\w+\b/g, function(word){ return word.substring(0,1).toUpperCase()+word.substring(1);
阅读全文
js让页面所有元素变成灰色
摘要：html { -webkit-filter: grayscale(1); } -webkit-filter（滤镜）有十种效果，分别是： grayscale 灰度 sepia 褐色 saturate 饱和度 hue-rotate 色相旋转 invert 反色 opacity 透明度 brightnes
阅读全文
获取/设置光标位置
摘要：1.获取光标位置 <html> <head> <title>光标测试</title> <style> p { display: flex; flex-direction: row; } .btn { height: 24px; margin: 0 10px; } .edit-div { displa
阅读全文
