Article Directory
Preface
It originated from a CSS writing order written by a colleague who happened to see it.
Usually when we write CSS, less, scss style files, we will write a different order each time. Such code is not only troublesome to modify but also not cool at all. But css writing itself is a random development, if you deliberately pay attention to the writing order will be very tiring. When these chaotic attributes follow certain rules when writing, it will be very convenient to change, there will be a kind of philosophical beauty:)
Why do you want to do it manually?
- I didn't find it at that time (Later it was found that there was a plug-in ￣□￣｜|)
- Engineering tools such as babel, webpack, react, etc. all require string parsing capabilities. In order to experience lexical analysis, novices also have dreams :)
lexical analysis
basic concept
In the above we mentioned lexical analysis. What is lexical analysis?
Lexical analysis (English: lexical analysis) is the process of converting character sequences into word (Token) sequences in computer science. The program or function that performs lexical analysis is called a lexical analyzer (Lexer), also called a scanner (Scanner). The lexical analyzer generally exists in the form of a function for the grammar analyzer to call. The program that completes the task of lexical analysis is called the lexical analyzer or lexical analyzer or scanner.
var a = 1;
The above line of code, the so-called lexical analysis, we just split each of their components into corresponding categories. Then the composition of the above line of code has the following members 空格+ var+ a+ =+ 1+ ;
Normally, the members that make up the code string can have several categories as shown in the following figure
Why do we need to perform lexical analysis? This is a relatively low-level operation, usually we need to implement ast many times. The precondition to realize the syntax tree is to split each unit to perform lexical analysis, and finally produce an abstract syntax tree
Abstract Syntax Tree (AST), or Syntax tree for short, is an abstract representation of the grammatical structure of source code. It expresses the grammatical structure of the programming language in the form of a tree, and each node on the tree represents a structure in the source code.
Example: Original code
#main {
border: 1px solid black;
background-color:red;
}
Parsed syntax tree
{
"parentStyleSheet": null,
"cssRules": [
{
"parentRule": null,
"parentStyleSheet": "[Circular ~]",
"selectorText": "#main",
"style": {
"0": "border",
"1": "background-color",
"length": 2,
"parentRule": "[Circular ~.cssRules.0]",
"_importants": {
"border": "",
"background-color": ""
},
"__starts": 113,
"border": "1px solid black",
"background-color": "red"
},
"__starts": 107,
"__ends": 171
}
]
}
The level is limited, only simple sharing. If you
are interested in lexical analysis and ast, you can go and see
- A good project compiler demo https://github.com/jamiebuilds/the-super-tiny-compiler
- LangSandbox (demonstrates how to create a language) https://github.com/ftomassetti/LangSandbox
How to achieve
The lexical analyzer Tokenizer is essentially a state machine.
Regarding the state machine, we will use the topic of Leetcode to understand it.
If you do it manually, you will have a deeper feeling. If this topic is completely realized with if else, the boundary conditions will be extremely complicated.
But let's change our thinking. All these changes can be summarized as follows Switching the status in the following table will make the whole process clear.
How to understand the following table as an example:
when I 存在符号encounter a number in this state, the entire state machine will switch to the 数字转换state.
When I 存在符号encounter the 空entire state machine in this state, it will switch to the 结束state
... and so on
| air | +/- | digital | other | |
|---|---|---|---|---|
| Start | Start | Presence symbol | Digital conversion | End |
| Presence symbol | End | End | Digital conversion | End |
| Digital conversion | End | End | Digital conversion | End |
| End | End | End | End | End |
Attach a solution of my problem for easy understanding
/**
* @param {string} str
* @return {number}
*/
var myAtoi = function(str) {
let map = [
[0,1,2,3],
[3,3,2,3],
[3,3,2,3],
]
let reg =/[0-9]/
let r='';
let state = 0;
for(let i=0,l=str.length;i<l;i++){
if(str[i]==' '){
state = map[state][0];
}else if(str[i]=='+'||str[i]=='-'){
state = map[state][1];
}else if(reg.test(str[i])){
state = map[state][2];
}else{
state = map[state][3];
}
if(state==0){
continue
}
if(state==1||state==2){
r +=str[i]
}
if(state==3){
break
}
}
if(r==''||r=='-'||r=='+') return 0;
let num = Number(r);
if (num > 2147483647) {
return 2147483647
}
if (num < -2147483648) {
return -2147483648
}
return num
};
Implement a simple lexical analyzer
Back to the topic, let's analyze the simple lexical analyzer we need,
whether it is less, css or scss, its grammatical structure is roughly as shown in the figure below. Because our goal is only to sort the css attributes in certain rules, we can ignore a lot of details.
When we traverse the string {
, }both using a state machine as the above-mentioned first identifier extraction section we need
then to several different unit identifies the state machine of FIG. It's fine to sort strategically.
The sorting method can be to set a map table, the key corresponds to the attribute, the value represents the location, and the smaller value is ranked first. The sorting method can be selected 快速排序.
The final effect
You can search for compose-style installation experience in the vscode plugin market