An overview,
To unify the code style of front-end development and facilitate subsequent code management and maintenance, follow the code specifications in this document when using the front-end development framework. The specifications covered in this document mainly cover best practices for everyday code writing, as well as considerations for project development.
Two, preliminary preparation
Before starting the project, be sure to configure ESLint and install the dependencies. For a list of ESLint rules, see juejin.cn/post/694236…
Project directory structure:
├─ build ├─ config config ├─ SRC // Development environment code │ ├─ API │ ├─ assets // Store font files, images, ICONS │ ├─ The components / / common component │ ├ ─ ─ directive / / global directives │ ├ ─ ─ filters / / global filter │ ├ ─ ─ views / / routing │ ├ ─ ─ the router / / routing │ ├ ─ ─ store / / │ ├─ Styles │ ├─ Utils │ ├─ app.vue │ ├─ main.js │ ├─ style │ ├─ utils │ ├─ app.vue ├─.babelrc.js // Babel related Configuration ├─.editorConfig // Editor Unified Configuration ├─.eslintrc.js // ESLint Configures rules ├─.gitignore // ├─ ├─ └.html // HTML template package.json git ignore config ├─ favicon
Best practices
1. Variable naming, avoid using var to declare variables:
- Global constants, declared as const, named in all uppercase letters, and separated by underscores; - Local constants, declared const, start with a lowercase letter, and name multiple words with a camel's hump; - Variables, declared with let, start with lowercase letters, and name multiple words with a camel.Copy the code
Function () {function () {};
3. A semicolon must be added to the end of a complete statement.
4, pay attention to Spaces. The operators (+ – * /= %, +=, -=, /=, *=, %=) must be followed by a space, and the argument list commas must be followed by a space (e.g. : arg1, arg2, arg3…). );
5. Avoid printing console.log, console.info, and debugger in the production environment. During the development phase, try to debug in the form of browser interruption points and avoid submitting printed log information to git repository.
Avoid request callback hell and use ES7 async and await flexibly.
7. Skillfully use Map data deconstruction to avoid unnecessary cycles:
For example, if we have a list of users and want to find a certain user by ID, we can use the map data structure and use ID as the key to avoid loop traversal.
Multi-purpose deconstruction, deconstruction assignment;
To be continued
For more code brevity, see JavaScript Code Brevity.