前端
文章平均质量分 88
谭光志
FE/Nodejs/Rust 全栈
Github: https://github.com/woai3c
展开
-
markdown 编辑器实现双屏同步滚动
markdown 编辑器实现双屏同步滚动原创 2022-08-09 13:22:26 · 621 阅读 · 0 评论 -
可视化拖拽组件库一些技术要点原理分析(四)
低代码,可视化拖拽系列第四篇原创 2022-08-06 16:42:38 · 624 阅读 · 0 评论 -
手把手教你写一个简易的微前端框架
手把手教你写一个简易的微前端框架原创 2022-02-27 16:00:55 · 1268 阅读 · 0 评论 -
2021 年终总结:奔向北京,迎接 996
2021 年已经结束,对于我来说,今年发生了不少的事情,所以我觉得写个年终总结很有必要,于是就有了这篇文章。一、不满足于现状,前往北京发展从转行开始,我就一直在天津工作。虽然当时转行已经 29 岁了,但是对于未来能做成什么事,要达到什么样的高度并没有清晰的认识,也没有规划。毕竟当时转行也只是为了混口饭吃,能让自己在天津活下去。天津的互联网行业发展非常差,和北京比一个天一个地。而且大多数公司都是项目外包型公司,就是在外面接项目做来养活公司。基本上都是没什么技术含量的项目,一套模板能放在多个项目上用。我在原创 2022-01-15 22:42:13 · 3782 阅读 · 0 评论 -
前端监控 SDK 的一些技术要点原理分析
一个完整的前端监控平台包括三个部分:数据采集与上报、数据整理和存储、数据展示。本文要讲的就是其中的第一个环节——数据采集与上报。下图是本文要讲述内容的大纲,大家可以先大致了解一下:仅看理论知识是比较难以理解的,为此我结合本文要讲的技术要点写了一个简单的监控 SDK,可以用它来写一些简单的 DEMO,帮助加深理解。再结合本文一起阅读,效果更好。性能数据采集chrome 开发团队提出了一系列用于检测网页性能的指标:FP(first-paint),从页面加载开始到第一个像素绘制到屏幕上的时间FC原创 2021-10-11 23:05:18 · 680 阅读 · 0 评论 -
rollup + typescript 打包后无法结束的问题
最近用 rollup 和 typescript 写一个组件库,发现每次打包完成后总是不结束,程序一直卡着…就和上图一样卡着不动。花了半天时间排查,发现是 @rollup/plugin-typescript 和 typescript 依赖版本的问题。因为每次下载都是用的最新的依赖版本,所以这两个 npm 包之间的兼容性不太好,最后将这两个依赖降级后(依赖版本写死,@rollup/plugin-typescript 为 8.2.1,typescript 为 4.2.4),打包就正常了,不会一直卡着不结束。原创 2021-09-04 16:16:11 · 1035 阅读 · 0 评论 -
手写 git hooks 脚本(pre-commit、commit-msg)
简介Git 能在特定的重要动作发生时触发自定义脚本,其中比较常用的有:pre-commit、commit-msg、pre-push 等钩子(hooks)。我们可以在 pre-commit 触发时进行代码格式验证,在 commit-msg 触发时对 commit 消息和提交用户进行验证,在 pre-push 触发时进行单元测试、e2e 测试等操作。Git 在执行 git init 进行初始化时,会在 .git/hooks 目录生成一系列的 hooks 脚本:从上图可以看到每个脚本的后缀都是以 .sam原创 2021-07-18 23:57:53 · 1736 阅读 · 1 评论 -
手把手教你写一个脚手架(二)
时隔三个月,终于有时间写脚手架系列第二篇文章了,在北京上班确实比天津忙多了,都没时间摸鱼。如果你没看过本系列的第一篇文章手把手教你写一个脚手架,建议先看一遍再来阅读本文,效果更好。mini-cli 项目 github 地址:https://github.com/woai3c/mini-cliv3 版本的代码在 v3 分支,v4 版本的代码在 v4 分支。第三个版本 v3第三个版本主要添加了两个功能:将项目拆分为 monorepo 的组织方式。新增 add 命令,可以通过 mvc add xxx原创 2021-05-24 14:00:17 · 547 阅读 · 0 评论 -
手把手教你写一个脚手架
最近在学习 vue-cli 的源码,获益良多。为了让自己理解得更加深刻,我决定模仿它造一个轮子,争取尽可能多的实现原有的功能。我将这个轮子分成三个版本:尽可能用最少的代码实现一个最简版本的脚手架。在 1 的基础上添加一些辅助功能,例如选择包管理器、npm 源等等。实现插件化,可以自由的进行扩展。在不影响内部源码的情况下,添加功能。有人可能不懂脚手架是什么。按我的理解,脚手架就是帮助你把项目的基础架子搭好。例如项目依赖、模板、构建工具等等。让你不用从零开始配置一个项目,尽可能快的进行业务开发。原创 2021-02-23 23:34:56 · 577 阅读 · 0 评论 -
Vue 项目一些常见问题的解决方案
有一些问题不限于 Vue,还适应于其他类型的 SPA 项目。1. 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢?就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的。如果一个页面,有角色越权访问,这时就得做出限制了。一种方法是通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法。具体细节请看下一节的《动态菜单》。另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限。如果有权限就允许访问,没有权限就拒绝,原创 2021-02-19 09:56:12 · 588 阅读 · 0 评论 -
可视化拖拽组件库一些技术要点原理分析(三)
本文是可视化拖拽系列的第三篇,之前的两篇文章一共对 17 个功能点的技术原理进行了分析:编辑器自定义组件拖拽删除组件、调整图层层级放大缩小撤消、重做组件属性设置吸附预览、保存代码绑定事件绑定动画导入 PSD手机模式拖拽旋转复制粘贴剪切数据交互发布本文在此基础上,将对以下几个功能点的技术原理进行分析:多个组件的组合和拆分文本组件矩形组件锁定组件快捷键网格线编辑器快照的另一种实现方式如果你对我之前的两篇文章不是很了解,建议先把这两篇文章看一遍,再来阅读原创 2021-02-15 09:58:13 · 784 阅读 · 0 评论 -
可视化拖拽组件库一些技术要点原理分析(二)
本文是对《可视化拖拽组件库一些技术要点原理分析》的补充。上一篇文章主要讲解了以下几个功能点:编辑器自定义组件拖拽删除组件、调整图层层级放大缩小撤消、重做组件属性设置吸附预览、保存代码绑定事件绑定动画导入 PSD手机模式现在这篇文章会在此基础上再补充 4 个功能点,分别是:拖拽旋转复制粘贴剪切数据交互发布和上篇文章一样,我已经将新功能的代码更新到了 github:github 项目地址在线预览友善提醒:建议结合源码一起阅读,效果更好(这个 DEMO 使用原创 2021-01-18 09:16:51 · 557 阅读 · 0 评论 -
可视化拖拽组件库一些技术要点原理分析
本文主要对以下技术要点进行分析:编辑器自定义组件拖拽删除组件、调整图层层级放大缩小撤消、重做组件属性设置吸附预览、保存代码绑定事件绑定动画导入 PSD手机模式为了让本文更加容易理解,我将以上技术要点结合在一起写了一个可视化拖拽组件库 DEMO:github 项目地址在线预览建议结合源码一起阅读,效果更好(这个 DEMO 使用的是 Vue 技术栈)。1. 编辑器先来看一下页面的整体结构。这一节要讲的编辑器其实就是中间的画布。它的作用是:当从左边组件列表拖拽出一原创 2020-12-21 12:07:13 · 1707 阅读 · 0 评论 -
chrome 开发者工具——前端实用功能总结
1. 查看元素伪类 css 样式例如我想查看元素触发 hover 时的 css 样式。先选中该元素,然后按下图操作:2. 临时增删元素 class3. document.body.contentEditable="true"在控制台输入 document.body.contentEditable="true",就可以对页面直接进行编辑。4. 查看 placeholder 样式现在可以查看元素的 placeholder 样式了:5. 测试页面性能和 SEO下面是测试报告:参考原创 2020-11-18 10:53:19 · 361 阅读 · 1 评论 -
而立之年——回顾我的前端转行之路
为什么转行因为混得不好。在成为程序员之前,我干过很多工作。由于学历的问题(高中),我的工作基本上都是体力活。包括但不限于:工厂普工、销售(没有干销售的才能)、搬运工、摆地摊等,转行前最后一份工作是修电脑。这么多年,月薪没高过 3300…后来偶然一个机会我发现了知乎这个网站,在上面了解到程序员的各种优点。于是,我下定决心转行(2016 年,当时 28 了),辞职在家自学编程。并且也得到了媳妇的支持,感谢我的媳妇。转行准备转行选择前端也是在知乎上看网友分析的,比后端好入门。如何选择教程?最好在网上原创 2020-11-16 15:33:08 · 1121 阅读 · 1 评论 -
编译原理实战入门:用 JavaScript 写一个简单的四则运算编译器(修订版)
编译器是一个程序,作用是将一门语言翻译成另一门语言。例如 babel 就是一个编译器,它将 es6 版本的 js 翻译成 es5 版本的 js。从这个角度来看,将英语翻译成中文的翻译软件也属于编译器。一般的程序,CPU 是无法直接执行的,因为 CPU 只能识别机器指令。所以要想执行一个程序,首先要将高级语言编写的程序翻译为汇编代码(Java 还多了一个步骤,将高级语言翻译成字节码),再将汇编代码翻译为机器指令,这样 CPU 才能识别并执行。由于汇编语言和机器语言一一对应,并且汇编语言更具有可读性。所以原创 2020-11-10 14:59:03 · 685 阅读 · 0 评论 -
手把手带你入门前端工程化——超详细教程
本文将分成以下 7 个小节:技术选型统一规范测试部署监控性能优化重构部分小节提供了非常详细的实战教程,让大家动手实践。另外我还写了一个前端工程化 demo 放在 github 上。这个 demo 包含了 js、css、git 验证,其中 js、css 验证需要安装 VSCode,具体教程在下文中会有提及。技术选型对于前端来说,技术选型挺简单的。就是做选择题,三大框架中选一个。个人认为可以依据以下两个特点来选:选你或团队最熟的,保证在遇到棘手的问题时有人能填坑。选市场占有率高的原创 2020-11-06 22:12:08 · 771 阅读 · 1 评论 -
手把手教你搭建 Vue 服务端渲染项目
建议先阅读官方指南——Vue.js 服务器端渲染指南,再回到本文开始阅读。本文将分成以下两部分:简述 Vue SSR 过程从零开始搭建 SSR 项目好了,下面开始正文。简述 Vue SSR 过程客户端渲染过程访问客户端渲染的网站。服务器返回一个包含了引入资源语句和 <div id="app"></div> 的 HTML 文件。客户端通过 HTTP 向服务器请求资源,当必要的资源都加载完毕后,执行 new Vue() 开始实例化并渲染页面。服务端渲染过程原创 2020-11-02 17:00:20 · 1737 阅读 · 1 评论 -
前端项目自动化部署——超详细教程(Jenkins、Github Actions)
参考资料Docker 入门教程原创 2020-10-26 10:04:50 · 2120 阅读 · 2 评论 -
前端国际化辅助工具——自动替换中文并翻译
github 项目地址i18n-replace 是一个能够自动替换中文并支持自动翻译的前端国际化辅助工具。它具有以下功能:根据你提供的默认映射数据({ 中文:变量 }),i18n-replace 会把中文替换成对应的变量。如果没有提供映射数据,则使用默认规则替换中文并生成变量。将替换出来的中文自动翻译成目标语言(默认为 en,即英语)。自动翻译功能使用的是百度免费翻译 API,每秒只能调用一次,并且需要你注册百度翻译平台的账号。然后将 appid 和密钥填入 i18n-replace 的配原创 2020-09-20 12:26:37 · 3570 阅读 · 4 评论 -
深入了解 webpack 模块加载原理
webpack 模块加载原理原创 2020-09-14 22:40:53 · 1714 阅读 · 0 评论 -
实现一个 webpack loader 和 webpack plugin
loader官网上的定义:loader 是一个转换器,用于对源代码进行转换。例如 babel-loader 可以将 ES6 代码转换为 ES5 代码;sass-loader 将 sass 代码转换为 css 代码。一般 loader 的配置代码如下:module: { rules: [ { test: /\.js$/, use: [ // loader原创 2020-09-11 22:34:41 · 154 阅读 · 0 评论 -
从 rollup 初版源码学习打包原理
前言为了学习 rollup 打包原理,我克隆了最新版(v2.26.5)的源码。然后发现打包器和我想像的不太一样,代码实在太多了,光看 d.ts 文件就看得头疼。为了看看源码到底有多少行,我写了个脚本,结果发现有 19650行,崩溃…这就能打消我学习 rollup 的决心吗?不可能,退而求其次,我下载了 rollup 初版源码,才 1000 行左右。我的目的是学习 rollup 怎么打包的,怎么做 tree-shaking 的。而初版源码已经实现了这两个功能(半成品),所以看初版源码已经足够了。好了原创 2020-08-30 09:33:55 · 828 阅读 · 0 评论 -
Vue3 模板编译原理
Vue 的编译模块包含 4 个目录:compiler-corecompiler-dom // 浏览器compiler-sfc // 单文件组件compiler-ssr // 服务端渲染其中 compiler-core 模块是 Vue 编译的核心模块,并且是平台无关的。而剩下的三个都是在 compiler-core 的基础上针对不同的平台作了适配处理。Vue 的编译分为三个阶段,分别是:parse、transform、codegen。其中 parse 阶段将模板字符串转化为语法抽象树 AST。原创 2020-08-12 15:30:13 · 653 阅读 · 0 评论 -
vue-mergeable-table 动态生成的可合并行列的表格
项目地址可以根据数据动态生成可合并行列的表格。文档数据选项options: { cols: 6, // 要生成的表格列数 rows: 7, // 要生成的表格行数 这个表是 7 * 6 merge: [ // 多个合并规则 { row: 0, // 起始行 col: 0, // 起始列 rowspan: 2, // 占2行,默认为 1 ,为 1 时可不填 cols原创 2020-07-17 16:17:09 · 600 阅读 · 0 评论 -
Vue3 响应式原理
前言学习 Vue3.0 源码必须对以下知识有所了解:proxy reflect iteratormap weakmap set weakset symbol这些知识可以看一下阮一峰老师的《ES6 入门教程》。如果不会 ts,我觉得影响不大,了解一下泛型就可以了。因为我就没用过 TS,但是不影响看代码。阅读源码,建议先过一遍该模块下的 API,了解一下有哪些功能。然后再看一遍相关的单元测试,单元测试一般会把所有的功能细节都测一边。对源码的功能有所了解后,再去阅读源码的细节,效果更好。prox原创 2020-07-11 20:01:35 · 3398 阅读 · 1 评论 -
webpack + express 实现文件精确缓存
由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化。本次优化的目标如下:index.html 设置成 no-cache,这样每次请求的时候都会比对一下 index.html 文件有没变化,如果没变化就使用缓存,有变化就使用新的 index.html 文件。其他所有文件一律使用长缓存,例如设置成缓存一年 maxAge: 1000 * 60 * 60 * 24 * 365。前端代码使用 webpack 打包,根据文件内容生成对应的文件名,每次重新打包原创 2020-06-10 22:19:31 · 324 阅读 · 0 评论 -
Vue Cli 3 打包配置--自动忽略 console.log 语句
下载插件npm i -D uglifyjs-webpack-plugin在 vue.config.js 引入使用const UglifyJsPlugin = require('uglifyjs-webpack-plugin')module.exports = { configureWebpack: { plugins: [ new Ugli...原创 2020-04-22 13:26:13 · 747 阅读 · 0 评论 -
Vue 图片上传组件(base64 版):vue-upload-imgs
vue-upload-imgs 上传组件保存的是图片的 base64 码,这是项目地址,欢迎关注。在线 demo预览模式列表模式禁用文档字段类型描述默认值值类型type属性值组件显示模式 0.图片预览 1.图片列表 2.带有上传按钮的图片预览0Numberdisabled属性值禁用组件falseBooleanaccess属性值...原创 2020-04-19 22:40:22 · 988 阅读 · 0 评论 -
前端学习计算机理论知识的好处
前端学习计算机理论知识的好处原创 2020-04-03 12:12:55 · 242 阅读 · 0 评论 -
HTML 元素标签语义化及使用场景
灵魂三问:标签语义化是什么?为什么要标签语义化?标签语义化使用场景有哪些?下面让我们跟着这三个问题来展开一下本文的内容。一、标签语义化是什么?标签语义化就是让元素标签做适当的事情。例如 p 标签就是代表文本,button 标签代表按钮,nav 标签代表导航等等。二、为什么要标签语义化?其实标签语义化是给浏览器和搜索引擎看的。没有人关心你写的 HTML 代码有没有正确的使用语义化...原创 2020-04-01 14:03:41 · 291 阅读 · 0 评论 -
前端性能优化 24 条建议(2020)
占位原创 2020-03-30 00:23:04 · 1322 阅读 · 0 评论 -
Vue 轻量级后台管理系统基础模板
vue-admin-templatevue轻量级后台管理系统基础模板在线预览相关依赖vue-routeriviewaxios功能登录页一周七天自动切换不同的壁纸(建议自己配置)标签栏点击标签切换页面刷新当前标签页关闭其他标签/关闭所有标签侧边栏伸展/收缩页面宽度过小自动收缩多级菜单(利用iView组件)用户相关消息通知用户头像基本资料...原创 2018-12-13 17:32:08 · 2017 阅读 · 3 评论 -
jquery 树形数据表格组件
组件项目仓库地址 表格创建流程1、创建工具栏2、创建表头3、通过AJAX取得数据并渲染表格4、绑定各种事件加载数据的方式有两种1、直接加载全部2、当点击要看的数据时再加载"越秀区":{ "data": { "arry":[50,100,100], "hasData": &a原创 2018-08-01 22:00:04 · 1301 阅读 · 2 评论 -
三年前端路:分享我的工作经验与学习经历
占位原创 2020-03-28 21:48:51 · 1870 阅读 · 0 评论 -
前端工程化建设
随着浏览器和前端技术的发展,现在的前端项目越来越大、业务也越来越复杂,前端工程化势在必行。得益于 nodejs 的发展,前端工程化不再是雾中花、水中月,而是触手可及的事物。...原创 2020-03-26 15:01:53 · 213 阅读 · 0 评论 -
阿里云服务器部署个人网站(nodejs + mongodb)
在云服务器管理控制台选择实例->更多->密钥->重置实例密码(一会登陆用)选择远程连接->VNC,会弹出一个密码,记住它,以后远程连接要用更新安装源 sudo apt update && sudo apt upgrade -y安装 npm sudo apt-get install npm安装 npm 管理包 sudo npm install -g ...原创 2020-03-07 00:11:09 · 376 阅读 · 0 评论 -
node 性能优化--开启 gzip 压缩
性能优化–开启 gzip 压缩下载插件npm install compression-webpack-plugin --save-devnpm install compressionwebpack 配置const CompressionPlugin = require('compression-webpack-plugin');module.exports = { plugin...原创 2020-03-07 10:55:44 · 397 阅读 · 0 评论 -
移动端开发一些常见问题的解决方案
1. 页面适配这一点不能算是建议,应该说是解决方案。最近查了好多关于移动端关于适配的资料,把人都看懵了,收获了以下名词CSS像素、物理像素、逻辑像素、设备像素比、PPI、DPI、DPR、DIP、Viewport说实话,我一点都不想了解这些名词到底有着什么样的解释,只想知道怎么让开发的页面能适配各种移动端设备。简单点说,我想知道设备的真实开发尺寸是多少(根据这几天查资料所得,这个概念叫逻辑...原创 2019-12-13 11:05:23 · 336 阅读 · 0 评论 -
ESlint + Stylelint + VSCode自动格式化代码(2023)
本文用 Vue 项目做示范。利用 Vue CLI 创建项目时要将 ESlint 选上,下载完依赖后,用 VSCode 打开项目。安装插件 ESLint,然后 File -> Preference -> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 用户),搜索 eslint,点击 Edit in setting.json将以下选项添加到配置.........原创 2019-11-28 17:38:16 · 5784 阅读 · 0 评论