This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!

Recently, I had some free time, so I went to have a look at the code written by them, and found that the overall writing is ok, but I also found some problems. The following are the problems found from several aspects, hoping to help the students who just started to work.

Interface user experience

  • The prompt is not friendly, the error in the code should not be directly presented to the user, the user needs to know which data is not correct, the prompt should be intuitive, easy to understand, short;

  • The selection box does not give the default selection value, resulting in a blank page, and when the data is empty, there is no “temporary no data” or “–” and other empty data symbol display;

  • The number is not properly processed. NaN displayed on the interface needs to be judged when converting data in the background. NaN, NULL, undefined are replaced with 0, none and other words.

  • Multiple selection boxes, expand a selection box, and then click another selection box, the first selection box is not closed

  • The clickable buttons do not give the clickable gestures, i.e., set cursor:point;

  • There is no limit to the length of the text, resulting in the text takes up the entire screen, for the background returned with uncertain length of the text, you can add out of width display… Style for processing;

  • There is no fixed height for the content to be paginated, causing the paging component to change with the height of the paginated content.

  • When a button is clicked, there is no indication of success or failure, leaving the user unsure whether the click succeeded or failed

  • It is recommended to add text to display specific lines according to the height of the container. If the number of lines exceeds the height, use… Display;

  • When the function of adding line content is added, the local page will be refreshed again, causing the scroll bar to return to the top, resulting in bad user experience;

code

  • CSS class names are Chinese pinyin and English, for example, xiafang_box and Shangfang_box.

  • CSS class names are connected by underscores and stripes, for example, xiafang-box and shangfang_box

  • Js naming is not standard, for example: replacestr, it is recommended to use the hump name. Here, it is recommended to use the Code Spell Checker plug-in of VSCode to detect whether such a name occurs.

  • Not loading on demand, resulting in a large volume of packaged code. For example, the page only uses el-Table and el-button, but directly introduces the entire Element-UI package and style in the entry file.

// Import ElementUI from "element-ui" is discouraged; import "element-ui/lib/theme-chalk/index.css"Copy the code

  • Not very modularized, such as not separating the interface, using vue.prototype. $HTTP = axios; This.$http.get(url), this.$http.post(url), this.$http.post(url), this.

  • Using v-if on elements in V-for seriously affects page performance;

  • ;

  • Component decoupling is not enough, in the same components by the if pass judgment at the different pages of data, such as several pages use this component, but each page for the interface of the data, and is in the component processing these data, which can cause components is more and more inflation, poor components development;

  • Resources such as images are named in Chinese. If images are named in Chinese, image 404 May occur during deployment. You are advised to rename resources such as images with alphanumeric names.

  • [Fixed] Page destruction without destroying timer

  • There is no separation of logic, a page without style has more than 800 lines, it is recommended to control the number of lines of code in a file at about 500 lines, which is also easy to maintain by later generations.

  • Repeated data identification, such as flags for different identities and later userIDS;

  • Using the VUE framework, which uses a lot of native operations, and a lot of bugs;

  • The introduction of component images and other uses a large number of relative paths, which is not convenient for future maintenance. It is recommended to use absolute paths as far as possible. If your page folder changes, but the resource folder remains unchanged, using absolute paths does not need to change things, which is easy to maintain.

This article lists some mistakes made by new students from user experience and code writing. I hope you can continue to grow and improve yourself from the perspective of user experience and code maintenance when doing projects.