If you do not break me, adversity will grow flowers

directory

  • Project point of view
  • Format perspective
  • Code Angle
  • Git Angle
  • Editor Angle

preface

I believe we have all had this situation, take over. Yes, you have no idea how many hands the code in front of you has passed and how many styles it has. I’ve seen a project where seven or eight people took over and I threw up for half an hour when it was my turn to take over. This is the norm in medium to large projects, and I usually refer to such projects as Mount Shi. So how do we control the quality of the project code? How can code robustness be enhanced? My last article, “Front-end Performance Optimization Communication,” talked about optimizing project performance as part of the project development process. This article is based on the premise of optimization, code quality, robustness of a control.

I. Project perspective

Build the framework and customize the technology

1, unified framework – unified technical means

If you are engaged in medium and large projects or team development mode, this must be the basic principle. In the process of reviewing the requirements document, you should know about the business core and technical difficulties in the project, and then the front end students of the project should conduct a unified research on technical means.

But why come out to say this, I have seen quite a lot of not according to this standard.

Example 1: Because open source JS cannot be found

The React project references jquery.

This is not much to say, there should be no such situation, should be more discussion, more grope for solutions, broaden their solutions for various businesses.

We recommend a website to find technology libraries, and you can also learn about the latest and most popular technology libraries in the leaderboard.

www.awesomes.cn/

Example 2: UI components do not meet project requirements

Two UI frameworks, ANTD and ANTD-Mobile, were used in the project

When UI components do not meet the requirements of the project, it is certainly not possible to introduce two UI frameworks, which becomes too much of a burden for the project.

I recommend that each project start with its own UI component library and build a private NPM library for the company. Then components from each project can be deposited and build their own NPM library, which can include not only UI components, but also business components, scaffolding, etc.

Second, format Angle

1, ESLint (Lint: gauze for wound dressing)



Js code specification is an important step. Because javascript is a weak language, it is flexible and has a wide range of rules. So it’s often a “can’t do anything wrong” problem, and everyone’s code style is different. For example: mixing Tab and space, using deprecated methods, etc. If you’ve configured ESLint, I’ve compiled some configuration properties that you can match with the specifications you need for your project:

Eslint is briefly introduced








2, stylelint



Stylelint, like ESLint, is simply a set of specifications for CSS. I don’t need to elaborate on the articles in stylelint.

Third, the code perspective

  • Variable naming



    The basic point, and one that many people find most frustrating, is that it’s hard to name variables.



    The cliche of format:



    Camel-Case is a set of naming rules (conventions) used in computer programming. As the name CamelCase implies, it refers to the use of a mixture of upper and lower case letters to form variable and function names. In order to make it easier for programmers to communicate their code among peers, they often adopt uniform and readable naming methods.



    I don’t think I need to say much more about hump nomenclature, this is the most basic naming convention.

    Then came the question



    I don't know how to spell many business words in English.



    Unified go the same translation platform. To be fair, Google Translate and Baidu Translate, translate a word is not necessarily the same.



    Then the problem came again.



    Variable names are too long to concatenate. In what order?



    I also read a way of thinking about this problem some time ago, according to the English textbook. Follow English grammar, verbs, nouns, adjectives. English sentences grammar circle key examination.



    For example there is a method called "to Lhasa by train on the way to do something", I think the correct: onTheWayToLhasaByTrainDoSomeThing (), the common method: ByTrainToLhasaOnTheWayDoSomeThing () - to Lhasa by train on the way to do something. You have to pay attention to the syntax, otherwise this will be two methods

1. Component refinement



1. No more than 250 lines of components



Often see a component in a project opened, 1000+ lines, maintenance, inheritability are poor, opened after a face of confusion. In most cases (non-business) components with more than 250 lines can be broken down into smaller components for maintenance. When you strip all the components down, you strip out a lot of pure components — components that don’t get mixed up with the business, and you can do common component abstraction, you can find a lot of common components that can be extracted.

2. Optimization of global style pollution problem



When a component is abstracted enough and broken down enough, pay attention to style contamination. Most of the projects I work with are using style hashes directly, but I recommend using classNames to concatenate the business identifier to the front of the className instead of using hash directly. And each component has the same format and the same className. Usage: NPM I classnames –save sets the public method

