Liu Lu, a postgraduate student of Tongji University, is a member of Meituan Dianping restaurant team.
OpenDoc
We edited and shared some of the internal documents for the following reasons:
- We hope that those interested in joining the team can get the same information and be prepared accordingly
- The sharing of team work experience and methods is as valuable as the sharing of technology
- Listen to your peers’ suggestions for improvement
purpose
1) Standardize the directory structure
2) Clean up useless code
Organize files by business dimension
There are several popular directory structures that mainstream frameworks use to build large projects:
The framework
|
The directory structure
|
---|---|
Angular | |
React | |
Vue |
Organizing files by business dimension has the following benefits:
-
Component resource aggregation, which is easier to manage and maintain, should be necessary to allow for long iterations and work transitions
-
You don’t need to worry about resource dependencies when referencing components
-
Distinguishing between business components and generic components helps to better understand the granularity of components and the level of abstraction of methods
Project structure specification
folder
|
function
|
Best practices
|
For example,
|
---|---|---|---|
entries | Entrance to the file | No subfolders, only js entry files for each page | |
lib | Custom component libraries |
Place the common components referenced by each page in the common subfolder, and the other component files in parallel in the Lib folder When using Redux, create the Actions and Reducers folders under Lib to store the corresponding files |
|
less | Custom style library |
New files are classified by function:
|
|
templates | Template library |
|
Reference file specification
category | specification | For example, |
---|---|---|
Reference file |
Reference files according to the following categories, with a space between the categories
|
|
Reference js and less files without suffixes, reference template files with js suffixes | ||
named | The names of the HTML, LESS, and JS files on the new page are all lowercase and connected by a dash (-) |
menu-list.html menu-list.less menu-list.js |
Disposing of discarded files | When a page is replaced or deleted by another page, a comment should be added at the top of the corresponding file, explaining the reason for the file’s abandonment, the abandonment time, the personnel who need to review it, and the time to confirm the deletion |
Clean up the code
Clean-up areas include:
- Discarded files
- Unused functions in less, JS
- A file that is referenced but not used
File types
|
Cleaning method
|
---|---|
html | Find the front end & back end & product to confirm whether it is deprecated |
css |
Chrome devTool → Audits → Check Audit Present State → Run → Remove unused CSS rules Chrome also provides CSS Tracker and CSS Coverage to monitor CSS usage (experimental features) |
js |
Notice the functions that are not called |