本篇的性能优化不是八股文类的优化方案，而是针对具体场景，具体分析，从排查卡顿根因到一步步寻找解决方案，甚至是规避等方案来最终解决性能问题的经历实操 所以，解决方案可能不通用，不适用于你的场景，但这个解决过程是如何一步步去处理的，解决思路是怎么样的，应该还是可以提供一些参考、借鉴意义的 当然，也许你还有更好的解决方案，也欢迎评论教一下，万分感谢 问题现象 我基于twaver.js库实现了一个园区内网络设备的拓扑呈现，连线表示设备间的拓扑关系，线路上支持流动动画、告警动画、链路信息等呈现，如： 但当呈现的节点数量超过1000后，动画开始有点丢帧，操作有点点滞后感 超过5000个节点后，页面就非常...

jQuery.i18n.properties是jQuery老项目的国际化框架，其实国际化方案本质上都大同小异，都是需要用翻译函数包裹词条，然后根据词条文件来进行翻译 就是使用上与其他框架不太一样而已 但由于我们已经基于vue框架实现了一个国际化自动处理脚本，脚本会自动用全局函数包裹词条，自动提取到json文件中 因此，为了让这个老项目也能够用脚本来进行维护，又考虑到最小的改造成本和最小的影响，我们决定扩展jQuery.i18n.properties的能力，让它的国际化行为跟vue-i18n一致，也就能够用脚本来进行维护了 而且对于团队内的其他新人而言，也没必要去了解jQuery.i18n.pr...

