This article is mainly from the code to share with you my own in the development of small program some practices, I hope to help some students.
preface
I don’t know if you have this experience. When you first came to the company, the leader asked you to maintain the code written by others before. You looked at the code written by others, and you were deeply thinking: “Who wrote the code?
Project directory structure
Before the development, first of all, you should know what you want to do, don’t just do it at the beginning, let’s put the project structure together first. Generally speaking, the development tool initialization project can basically meet the needs, if your project is more complex and has a certain structure, it is necessary to consider a good directory structure, I do as follows:
- The Component folder is for custom components
- Pages on the page
- Public places public resources such as style sheets and public ICONS
- Units put various public API files and some encapsulated JS files
- Config.js is a configuration file
This is enough to meet my needs, you can flexibly split according to your own project.
The configuration file
My projects have a config. Js, this file is used to configure the project will use some of the interface and other private fields, we know that in the development time is often a test environment and formal environment, and the test environment is not the same as formal environment domain name may be, if not well configured to write directly when he died interface that wait for on-line changes will be very troublesome, So it is necessary to do a good configuration, and the file looks like this:
import domain from ‘.. /.. /config’;
domain.getAPI(”)
Code robustness, fault tolerance
example
We should also consider the robustness and fault tolerance of the code. The mobile terminal project is not as stable as the network of the PC terminal. In many cases, the instability of the network will determine whether our project can run normally. This means that we need friendly feedback if a network exception or other factor prevents our project from running. Here is an example of a network request:
- Determine if 200 is returned. If yes, perform the following step, otherwise an error is thrown
- Determine whether the data structure is complete. If yes, perform the following steps. Otherwise, throw an error
You can then proceed to the page accordingly.
Customize error codes
You can see that the error print in the screenshot above will be followed by an English code of GDE0 or GDE1. What is the use of this code? In fact, it is used for reporting faults. Before, when there was no error prompt code, we might just locate the error according to an error message, but most of the time, the error message is the same, we have no idea what is wrong, so we can not quickly locate the error, so add such a prompt code, and then the user can send a screenshot. As long as we follow this error code, we can quickly locate the error and solve the problem. The error code is suggested to be named as follows:
- Not too long, about 3 letters
- uniqueness
- Meaning clear
Like above, GDE means failed to get draft, followed by a number to indicate which step went wrong.
modular
The great man in our group said that modularity is about divide and conquer, not about reuse. Before, I thought that modularity was only for reuse. In fact, no matter how small a module is, it can be modularized, even if it is just a simple style. It is not for reuse, but for convenient management. Many students often put some common style js in app. WXSS and app.js to call, in fact, this has a disadvantage, is poor maintenance, if it is a relatively small project is ok, a major problem in the project. Besides, the project will be iterative, so it is not always possible for one person to develop, and it may be handed over to others later, so the problems will be caused:
- The content in app.wxss and app.js will only get more and more, because others are not sure what is useless and dare not delete it, they can only add things, resulting in file bloat, which is not conducive to maintenance.
- App.wxss and app.js work for every page, but are not very readable.
So the significance of modularity comes out, the common part of the modular unified management, but also easy to maintain.
Style modularization
Based on the directory structure above, I put the public CSS in public. Each file name indicates which part of the modularity is. For example, the following one indicates the modularity of a button
Js modular
Js modularity here is divided into two parts of modularity, one part is the common JS modularity, the other part is the page JS modularity that is the separation of business and data.
Common JS modularity
More commonly used public JS are wechat login, popover, request, etc., generally I put in units folder, here is the wechat popover API as an example:
Modularize services and data
Business and data modularization means that business and data are separated and do not affect each other, business is only responsible for business, data is only responsible for data, you can see that the page will be more than a common page API.js
componentization
Componentization believe that we are not unfamiliar, since small programs support custom components, can be said to greatly improve the development efficiency, we can be some of the common parts of the componentization, this part will not be detailed, you can go to see the document. Componentization has great benefits for our projects, and it is portable, requiring little change from one project to another.
conclusion
This article through some of my own experience to introduce you how to optimize your own code, mainly have the following points
- Organize the project directory structure
- Prepare the interface configuration file
- Code robustness, fault tolerance handling
- You can customize error codes to locate errors
- Style modularity and JS modularity
- componentization
Finally put project directory structure the code snippet, you can look at, there is a problem to discuss: developers.weixin.qq.com/s/1uVHRDmT7…