![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
文章平均质量分 86
在厕所喝茶
一名热爱技术与分享的前端工程师,闲来无事喜欢打王者荣耀
展开
-
给前端开发的一份 flutter 常用组件指南
给前端开发的一份 flutter 常用组件指南原创 2023-06-27 22:40:11 · 806 阅读 · 0 评论 -
基于 typescript 装饰器实现 express 路由
基于 typescript 装饰器实现 express 路由原创 2023-05-22 21:21:17 · 668 阅读 · 1 评论 -
vue2源码(九)-- 挂载阶段
vue2源码(九)-- 挂载阶段原创 2023-03-29 20:56:44 · 608 阅读 · 0 评论 -
vue2源码(八)-- 模板编译阶段
vue2源码(八)-- 模板编译阶段原创 2023-02-04 22:42:23 · 614 阅读 · 0 评论 -
vue2源码(七)-- 初始化阶段
vue2源码(七)-- 初始化阶段原创 2022-12-25 22:09:25 · 1328 阅读 · 2 评论 -
vue2源码(六)-- 响应式数据
vue2源码(六)-- 响应式数据原创 2022-11-27 22:34:10 · 860 阅读 · 0 评论 -
vue2源码(五)-- computed 计算属性的实现
computed 计算属性的实现原创 2022-11-09 22:21:24 · 1023 阅读 · 0 评论 -
vue2源码(四)-- 其他全局 api
vue2源码(四)-- 其他全局 api原创 2022-10-24 08:47:53 · 214 阅读 · 0 评论 -
vue2源码(二)-- Vue.set和Vue.delete
vue2源码(二)-- Vue.set和Vue.delete原创 2022-09-16 23:16:21 · 723 阅读 · 0 评论 -
vue2源码(一)-- Vue.extend
Vue.extend函数源码分析原创 2022-08-31 22:24:15 · 880 阅读 · 0 评论 -
vue实现js调用式组件
vue实现js调用式组件原创 2022-07-25 12:41:28 · 3586 阅读 · 0 评论 -
微前端实现原理研究总结
微前端实现原理原创 2022-07-04 09:46:19 · 545 阅读 · 0 评论 -
click 事件中的宏任务和微任务
click 事件中的宏任务和微任务原创 2022-06-20 11:28:16 · 1852 阅读 · 0 评论 -
通过继承扩展 element-ui 组件的功能
通过继承扩展 element-ui 组件的功能原创 2022-05-24 10:03:20 · 4446 阅读 · 0 评论 -
开发一个高性能可扩展的脚手架
高性能可扩展的脚手架原创 2022-05-11 09:46:51 · 175 阅读 · 0 评论 -
在 mousedown 事件中让 input 标签获取焦点的问题
在 mousedown 事件中让 input 标签获取焦点的问题原创 2022-04-22 10:11:48 · 926 阅读 · 0 评论 -
axios源码深入解读(电子文档)
axios源码深入解读原创 2022-03-25 10:13:16 · 486 阅读 · 0 评论 -
npm 包离线化
npm 包离线化原创 2022-02-28 18:52:05 · 2051 阅读 · 0 评论 -
vue 多项目公共组件处理方案
vue 多项目公共组件处理方案原创 2022-02-07 13:19:16 · 3151 阅读 · 3 评论 -
axios 和洋葱模型中间件
axios 和洋葱模型中间件原创 2022-01-27 13:58:00 · 641 阅读 · 0 评论 -
微信小程序 Page,Component 二次封装(符合 vue2 的开发习惯)
微信小程序Component,Page构造函数二次封装(符合vue2的开发习惯)原创 2022-01-20 19:13:00 · 961 阅读 · 0 评论 -
如何做好一个前端业务组件库
本文主要是讲述了如何做好一个业务组件库,主要是从我在公司的业务组件库开发中总结出来的经验原创 2021-11-30 20:02:46 · 2871 阅读 · 0 评论 -
typescript 从零开发视频播放器
typescript 从零开发视频播放器前言项目架构设计技术栈双端支持元素的显示和隐藏说明组件化开发组件之间的通讯拖拽行为初始化模板`video-player` video 标签组件控制器的显示和隐藏显示时间全屏进度条显示/隐藏 loading快捷键其他组件开发国际化功能实现插件介绍实现插件说明插件代码示例总结前言目前比较流行的开源视频播放器应该就是dplayer,我们公司现在也是正在使用这个开源的视频播放器。但是有些需求dplayer并没有实现,或者是功能有了但是技术上跟公司的所用的方案有所不一样。比原创 2021-10-29 09:26:36 · 426 阅读 · 0 评论 -
vue性能优化
vue性能优化前言函数式组件冻结列表数据子组件拆分局部变量(缓存变量)computed 的缓存特性v-if 和 v-for 不要同时出现不需要渲染在视图的数据不要写在 data 中v-for 中的 keykeep-alive渐进式渲染时间片切割组件懒加载总结前言本文主要记录日常开发中常见的优化技巧。主要是针对2.x版本的。函数式组件函数式组件是使用 functional 字段来进行声明的。它是一个没有data响应式数据和this上下文,也没有生命周期钩子函数这些东西,只接受一个props。普通对象类原创 2021-10-09 20:11:11 · 1692 阅读 · 0 评论 -
vue2 组件库开发记录-开发技巧
vue2 组件库开发记录-开发技巧前言props 属性provide 和 inject 属性前言本文主要是记录我在开发组件库时的一些开发技巧。props 属性props 是用来做父子组件之间的通信,并且 props 的写法有很多种,相信做 vue 开发的同学应该都知道的。所以我这里主要说 2 点当默认值是一个数组或者是对象时,必须从一个工厂函数中返回,否则所有组件实例都会共用一个值export default { props: { obj: { type: Objec原创 2021-09-13 20:02:31 · 554 阅读 · 0 评论 -
vue2 组件库开发记录-搭建环境(第二次架构升级)
vue2 组件库开发记录-搭建环境(第二次架构升级)前言项目架构变化初始化 lerna项目目录结构子项目目录结构使用脚本创建组件子项目的模板编写 rollup+scss 的配置打包公共代码打包组件代码打包全量包组件文档前言本文主要是记录我在开发组件库时如何搭建环境(第二次架构升级)。项目架构变化本次架构升级主要参考了element-plus,包含以下几方面:打包构建工具由webpack改成rollup。rollup配置要比webpack简单的多了。rollup天然支持tree sharking,原创 2021-08-29 10:15:21 · 728 阅读 · 0 评论 -
微信小程序组件库开发记录
微信小程序组件库开发记录背景前言技术选型环境搭建安装 gulp将`scss`编译为`wxss`压缩`wxml`,`js`,`json`文件和图片拷贝文件到另一个目录删除目录整合创建组件模板开发技巧properties 父组件给子组件传递数据behaviors 公共行为optionsexternalClasses 外部样式类relations 定义组件之间的关系组件生命周期组件页面生命周期兼容性处理查询元素或者视图窗口信息js 调用组件关于 properties 和 setData双向数据绑定获取当前页面的上原创 2021-07-25 19:31:30 · 737 阅读 · 8 评论 -
微信小程序 api 缓存方案
微信小程序 api 缓存方案背景为了应对用户流量大,减轻服务器的压力,减少网络请求次数,加快数据的显示,以及提高用户体验。我们现在需要把一些公共请求进行本地缓存,并且提供不同的更新策略给开发者选择。前言与 web 端不同的是,微信小程序并没有cookie,localStorage,sessionStorage,indexedDB,Web SQL(已废弃),service worker这些花里胡哨的东西。只有一套已经封装好的接口。所以就需要基于微信小程序提供的这套数据缓存接口来实现我们的 api 缓存原创 2021-05-28 14:10:10 · 2583 阅读 · 0 评论 -
前端代码工作流
编辑器选择在刚接触前端的时候,我使用的编辑器是sublime。主要特点是轻量,缺点就是安装插件的时候过程比较麻烦,而且代码提示做的也不够好;后来听说webstrom这个地表最强编辑器功能很强大,就尝试着使用这个编辑器。webstrom给我的感觉是就功能很强大,但是很臃肿,软件包很大。实际上我用到编辑器的功能就几个,但是webstrom给我提供了一大堆功能。主要还是webstrom这东西太吃内存了,电脑性能支撑不起来,所以后面使用了一段时间就放弃了;后来有同学给我推荐了vscode这个编辑器。发现这个编辑器原创 2021-05-10 19:53:54 · 2463 阅读 · 8 评论 -
本地自动化部署脚手架开发
前言由于在测试阶段需要修复bug,需要多次更新前端代码到测试环境。首先需要打包代码,压缩,然后使用ssh工具连接到服务器,上传压缩文件,备份旧代码,解压,删除压缩包文件,最后才能完成更新,这一系列过程比较繁琐,浪费时间。所以我就打算开发一个比较通用的本地自动化部署脚手架,用来发布部署代码。可能会有人问为什么不是用Jenkins这种持续部署的工具呢。原因如下:jenkins要求的机器性能比较高,吃内存,如果单单用来做前端自动化部署,就可能有点大材小用了jenkins是通过web hook来触发部署的,原创 2021-04-17 11:07:34 · 297 阅读 · 0 评论 -
axios源码浅分析
axios源码浅分析特点axios.create(config)拦截器调用顺序合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入特点基于xhr(node)+promise的异步ajax请求库浏览器或者node都能使用支持请求/响应拦截原创 2021-03-13 10:03:03 · 126 阅读 · 0 评论 -
lin-view-ui组件库重构
lin-view-ui组件库重构前言重构内容打包重构文档重构测试用例环境重构代码规范和提交规范总结前言这篇文章主要是记录我在重构的时候遇见的困难和坑点。重构内容这次重构主要包含4个方面。打包方面的重构。原本的组件库是使用@vue/cli3生成的项目改造出来的,这种方法可以减少书写打包配置的麻烦,但是带来的缺点就是不利后面的扩展,比如我想在打包过程中生成版本文件,在@vue/cli3脚手架中实现起来就有点困难了。@vue/cli3脚手架只能有一个配置文件,对于一个组件库来说,一个配置文件肯原创 2021-01-16 20:09:57 · 266 阅读 · 1 评论 -
微信小程序ui组件库开发记录
微信小程序ui组件库环境搭建前言技术选型功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入前言开发这套微信小程序ui组件库主要是更加深入的了解微信小程序自定义组件的开发,同时为了跟大家一起学习交流微信小程序,然后就有了这个念头想要原创 2020-12-18 11:31:21 · 409 阅读 · 0 评论 -
从零开始搭建pc端Vue组件库lin-view-ui
从零开始搭建pc端Vue组件库lin-view-ui前言环境准备新建项目改造目录结构修改package.json添加npm script脚本通用配置打包全量包配置单独打包每个组件,实现按需加载前言虽然目前有很多vue组件库,比如Element-UI,iview等等。每个组件库都有各自的特点,但是每个公司需要的业务组件是不尽相同的,没有哪一个组件库能够非常完美的符合各种需求。比如我现在使用的是Element-UI,我需要使用到Select组件,但是现在有个需求需要进行分页加载,这个时候Element-UI原创 2020-11-04 22:56:27 · 970 阅读 · 1 评论 -
vue ssr 实践
vue ssr 实践技术栈初始化项目并安装相关依赖编写webpack相关配置编写客户端,服务端通用代码组件异步获取数据编写客户端入口代码编写服务端入口代码后台代码总结技术栈后台使用的是express,前端使用的是vue+webpack。初始化项目并安装相关依赖首先新建一个文件夹, npm init -y 初始化项目,然后安装相关依赖包,这里简单列一下需要安装的依赖包以及相关版本 "dependencies": { "express": "^4.17.1", "vue": "^2.原创 2020-08-16 14:49:14 · 321 阅读 · 0 评论 -
jenkins安装与使用
目录安装JDK安装jenkinsjenkins常见命令使用jenkins新建任务总结安装JDK搜索jdk安装包yum search java|grep jdk选择需要安装的JDK版本,我这里安装的是JDK1.8,下载之后默认的目录为: /usr/lib/jvm/yum install java-1.8.0-openjdk安装jenkins导入镜像wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redha原创 2020-06-27 23:34:56 · 539 阅读 · 0 评论 -
实现一个简易版的express
实现的功能首先说明一下需要实现那些功能use函数,这个函数有2个参数,第一个参数是需要匹配的路径,可不传,默认是匹配所有路径,第二个是回调函数。all函数,这个函数有2个参数,第一个参数是需要匹配的路径,第二个参数是回调函数。listen函数,启动监听get,post等常用的请求函数,这些函数都有2个参数,第一个参数是需要匹配的路径,第二个参数是回调函数。next核心函数,调用该函数时不传参则调到下一个处理函数,传参则直接跳到错误中间件需要实现的功能代码如下:const express原创 2020-06-07 22:47:41 · 236 阅读 · 0 评论 -
前端测试框架—jest基本使用
前端测试框架—jest基本使用前言jest常见匹配器基本类型booleanNumberStringArray,Set异常取反命令行工具使用异步代码测试方法钩子函数分组(钩子函数从外往内执行)mocksnapshot 快照测试mock -- timers定时器ES6 中类的测试总结前言最近想着做一个UI组件库,然后发现做一个UI组件库所需要的技术还是比较多的,比如前端测试,自动化部署,打包构建等...原创 2020-04-15 22:09:22 · 1287 阅读 · 0 评论