做国际化一个很头疼的坑就是，你不知道项目里到底还有哪些中文词条没有国际化处理 纯靠人工去检查不现实，也不靠谱，而且浪费资源 所以还是得通过脚本工具来检查，思路是： 先保存好本地代码变更，准备好一个无文件变更的本地环境 再通过脚本把代码里的非展示性中文移除掉 注释里的中文、console里的中文，已经国际化处理过的中文 再用中文正则在vscode的全局搜索里匹配，捞出来的就是未国际化处理的中文词条 最后需要回退本地的更改，毕竟脚本是直接改动本地文件 脚本仅仅是检查用，用完记得回退代码 匹配中文词条的正则 单个中文： [\u4E00-\u9FFF] 连续中文： [\u4E00-\u...

【Github：vue-viewer-editor/vve-i18n-cli】 这是我同事开发的国际化自动处理脚本，我进行过一次扩展，让其也支持我们一个jQuery老项目的国际化日常维护 至此，我们团队内的国际化均是使用该脚本来进行日常维护 该自动化脚本极大的为我们提效，基本将国际化的词条相关工作降低到0了，这意味着我们基本上不用特意留出太多时间来处理国际化方面的工作 但是，国际化其实不只有词条相关的工作，至于还有哪些工作，我之前发表过一篇《项目国际化的难点痛点是什么》里面吐槽得很清晰了 不可否认的是，如果没有这个自动化脚本，根本就没法在领导期望的时间内完成国际化的工作 自从有了这个脚本后，从...

vscode其实有很多实用的技巧可以在日常工作中带来很大的提效，但可能是开发中没有相应的痛点场景，因此有些技巧接触的人不多 本篇就来介绍下多光标的批量操作和模板代码两种技巧在日常工作中的提效 涉及的vscode技巧 不要看快捷键好像很多哈，主要是了解几种可以进入多光标批量操作模式的用法 进入多光标之后的快捷键就是日常使用的选中、复制、粘贴了，只是以前是针对当前单个光标的操作，现在变成了针对多个光标的批量操作而已 如何进入多光标的批量操作模式 Ctrl+鼠标左键（手动添加多个光标） 按住Ctrl键后，在哪里点击鼠标左键就会增加一个光标，在原本就有光标的位置点击鼠标左键，是取消当前这个光标 Ct...

个人觉得，组件库最难的不是开发，而是使用，怎么才能让组内同事都用起来，这才是关键 背景 虽然现在开源的组件库很多，但每个项目里还是或多或少都会有人封装出一些项目内通用的基础组件、业务组件 我参与过多个项目，几乎每个项目都会存在这么一种现象：重复造轮子 同一个用途的组件被不同人多次实现，导致后续维护的人可能都不知道该用哪个好，或者干脆又自己撸了一个，就又恶性循环了 至于如何解决，遇到的基本就是强制定规范，但这种靠人为主观意识的约定，很容易松动，不长久 痛点 其实可以来分析下看看，为什么就会用不起来呢？ 为什么大家乐意去用一些开源组件库，就是不想用项目里别人封装的呢？ 就我个人而言，可能有这么几个...

如果有做过项目国际化的应该了解,国际化的工作项大概包括以下几项： 【词条相关工作】 文本包裹翻译函数，如$t 提取翻译词条到json文件里 翻译并更新json文件 【三方库相关工作】 组件库的国际化配置，如element-ui组件库 其他有词条场景的三方库的国际化配置 【图片、文件相关工作】 图片里出现中文时，需要准备国际化的图片资源 文件里出现中文时，需要准备国际化的文件资源 通常是表格导入导出的excel文件、用户声明和软件协议等pdf文档或静态html文件 【样式相关工作】 国际化后的文本可能会出现显示溢出、截断、乱换行、排版错乱、未对齐等场景， 需要针对不同语言处理...

背景 有时兴致来了就喜欢瞎鼓捣，几年前还是学生时买过学生优惠的云服务器，但没钱续费关停后就不了了之，近期看到有活动又重新入手了但问题就来了，之前好不容易搭建上去的各种服务，现在又得重新来一遍几年前还是学生时可能对这类环境搭建还比较感兴趣现在人老了，精力不够了，做啥都考虑效率问题如果几年后又重新买了，岂不是又得重新来一遍？ 所以啊，还是得搞个一键式操作，来把这类基础、重复且低效的准备工作改造成自动化 诉求 覆盖我日常使用的服务有： 个人博客、笔记平台 方便维护、查阅我过往积累的博客和笔记 NextCloud 个人云网盘，也支持在线文档编辑、查阅（如在线office） UI组件使用说明平...

$0和__vue__ $0是指当鼠标点击Element面板的某个dom元素后，console里$0变量会自动指向该dom元素对象 __vue__是指vue框架会往vue组件$mount挂载的dom元素对象上添加一个__vue__变量来指向当前vue组件 这意味我们可以直接在console面板里拿到任意vue组件实例对象： 可以查看对象内部任意属性 也可以直接操作对象内部的属性来达到预期的调试效果 甚至可以用来查看三方库的api，比如element-ui的某个组件内部的api 或许你会疑问，这不是安装chrome插件（vuedevtools）就可以搞定的事吗，插件还是个可视化界面操作，更...

【whistle官网】http://wproxy.org/whistle/install.html 【用途】 抓包、mock、修改返回数据、修改响应头字段、延迟模拟弱网等 代理转发需要配置代理转发规则 把某环境仅前端资源的请求代理转发到本地 把某个接口地址的请求代理转发到指定的后端环境地址 脚本注入 可通过拦截某页面请求，注入写好的脚本工具代码，来完成一些提效的自动化工作 安装 1.安装node环境 本地如果有node环境可跳过 Windows或Mac系统，访问 https://nodejs.org/，安装LTS版本的Node，默认安装即可。 安装完成后，可通过执行no...

由于我司的业务特性，需要APP能够支持即时在无网络的场景下，也能够正常使用APP的功能 那么，为了让一个用web前端实现的APP能够在无网络的场景下，也能够正常运行程序，这其中的离线方案就需要实现几个关键点： 代码的离线、更新 数据的下载、上传、更新 本篇就想来讲一讲，我们在离线应用方面的实现方案 代码的离线和更新 web应用不管是网页还是H5，通常都是在线服务，代码都需要部署到线上服务器 但是离线应用就不能只依赖于网络，在没有网络的场景下，也需要想办法让用户的客户端可以获取到程序代码，这就需要依赖原生APP开发的能力了 我们采用的是web+Cordova的跨平台APP方案： Cordo...

大纲 本文内容更多的是讲讲使用vuex的一些心得想法，所以大概会讲述下面这些点： Q1：我为什么会想使用vuex来管理数据状态交互？ Q2：使用vuex框架有哪些缺点或者说副作用？ Q3：我是如何在项目里使用vuex的？ 初识vuex 对于vuex，有人喜欢，有人反感 喜欢的人觉得它可以很好的解决复杂的数据交互场景 反感的人觉得它有各种缺点：繁琐冗余的代码编写、维护性差的字符串形式变量注入、过于依赖vue框架导致异步扩展场景差 这其中，有一个很模糊的点，复杂的数据交互场景并没有一个衡量标准，每个人都有自己的见解 再加上不同人有着不同的项目经历，这就造成了经常会出现有趣的现象：你体会不到我为什么...