3. Optimization of rendering times



This is a problem I mentioned in the article “Talking to you about how to optimize the front end performance” in catalog 4-2. The solution to the problem is to trigger render properly.

2. Data abstraction – logical decoupling



These two words are somewhat official, roughly meaning ‘tear down’. Take it apart and merge it. When we talked about component abstraction, we said about 250 lines. Method customization in line 100. I believe that you will always see a lot of huge methods, this method is carefully analyzed must be mixed with business in it, and did not separate the logic and business to maintain, so that this method even write remarks, a move is traction body, after fixing a problem, out of 10 problems, this is very scary. So we stipulate that methods can’t be more than 100 lines, and if your method is more than 100 lines, you can split it into two or more smaller logical combinations. This is called logic decoupling, and when we break it down we find that a lot of the logic is actually the same, so we can do data abstraction, extract common methods, precipitate common method libraries, write notes, use documentation. We can be very good maintenance, inheritance, modification and so on. A long time ago, I used to carry this library around on a USB stick… Key here: Jsinspect, the above component abstractions and logical abstractions can be sorted through this plug-in, set the checkpath, will directly generate a file list, tell you where and where are similar can be abstracted, very useful.

3, try to catch



Important details. We always say you lose in the details. If the interface returns a statusCode exception, you can intercept it in your Ajax layer. If statusCode 200OK, but the interface returns a data exception, you are gg. Why is that? If you need an array and suddenly an object is returned in the background, most of these will trigger a JS error and the interface will crash to display the JS error message. This situation is not allowed to exist in the project, even if the server exploded, the front page should still pop up a message “the server exploded, please remember to read the newspaper tomorrow”. Right? And then we just quietly log the user out of the system. So, where do we put our try catch here? Promise (() => {}). Then (res => {try {res… } catch { … }}) however, there is always a little twist, we can put this method of catching JS errors in the entry, that’s right, the route. Single-page applications insert routes into single-page nodes, with a try catch around the insert method, once and for all.

4. All nodes must have unique identification keys



React, Vue and Angular are all componential development models, where the underlying principle is to construct virtual tree diff algorithms to determine which components are redrawn and which are not. The usual DOM element key is automatically generated. However, at what point does it go wrong? For example, I need to render 10,000 pieces of data, the background does not return a unique identification ID, use corner markers instead





5、 prettier



This plugin is used to format the code, even if it’s not formatted at the time of development, right, when you compile it, it becomes a uniform format. Ideal for team development.

At this time, some students may have a question, my development tools, such as vscode, can download the development tool plug-in, as shown in the figure.

You can also install plugins in your development tools, but they can only help you, and it's not ideal if your colleague doesn't install them, or doesn't install them as you do, so it's best to install esLint, prettier, etc. in your project.

4. Git perspective

1, precommit

With git precommit hooks, everyone does a layer of interception when uploading code, ensuring the quality of the code uploaded to GitLab.

Without further ado, you will understand the package.json configuration

Just do what I do, going through esLint, stylelint, prettier, etc., every time I upload code. Of course, you can also customize some operations.

2, the merge request

Lock the master branch, and when the rest of the code wants to merge into the master branch, you have to submit a Merge Request, and then you have to do a code review, at least two people, to merge the code into the master branch. This is the model of our large projects, very rigorous. We can also learn from each other to write, discuss ideas, this function comes with Gitlab, it is good to configure, there is a need to understand a wave.

Editor Angle

At this point, the project can unify the configuration of the development tools with a file named. Editorconfig root configuration.

Using the. Editorcofig file, we can unify the configuration environment of the development tool, even if your colleagues are using sublime, your vscode does not affect the code style, rules, etc.

I’ll just give you a configuration file.

END

I was busy last week with three projects at the same time, so I really had time to write an article. Writing an article is really not that easy, and I found many shortcomings when I connected some things together. Thank you for your tolerance, and you are welcome to point out any mistakes. Although the task this week is still tight, I will fulfill my promise. Live up to my 28 followers. I'll fix the bug. See you next time.

I will write 4 articles before the end of March, respectively

Front-end Performance Optimization Exchange front-end Code Quality Optimization Exchange Front-end Code Monitoring Exchange Front-end security Issues exchange precipitation last year in the development process of some knowledge. Thank you.