- 博客(304)
- 收藏
- 关注
RSS订阅原创 vue模板编译流程
原本是想理一理虚拟dom，结果根本不知道虚拟dom是怎么来的，于是先理清楚模板编译的流程。因为自身能力问题，没法手写实现，只是单纯的理清除模板编译的流程，然后贴一些关键代码，可以自己去源码找到关键的地方。我是直接在vue.js里面直接看，并不是下载vue的npm去找各个模块，所以有什么理解错误的欢迎指教。一、获取HTML（template）先了解一下，vue有两个运行环境的编译，一个是npm运行时的runtime版本，一个是浏览器引入vuejs的runtime-compile版本。runtime
2022-03-31 13:59:23
2368
原创 这应该是性能最优的数组转树结构方法
前端使用树插件是一个非常常见的使用场景。树插件的数据格式在我使用过的插件都是一样的。而这个数据格式是由后端组装好返回给前端还是前端自己组装，这个问题在前端和后端也经常拿来撕逼。大多数情况下后端会组装好，也有一部分前端自己处理，早之前我合作过的一个后端提出了一个观点，浏览器是每一个用户都有的，服务器是所有用户共同访问的，后端递归遍历组装树数据比前端处理更耗费性能。那时候我居然无言以对，几十条数据组装成树结构的数据居然能牵扯到服务器性能问题，那这个服务器还能做什么？也不是想讨论由前端还是后端处理的问题
2022-03-29 14:05:02
1167
原创 学会这几个API，vue3直接上手
vue2开发过项目的，想直接上手vue3很快，几个API熟悉了就够了，其它的特性在使用vue3的过程慢慢去了解。任何在熟悉了使用之后再去研究一些API的原理，慢慢就能把vue3掌握。而且vue3的使用结合ts，开发过程中ts的比重没有那么大，之前分享的ts那些基础会了，完全就够用来开发了。全局 API 和应用 APIvue3的一个新概念，返回一个提供应用上下文的应用实例,应用实例挂载的整个组件树共享同一个上下文:const app = createApp(App);app.use(store).
2022-03-15 14:27:29
1245
原创 typescript基础笔记
typescript早在2013年就发布了第一个正式版本，印象中一直到了19年才大火起来。三年过去了，一直是可用可不用的状态，于是很多人都没学习使用。直到react和vue开始捆版上了ts，前端圈也开始了“内卷”，ts已经是不得不用的状态了。这次分享的是自己学习过程觉得掌握了就可以上手的内容，上手了之后通过项目多实践，实践过程再学习深入的内容，应该就能比较快的掌握。学习过程贴的代码都是在在线的这个平台的演练场调试的：https://www.typescriptlang.org/zh/tips:
2022-03-09 16:02:39
672
原创 快速创建vite+vue3+ts项目及首次缓慢问题
vite推出之后，在国内火的一塌糊涂，在前端圈立马就卷了起来。我这撸着JQ项目的还没开始用过。公司用vite+vue3+ts的项目拿来跑了一下，第一次启动慢的我怀疑人生，后来才知道已经有插件解决了这个问题。先用vite快速创建项目吧，现在快速创建项目的命令很多：npm init vite-app <project name>npm init @vitejs/app两个命令都试了一下，都是可以创建的，创建出来的项目不太一样，第一个vite的版本是"vite": “^1.0.0-rc.1
2022-03-03 15:12:52
5333
5
原创 H5小游戏
最近水群的时候，发现有人分享了纯H5的小游戏，不需要服务器直接就能玩，试玩了几个游戏，是之前挺流行的那些游戏，有兴趣的可以下载下来看看。关注订阅号 coding个人笔记 回复 小游戏...
2022-03-02 15:25:35
3639
3
原创 除了是程序猿
算算时间，敲程序已经是第六个年头了，这个公众号的第一篇文章是2018-05-20，那是第一次离职期间，面试了几家公司，备受打击，于是开始学习和记录。说来惭愧，虽然写了那么多笔记，很多东西学的当下理解了，到现在，忘的也差不多了。能力多少还是长进了，只是长进的程度不高。现在的状态，既想躺平混吃等死，又想努力学习然后平步青云。说回这个号的分享，内容方面没什么体系，也没那么的干货，跟号的名字“个人笔记”确实是做倒了一致，连排版都跟笔记一样。早开始，代码连格式都没有，到现在，排版一如既往的难看。别人的文章，有图有
2022-02-28 17:15:01
176
原创 commitLint和husky实现代码提交校验
现在使用的版本管理工具，首选应该都是git，入职到现在，git之外的版本管理工具也就最开始使用过svn。现在的项目，规范也越来越重要，所以才有各种强制的代码格式检测。当然，自己做过的项目还没有那么严格过，顶多就是一些格式化和eslint的统一。先说说git提交时候的信息，一般都比较随意，大概描述这次提交的重点就够了。有时候刚改完代码测试，马上另外一个小东西要调整，所以提交的时候有时候123之类的都有可能。这其实很不规范，没办法从提交信息中获取这次提交的大概用意。一些老一点大一点的项目，需求调整的时候之前的
2022-02-16 16:01:40
1263
原创 vue使用防抖节流
vue使用防抖节流，函数的调用方式决定了 this 的值（运行时绑定），箭头函数不提供自身的 this 绑定（this 的值将保持为闭合词法上下文的值）
2022-01-26 14:42:33
1330
1
原创 简单了解单点登录流程
做了那么多年前端，还没做过有关于单点登录的项目，早之前我理解的单点登录是一个账号只能一个地方登录。其实单点登录我们使用的太多了。比如我们登录了淘宝相当于登录了天猫。登录的核心无非就是把登录凭证缓存在客户端，session、cookie、localstorage，可以是前端自己注入也可以是后端注入，登录的凭证也就是各种加密解密的东西，比如JWT等。可以是持久的会话，也可以是临时的会话。想要什么样的登录都可以实现。单点登录简称SSO，是比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用
2022-01-14 16:55:45
2261
原创 Navigator.sendBeacon实现页面埋点统计
我没了解过数据分析师这个职业，也不知道他们需要用哪些数据做什么。早之前做过页面统计，用的是神策和百度统计，里面那些数据个人觉得已经很全面了，最近公司进行一些特殊埋点统计，需要在市场想要的地方一个一个加方法调接口。这不是重点，重点是请求发起之后，如果直接跳转，请求会被浏览器取消。如果要自己统计页面浏览时长和点击事件，就只能做一些延迟和牺牲一些准确性，反正就是页面跳转需要统计的数据会丢失一些。早之前做过，还是看的阮一峰双循环延迟阻塞页面卸载，除了死循环延迟，还有其他旁门左道，比如ajax设置同步，然后在
2022-01-10 16:13:50
992
原创 性能测试工具Lighthouse
Lighthouse是一个开源的自动化的分析移动端和PC端网页性能指标的工具，npm上的简介：Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.Lighthouse有四种使用方法，chrome自带的，chrome插件，npm包，另外一种是用node，要敲代码。插件和node的就不去查了，另外两种已经很方便了。
2021-11-29 15:53:46
3075
4
原创 gulp压缩静态项目
现在不知道还有多少项目没用框架开发，虽然觉得应该是没有，但是保不齐还有很多，毕竟一些项目迭代的太多了，想要重构太花成本，就一直留存至今。想想最开始入行的时候，项目目录结构是这样的：那时候也没有什么压缩之说，就直接用运维给的可视化工具直接拖拉拽放到服务器，其实问题也不大。今天本来想试试webpack压缩一下这种老项目，后来查了一下，发现gulp更快，于是就用gulp实现了。gulp以前没用过，所以出现了一些我自己都觉得可笑的问题，但其实，这种工具用多了就会熟练一些。初始化：npm init -y安
2021-10-22 16:55:59
126
原创 纯静态引入.vue文件之http-vue-loader.js
在最早之前，我做过纯静态的项目引入vue当作模板引擎，就是那种没有任何打包压缩的项目，就是单纯的引入css、js、html的项目。现在应该是很少有这样的项目了，很少不代表没有，起码我现在在撸jq的项目（现在jq贼溜）。如果习惯了.vue文件去开发，有人就会想要直接用.vue文件当作组件。虽然我很不明白为什么，既然不是用webpack的项目，真的没必要用.vue文件，用js，直接注册组件就行，vue都提供了函数。然而，还是有这样的插件提供了用.vue文件注册组件的，那就是http-vue-loader.j
2021-10-21 15:00:24
5949
原创 npm包file-type之文件类型
最近做一个需求，只是单纯的图片上传，结果测试出现图片上传成功，但是放到产品里面黑了，而且只是两张图片会这样，本来打算是暂不解决，因为找不出问题。后来产品说最好能研究一下为什么。后来是测试说不行的那两张图片是直接修改过后缀的，于是就不予解决了。自己上网查了查，原来每个文件的文件字节流开头内容都会有一个文件类型的标记，其实文件字节流就是这个文件，改了后缀名，这个文件字节流的文件类型标记是不会被修改的。一般来说，前端上传都是input的accept那边限制一下，然后通过文件名的后缀再拦截一下，我是从来没有通过
2021-07-12 15:31:46
2837
原创 突然发现浏览器广告拦截插件原理
今天突然要解决一个bug，一个关于广告的小问题，页面元素不显示了，查了半天完全不知道为什么。然后发现是广告拦截插件引起的，知道广告插件原理，我一下子有点懵。先说明，今天主要是分享一下广告插件的原理，不是深究插件的写法，也不确定其他插件是否是这个原理，只是说一下Adblock plus这个广告拦截插件的原理。先说一下过程，有个广告创建的功能，里面有几个选项，拿其中一个选项来说，标题，我给这个输入框起的样式class名字是ad-title，结果页面这个输入框显示不了，看了一下样式的display，居然是no
2021-06-30 16:47:29
1093
原创 postcss-px-to-viewport之vw、vh、rem
很久没有做过移动端的项目了，关于移动端的自适应，最早之前用rem，我个人觉得效果很不错。忘记是哪个大神的文章提到过，lib-flexible有一些问题，建议使用viewport，今天使用一下viewport。先知道一下viewport的四个单位，vw、vh、vmax、vmin：vw:1vw 等于视口宽度的1%vh:1vh 等于视口高度的1%vmin: 选取 vw 和 vh 中最小的那个vmax:选取 vw 和 vh 中最大的那个这边需要注意的是，vw是视口宽度，是连滚动条都算在内的：<d
2021-06-24 16:55:29
1648
2
原创 简单了解低代码Low Code
低代码是很早之前就有的概念，之前也没什么关注，最近又一直看见这个字眼，于是就想着了解了解。低代码是什么？百度百科上面的介绍：低代码开发平台（LCDP）是无需编码（0代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法（参考可视编程语言），使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。 低代码开发平台（LCDP）的正式名称直到2014年6月才正式确定，整个低代码开发领域却可以追溯到更早前第四代编程语言
2021-06-23 15:58:46
482
原创 dart-sass和node-sass的区别与eslint的几个选择
今天创建vue3项目，用cli创建的时候出现了css预处理器的选择，node-sass和dart-scss。记得以前都是选择node-sass，他们的区别忘了，重新查了查这两个的区别，发现已经不是之前记忆的区别了。先说说node-sass，node-sass底层依赖libsass，是C/C++语言开发的。安装问题比较多，随便查一下node-sass安装这个词条就很多（印象中以前都是用这个，没发现安装问题）。另外就是Windows环境使用的时候必须有python2和vs才能编译成功（其实我忘记了有没有这回事
2021-06-17 17:07:59
940
原创 chrome调试工具Network一些参数
今天简单说一下chrome开发者工具（DevTools）的Network，就只是几个模块简介一下。前端开发，对这个应该都特别熟悉。Network网络面板，展示页面中所有请求的列表，可以查看各个请求的详细信息，请求的信息，响应的信息，还有各种时间线等。本来想用画图工具把每一个都标示一下，奈何有点菜，就直接介绍几个重要的，其他可以自己点一点看一看。控制器：Preserve log：跳转页面或者刷新页面还保留之前发起的请求详情。可以用来追踪一些接口。Disable cache：在调试一些加载时间或者性
2021-05-14 16:31:35
2878
原创 css是否会阻塞与DOMContentLoaded
原本只是想分享Network的一些内容，结果到DOMContentLoaded的时候给卡住了，网上很多强调css不会阻塞DOM解析，可以说对又可以说不对。在MDN上面给出了DOMContentLoaded的解释：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。也给出了模拟css的php，说是link要是置于script之后就会立即打印。于是我用node自己模拟了一个css，结果却不一样。node模拟css：c
2021-05-14 09:17:34
212
原创 V8垃圾回收机制
最早之前对垃圾回收机制就一个认知，被全局引用的变量不会被垃圾回收机制回收，后来对老生代新生代之类的有一点模糊的概念，然后最近学浏览器工作与原理有了进一步的认知。在 V8 中会把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的生存时间久的对象。新生区通常只支持 1～8M 的容量，而老生区支持的容量就大很多了。对于这两块区域，V8 分别使用两个不同的垃圾回收器，以便更高效地实施垃圾回收。副垃圾回收器，主要负责新生代的垃圾回收。主垃圾回收器，主要负责老生代的垃圾回收。新生代中用
2021-05-08 15:30:42
182
3
原创 重新认识HTML渲染过程
浏览器从输入地址到显示页面的过程，这是面试特别喜欢问的一道题，也是基础的一个概念。到现在，网上能找到的也都是很老的那一套，早之前我的认知也是那样：DOM树、CSSOM树、render树、布局、绘制、重排、重绘。最近在学习李兵老是的浏览器工作原理与实践，才知道现在的渲染过程早已经不是这样了，很多概念都是刚知道。自己总结了一下过程和一些概念。1、构建DOM树：第一步构建DOM树都是一样的，DMO是document object module，是保存在内存中的树结构，可以通过js查询或修改其内容。浏览器打
2021-04-26 16:58:29
200
2
原创 async/await不阻塞事件
在我的认知中，async/await会等待await返回，那么必然就是同步的，既然是同步的，那么就是会阻塞事件循环。刚好有个同事问了一个接口并发的问题，看了一下代码，我看见有使用async/await，于是信誓旦旦的说会阻塞，结果打脸了，结果是并不会，看下面代码：async function fn1(){ console.log(1); await pr1(); await pr2(); console.log(2);};function fn2(){ console.log(
2021-04-14 17:12:13
2018
8
原创 用Electron打包vue项目变成.exe桌面程序
Electron现在挺火的，官网的标语是使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。只是没有具体的使用开发项目，所以只是试试创建一个vue项目和用老项目试试能不能打包出来。新建项目和直接用老项目都试了，查到的有好几种方法，这边就使用一种，觉得比较简单。创建新的vue项目，这一步就不多说了：vue create electron-demo安装electron，没有全局：npm install electron很容易报错：添加模块，这个命令是添加模块，可以去vue
2021-03-19 14:54:34
569
原创 node命令交互inquirer
用过vue或者react的用脚手架新建项目的应该都进行过命令交互，vue创建的时候会让你选择vue2还是vue3，也有多选要什么配置，也有输入y或者n选择是否用history路由等，这其实用inquire这个包都能实现。环境跟之前commander使用是一样的，初始化之后配置bin和npm link一下，这边就不再说了。安装inquirer：npm install inquirer引入：var inquirer = require(‘inquirer’);inquirer主要知道这几个类型类型，
2021-03-05 15:42:22
1040
原创 node命令行解决方案Commander.js
命令行的交互应该都不陌生，从最简单的看版本(node --version)到用命令行创建项目（vue create project），以前不知道的时候觉得做这些交互的应该很难，现在知道了一些就不觉得那么神秘了。一般来说我们都会直接用现成的包，包括那些框架也都是用commander这个包去实现。今天就是简单了解一下commander的用法。想要用命令，就要链接到全局，之前已经分享过npm link，这边简单再说一下：初始化项目：npm init -ypackage.json配置bin：“bin”: “
2021-03-03 17:42:33
370
3
原创 清除所有定时器计时器
今天也是心血来潮，之前做一个需求是手机号绑定和邮箱绑定的，都需要获取验证码倒计时，还要弹窗打开就恢复默认，其实就是清除计时器。讲道理，一般也就一个计时器在跑，测试愣是提出了我点击获取手机验证码马上取消，然后点击获取邮箱验证码，我当时就想了一下原生应该提供了清除所有计时器的方法，结果没有，只好定义了六个变量来获取不同的计时器，然后分别清除。今天看了一下setInterval和setTimeout返回的ID，都是数字，而且是递增的关系。我在一个HTML里面引入a.js和b.js，两个js里面都设置了一set
2021-02-01 10:06:59
2078
原创 深拷贝真难
深拷贝浅拷贝的原理我是已经懂了，之前也有分享过。只是深拷贝浅拷贝的方法却从来没有真的去了解过。想想之前的面试，问到深拷贝浅拷贝的时候，都是说一下原理，问到方法，张口就来JSON.parse和JSON.stringify，如果有函数的话就递归循环拷贝。却从来没有写过递归或者循环拷贝的函数。今天写了一下深拷贝数据的函数，发现深拷贝其实好难好难，单单一个数据的深拷贝就让我觉得脑壳都受不了了，更别说一些大佬们还提到了原型链、dom、RegExp、函数、浏览器内置函数之类的是否拷贝或者说怎么处理，再加上兼容，以后
2021-01-26 17:51:23
130
原创 vue拖拽指令之offsetX、clientX、pageX、screenX
自己一直很想做个拖拽生成静态页面的东西，说简单也简单，这个东西按道理用jsx语法是最好的，用render方法渲染生成的json。只是自己对这块还是没信心。今天写个vue的拖拽指令，顺便理一下offsetX、pageX、clientX、screenX这几个属性，一直记不住。先大概记一下这几个的翻译（应该是正确的）：offset：偏移；client：客户；page：页面；screen：屏幕；offsetX：相对于触发元素的偏移距离；clientX：相对于客户端浏览器的距离，可以理解成相对于地址栏以下的区
2021-01-19 16:41:58
3527
原创 锚点导航小demo
锚点导航这种功能应该很常见，早之前就分享过移动端移动端导航简单实现，配合起来就很容易实现可移动的锚点导航，而且不是用hash模式。当然，PC端也能直接用。先上效果：为了方便直接用vue语法，首先要给每一个块一个唯一的ref，然后初始化的时候记录每一个块距离顶部的距离和每一个块的高度，并监听滚动：this.$nextTick(() => { this.firstOffsetTop = this.$refs[this.currentKey][0].offsetTop; doc
2021-01-07 09:45:43
937
原创 elementUI组件替换
2020已经最后一天了，都在说2020是不幸的一年，从年初到年尾，2020注定是不平静的一年。很快，我们就要对2020说再见了，原本想做个总结，结果发现也没什么好总结，2020没什么收获，最大的收获就是自己重新拾起了篮球。所以，在最后一天分享个知识点，elementUI组件替换。最近一直在撸JQ的代码，一直在复制粘贴，把自己都给敲懵了。最近撸的代码确实是很枯燥，不过也挺佩服之前堆叠出来的这个项目，也觉得JQ是真的很不错，在操作dom这一块，是真的无敌。最近产品提出了一个优化，element的dialog
2020-12-31 17:36:08
850
原创 element源码调试
一直用vue开发，PC端的后台系统使用的UI库一直是element，以前也没想过什么情况需要去看源码调试源码，反正就是一个UI库，研究API就是了。后来发现，有时候发现了一些问题，网上的文章所有的答案都一样，很少去验证，这时候要自己去看看源码或者调试一下。上个星期遇见说element的form表单用v-if会造成校验失败，当然，API很明确的给出了动态删减表单的方法，直接用v-if当然是一个偷懒取巧的方法，不过还是去研究了一下怎么调试element源码。先去GitHub下载element的代码，建议直接
2020-12-02 10:11:20
1212
原创 实现一个压缩图片功能
现在在线图片压缩的网站很多，我比较推荐熊猫压缩，于是参考熊猫压缩的样式自己也写了一个压缩图片的功能，效果：有兴趣的可以试试：http://wzdingzhi.top/system/compressimg核心是通过创建canvas，调用canvas的toDataURL和toBlob实现压缩，可以从 0 到 1 的区间内选择图片的质量，并不是实现大小的百分比压缩，是根据质量，具体怎么算我就不知道了。这两个api可以去MDN看一下。本来想贴一些代码，想想还是直接看gitHub吧：https://gith
2020-11-30 11:07:42
335
原创 学学文件对象
平时开发项目，很少做对二进制数据的处理，最多就是上传下载，大部分也都是直接实现功能，不会自己处理二进制对象。比如现在视频直播比较火的flv.js库，就是通过原生js解码数据，底层还是基于二进制。今天大概学一学几个概念：Blob、File、Buffer、ArrayBuffer、FileReader、TypedArray、DataView、MIME这几个应该是我们处理文件会用到的原生对象，大概先了解一下：Blob：Blob 对象表示一个不可变、原始数据的类文件对象。是js专门用来操作文件的对象。Fil
2020-11-27 09:15:35
396
原创 npm和yarn的lock文件
npm安装依赖的时候会生成package-lock.json文件，几乎不会有人去关注这个文件是干嘛的，今天同事突然跟我说以后安装依赖都用yarn，不然会出现两个lock文件。yarn是Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，说是为了弥补npm的一些缺陷。最大的体现是速度上，npm确实是慢，国内更是很容易失败报错，我基本使用淘宝cnpm。npm必须等到上一个依赖安装成功之后才能安装下一个，yarn是并行安装，速度上提高的不是一点半点，其实安装依
2020-11-20 17:48:12
2628
原创 最近项目遇到的坑
也不知道为什么，做了那么多年业务，最近做的项目遇见的小问题比以前遇见的都多，难道是最近项目的一些小功能比较反人类？这边记录一些小问题，以后碰上了来翻一翻，再碰见就慢慢积累。记住密码问题：这个就不多说了，之前已经分享过了。监听滚动无效：最近在vue项目里面用window.addEventListener监听滚动，结果失效了，不管在哪个生命周期还是nextTick都无效，可能是穿透了，内容在滚动，body没有滚动。最后是在最后面加一个true，捕获阶段就执行，默认false。监听滚动获取滚动条偏移量为
2020-11-19 09:49:40
899
2
原创 axios实现refreshToken的两种方式
保持登录的实现有很多，都有个自的优缺点，作为前端当然最喜欢后台注入cookie，后台自己管理session时效。这当然只是期望，还是很多用token和refresnToken的机制。而管理token和刷新token就是一个问题了，比如判断过期时间到了去刷新token之后再请求，同时并发的请求你不能每个都去刷新一次token，只刷新一个，那并发的请求还是老的token。解决的方法有两种，一种是请求之前处理，把同时并发的请求都挂起，用promise。这个方法不好的就是要新增白名单，那些不需要刷新token的
2020-11-10 17:25:30
1670
原创 学学axios
axios现在很火，本人觉得用的人比Ajax多一些，现在都用框架开发，而且使用Ajax要安装jQuery，好像有个人单独抽离出来，从来没用过，所以导致axios现在用的很多，今天随便学一些。axios基于promise的HTTP库，能设置请求和相应拦截，可以处理请求和响应数据，内部好像还支持防御CSRF跨站请求伪造攻击，浏览器和nodejs都可以使用，使用方法的API就不多说介绍了，可以去看看文档：http://www.axios-js.com/zh-cn/docs/先说说浏览器和nodejs环境的判
2020-11-09 16:19:13
505
原创 拖拽上传和记住密码问题
最近一直在开发项目，不需要加班，但是要一整天都撸代码，慢慢的居然发现自己对于业务代码有了一些进步，尤其是对elementUi的使用。上传，之前从来没有说需要提示有超出大小范围或者是文件不支持的，因为都默认是后台管理，一些大家默认的东西就不需要。这次不行，要提示，而element上传拖拽被过滤了，类型不符合的不会有反应，内部已经过滤了。不限制accept可以，但是点击上传的时候又没办法过滤。一开始想着要不要换个控件，后来又想着能不能覆盖element的方法，手动触发handleClick，试过了效果都不理想
2020-11-09 16:14:11
314
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人