The purpose of code specification is to write high-quality code, so that team members are happy every day, and everyone is happy every day together! [](, let’s list some commonly used code specification treaties, which will be developed later Everyone can also work together to improve our code specification regulations; to make our code specification documents more perfect.
1), naming convention:
(1) Project naming convention:
The project naming convention is to use all lowercase, with a '-' dash in the middle;
(2) Project directory name specification:
The name of the project directory is all lowercase, with '-' in the middle; special note: under the vue components component directory, the directory uses the big hump naming rule, consult the vue component naming specification.
(3) JS, CSS, SCSS, HTML, picture file naming convention:
Use all lowercase, use the way of dashing in '-';
(4) File naming rigor:
Chinese cannot be used in the naming process. Chinese pinyin and English are spliced together, and Chinese and English are spliced together. Even if pinyin is used, it should be avoided to reduce its appearance; avoid using non-standard abbreviations for naming, which will make it difficult for readers to understand and make the text meaningless. After a long time, I may not be able to understand it myself.
2), HTML specification:
(1): Indentation
HTML elements are indented, using a tab character and two space keys; this can make the code hierarchy clear.
(2): Notes
Important component elements need to add html comments, such as: table form, frome form, and other html elements to add comments, so that they can be modified better later;
(3): Semantic labeling:
Added a lot of semantic tags in html5: such as
and other semantic tags; avoid the entire page div tag to the end;
(4): The element attribute value uses " ":
Element attribute values use " " double quotes. In the vue component, due to character splicing, template syntax, etc. in the attribute value, it is standard to use " " double quotes when declaring attributes for elements.
3), css specification:
(1): Naming convention:
The ID name uses the camel case naming convention;
The class name is all lowercase and separated by underscores;
Variables, functions, mixins, and placeholders in scss are named with big hump;
Note: ID, class, try to use a name that can reflect the purpose and use of its elements;
(2): selector:
Try to avoid html tag names in css selectors; from the perspective of performance, structure, behavior, and separation principles, html tag names in css will pollute the page tag style. There are also some potential problems that arise.
Sub-selector: When writing a chain selector, it is recommended to use sub-selectors directly instead of iterative selectors, which can reduce performance consumption.
(3): Property abbreviation:
Try to use attribute abbreviations; for example: margin: 0, 0, 10px, 20px; margin-bottom: 10px is not recommended; margin-left: 20px;
(4): Other specifications:
Each selector and attribute is written on a separate line;
Avoid using ID and label selectors; there will be polluted page styles;
Omit the unit after 0;
4), Javascript specification:
(1) Naming convention:
1. Use lowercase camel case to name lowerCamelCase, and the names in the code cannot be underlined, nor can they end with an underscore or a dollar sign
2. Method names, parameter names, member variables, and local variables all use the lowerCamelCase style, and must follow the hump form
3. The name of the method method must be in the form of a verb or a verb + noun
It is hereby stated that for additions, deletions, checks and modifications, the following 5 words are uniformly used for details, and other words are not allowed (the purpose is to unify each end)
add / update / delete / detail / get 附： 函数方法常用的动词: get 获取/set 设置, add 增加/remove 删除, create 创建/destory 销毁, start 启动/stop 停止, open 打开/close 关闭, read 读取/write 写入, load 载入/save 保存, begin 开始/end 结束, backup 备份/restore 恢复, import 导入/export 导出, split 分割/merge 合并, inject 注入/extract 提取, attach 附着/detach 脱离, bind 绑定/separate 分离, view 查看/browse 浏览, edit 编辑/modify 修改, select 选取/mark 标记, copy 复制/paste 粘贴, undo 撤销/redo 重做, insert 插入/delete 移除, add 加入/append 添加, clean 清理/clear 清除, index 索引/sort 排序, find 查找/search 搜索, increase 增加/decrease 减少, play 播放/pause 暂停, launch 启动/run 运行, compile 编译/execute 执行, debug 调试/trace 跟踪, observe 观察/listen 监听, build 构建/publish 发布, input 输入/output 输出, encode 编码/decode 解码, encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩, pack 打包/unpack 解包, parse 解析/emit 生成, connect 连接/disconnect 断开, send 发送/receive 接收, download 下载/upload 上传, refresh 刷新/synchronize 同步, update 更新/revert 复原, lock 锁定/unlock 解锁, check out 签出/check in 签入, submit 提交/commit 交付, push 推/pull 拉, expand 展开/collapse 折叠, enter 进入/exit 退出, abort 放弃/quit 离开, obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集
4. The names of constants are all capitalized, and the words are separated by underscores, and the semantic expression is strived to be complete and clear. Don't think the name is too long
Positive example: MAX STOCK COUNT
Counterexample: MAX_COUNT
(2): Code format:
1. Using two indents, you can set the indentation method of the editor;
2. Insert a blank line between codes with different logic, different semantics, and different businesses to separate them to improve readability.
3. Add code descriptions for methods, variables, classes, etc.
4. Strings, use single quotes uniformly, not suitable for double quotes;
(3): Object declaration:
1. Create objects using literal values
Positive example: let user = {};
Counterexample: let user = new Object();
2. Use literals instead of object constructors
(4): Use es6+:
In the process of code writing, the new syntactic sugar and functions of es6 must be used first; simplify the code and improve code reusability.
(5): js other specifications:
Undefined judgment, never directly use undefined to judge variables; use typeof and the string 'undefined' to judge variables.
There are up to three levels of conditional judgment and looping. Conditional judgments are solved using ternary operators, so don’t use conditional judgments, but you can’t use too long ternary operators. If they exceed three levels, extract them and write them as functions, and write clear comments .
Conversion naming of this: The escape of this in the context can only be named using self.
Use console.log with caution, it will cause performance problems,
5), Vue project code specification:
The vue project specification and the official code specification of vue shall prevail: (https://v3.cn.vuejs.org/api/sfc-spec.html)
Please read the Vue official specification carefully, remember, this is the first step
(1) Component specification:
1. The component name has multiple words;
2. Component file names are named in big camel case: PascalCase format
3. The basic component file name starts with Base, use complete words instead of abbreviations
4. Subcomponents that are tightly coupled with the parent component should be named with the parent component name as a prefix
5. When using components in the Template template, PascalCase mode should be used, and self-closing components should be used.
6. Prop definition should be as detailed as possible
must use camelCase
must specify the type
must add a comment to indicate its meaning
Must add required or default, choose one of the two
If there is a business need, validator verification must be added
7. Set scope for component styles
8. If there are many characteristic elements, you should actively wrap the line
(2), using simple expressions in templates
Component templates should only contain simple expressions, and complex expressions should be refactored into computed properties or methods. Complex expressions make your templates less declarative
(3) All instructions use abbreviated forms
Instructions are recommended to use abbreviated forms, (use: for v-bind:, @ for v-on: and # for v-slot:)
(4) Keep the order of labels consistent
<template>...</template> <script>...</script> <style>...</style>
(5), the key value key must be set for v-for
v-for must set the key value key, which is beneficial to optimize the page dom number rendering performance;
(6), v-show and v-if selection
If you need to switch very frequently at runtime, use v-show; if at runtime, the conditions rarely change, use v-if.
(7), Vue Router specification
1. Use route lazy loading (lazy loading) mechanism
2. Naming convention in router
3. Path naming convention in router
4. Page jump data transmission uses routing parameters
6), vue project directory specification:
7), other specifications
(1) Delete useless code
Due to the use of code version tools such as git/svn, useless code must be deleted in time
(2) Try not to manually operate dom
Because of the use of the vue framework, try to use vue's data-driven update DOM in project development, and try (not as a last resort) not to manually manipulate the DOM, including: adding, deleting, modifying dom elements, changing styles, adding events, etc.