Shulou(Shulou.com)06/03 Report--

This article focuses on "how to understand the automatic refactoring of the front end". Interested friends may wish to take a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand the automatic reconfiguration of the front end.

In the past, I always wanted to take the time to write a small front-end tool to automate the refactoring of the code. However, after much consideration, I temporarily cancelled this plan-mainly because I didn't have the time. (PS: life Changle, write a Charj) however, I'm going to write an article to record the relevant ideas.

There are many reasons for this:

Most domestic companies use Vue,template, script and style coupled together.

A large number of front-end projects are light logic and do not have complex business scenarios

The front-end system is rewritten too often.

JavaSript syntax is too flexible, while TypeScript is not yet popular.

……

To put it simply, I don't really want to write such a tool in the absence of complex scenarios.

How to build a front-end automated refactoring tool?

In my previous article, "Automation of refactoring," I introduced how to make such a tool:

Build a language-specific syntax parser.

Set the content and standard of the bad smell of the code.

For each bad smell, write an identification code.

Writing bad-smelling code suggests improvement and implementation of code.

Realize the automatic reconstruction of bad taste.

Take Vue as an example, this process is:

Look for AST generation tools for Vue. Such as eslint-vue-parser

Find and write relevant specifications for Vue coding.

Look for problems in the code corresponding to the specification.

Look for improvement points to solve this problem

Realize automatic reconfiguration

Let's look at a simple example, such as our code specification, which requires scoped to be written for component libraries. And we have a large number of components that do not have the corresponding practice. At this time, it can be dealt with in this way. Style without scoped in the code in the analysis, and then automatically add:

The added pattern is actually relatively simple:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

After parsing, the AST will carry the location information of the label and so on.

Identify all relevant types of files and record the relevant information that needs to be reconstructed. File 、 location 、 changed 、 length .

Reverse traverse all the places to be modified, read the corresponding file, the corresponding location, and modify it.

Save the file.

Run it again.

Well, it's that simple.

Matching tools

According to some of my previous research, I have sorted out some relevant information. You are welcome to play.

JavaScript

If it's just for simple JavaScript refactoring, we can consider using tools like jscodeshift. Jscodeshift is a toolkit for running codemods (automatic code modification) on multiple JavaScript or TypeScript files.

Of course, if you don't want to bother, you can use similar tools:

SourceEsprima 4.0.1UglifyJS2TraceurAcorn 8.0.4ShiftShift (no early errors) jQuery.Mobile 1.4.2149.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.5125.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.3127.2 ±1.0% 158.2 ±1.4% 160.0 ±0.8% 128.5 ±2.8% 310.8 ±2.7% 182.6 ±2.7%Total401.8 ms467.0 ms472.7 ms456.7 ms991.9 ms533.5 ms

Well, the principles are all similar.

TypeScript

AST parsing is officially provided.

You can see similar code from the front-end architecture daemon tool I wrote earlier: https://github.com/phodal/dilay.

CSS

For CSS refactoring, similar tools are: https://github.com/csstree/csstree

However, we recommend that you use Lemonj (using Antlr for syntax tree parsing): https://github.com/twfe/lemonj

Framework specific

For Angular, the official Angular Schematics, in addition to automatic code modification, can also do a variety of automatic upgrade work.

For Vue, officials have a similar tool: https://github.com/vuejs/vue-codemod

For React, officials also have a tool: https://github.com/reactjs/react-codemod

Combined with CLI tools

When we have finished modifying the code, the next step is to modify the file. Here is a recommendation: schematics-utilities, although a tool for the upstream and downstream of Angular, is not limited to the framework.

With this tool, we can quickly modify the code, such as:

Recorder = tree.beginUpdate (path); recorder. Remove (start, length). InsertLeft (start, value); tree.commitUpdate (recorder)

These are more or less the same, nothing special.

At this point, I believe you have a deeper understanding of "how to understand the automatic refactoring of the front end". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.