过去,我一直想着抽时间写一个小的前端工具,以对代码进行自动化的重构。但是呢,经过我再三的考虑,我暂时取消了这个打算 —— 主要是没时间。(PS:人生长乐,写个 Charj) 但是呢,我打算写一篇文章记录一下相关的思路。
原因依据很多:
简单来说,在缺乏复杂场景的情况下,我不太想去写这样的工具。
在我之前写的那篇『重构的自动化』中,介绍了如何去做这样的工具:
以 Vue 为例,这个过程便是:
让我们来看个简单的示例,如我们的代码规范中,针对于组件库强制规范了一定要写 scoped。而我们有大量的组件都没有相应的实践。这个时候,就可以通过这种方式来处理。分析中代码中不带 scoped 的 style,然后自动添加:
<style scoped>
</style>
添加的模式其实也比较简单:
嗯,就是这么简单。
根据我先前的一些调研,我整理了一些相关的资料,欢迎大家去玩。
如果只是针对于简单的 JavaScript 重构来说,我们可以考虑使用 jscodeshift 这一类的工具。jscodeshift 是一个工具包,用于在多个 JavaScript 或TypeScript 文件上运行 codemods(自动代码修改)。
当然了,如果你不嫌麻烦的话,还可以使用类似的工具:
Source | Esprima 4.0.1 | UglifyJS2 | Traceur | Acorn 8.0.4 | Shift | Shift (no early errors) |
---|---|---|---|---|---|---|
jquery.Mobile 1.4.2 | 149.6 ±1.8% | 170.7 ±1.2% | 178.2 ±6.0% | 214.4 ±13.0% | 429.5 ±13.5% | 203.9 ±9.6% |
angular 1.2.5 | 125.0 ±2.8% | 138.2 ±2.9% | 134.5 ±2.3% | 113.8 ±2.8% | 251.5 ±1.3% | 147.1 ±1.5% |
react 0.13.3 | 127.2 ±1.0% | 158.2 ±1.4% | 160.0 ±0.8% | 128.5 ±2.8% | 310.8 ±2.7% | 182.6 ±2.7% |
Total | 401.8 ms | 467.0 ms | 472.7 ms | 456.7 ms | 991.9 ms | 533.5 ms |
嗯,原理都是相似的。
官方提供了 AST 解析。
从我的之前写的前端架构守护工具:https://github.com/phodal/dilay,你就可以看到相似的代码。
针对于 CSS 重构来说,相似的工具有:https://github.com/csstree/csstree
不过,我们建议你们使用 Lemonj(使用 Antlr 进行语法树解析):https://github.com/twfe/lemonj
针对于 Angular,官方提供了 Angular Schematics,除了自动代码修改,还可以做各种自动化升级工作。
针对于 Vue,官方也有类似的工具:https://github.com/vuejs/vue-codemod
针对于 React,官方也有工具:https://github.com/reactjs/react-codemod
当我们修改完代码之后,下一步要做的事情就是修改文件,这里推荐一下:schematics-utilities,虽然是 Angular 上下游的工具,但是它不限于框架。
有了这个工具,我们就可以快速修改代码,如:
recorder = tree.beginUpdate(path);
recorder
.remove(start, length)
.insertLeft(start, value);
tree.commitUpdate(recorder);
这些都大同小异,没有什么特别之处。
嗯,人生苦短,一定要花 1 小时写个工具,解决 10 分钟能完成的事情。
来自:https://www.phodal.com/blog/frontend-auto-refactor/
在了解什么是重构和回流之前,我们应该先看看浏览器是怎么渲染的?浏览器的渲染过程;什么是重构和回流;什么操作会引起重绘、回流;浏览器对回流的优化;如何减少回流、重绘
在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为;你有用过哪些前端性能优化的方法?减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适
我从基础架构部门,转调到业务部门。技术负责人想让我搞定业务系统的稳定性问题。当时的业务系统确实存在不少问题,不过我初来乍到,对整体系统不熟悉,就想在熟悉一段时间后再动手。
代码不可能在第一次就写得完美,这是一个持续修改的过程,那么应该怎么来进行呢?好代码的检验标准就是人们是否能轻而易举地修改它。
项目是公司主打业务产品之一的可视化子项目,与其他子项目几乎没有耦合,所以可以单独拎出来重构。具体业务不作描述。技术主要用的是Vue2系列和JavaScript,还有一个自研的可视化工具库。第一个重构原因就是没有引入静态类型
单一职责的定义可以理解为:一个对象或者方法,只做一件事。遵守单一职责的实例太多了,下面简单列举一下。说是这样说,但是大家看着可能会有点懵,看不出来遵守单一原则有什么好处,下面看一个实例。
React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。Angular出现最早,但其在原理上并没有React创新的性能优化,且自身相对来说显得笨重。Vue出现最晚,其核心原理学习了React
1. 整理一套vscode中格式化配置,在页面保存时自动格式化,团队成员格式统一(搭配eslint)。2. 整理项目中的命名(不要嫌长,但也不能过于冗长,尽量能让人一眼看明白)
JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。
我在一家创业公司的小团队里搞软件开发。彼时我们有一位真实的企业客户,且软件的第一版也已发布。开发按进度完工,在发布时我欣喜若狂
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!