前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键（一）：https://developer.aliyun.com/article/1628435
（4）CSS动画
- 【推荐】不要使⽤all属性做动画
使⽤transition做动画的时候不要使⽤all所有属性，在有⼀些浏览器上⾯可能会有⼀些问题，如下：
transition: all 2s linear; 在Safari上⾯可能会有⼀些奇怪的抖动。
正确的做法是要⽤哪个属性做动画就写哪个，如果有多个就⽤逗号隔开，如下代码所⽰：
transition: transform 2s linear, opacity 2s linear;
- 【推荐】位移动画使⽤ transform 替代 position （提升动画性能）
- 【推荐】使⽤ CSS 动画替代 JS 动画
（5）声明顺序
【参考】相关的属性声明按以下顺序做分组处理，组之间需要有⼀个空⾏
- Positioning（影响其他元素和⾃⾝位置相关声明
- Box model（⾃⾝盒模型相关声明）
- Typographic（⽂本相关声明）
- Visual（⾃⾝样式）
- Misc（其他声明)
例子：
.declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width: 100px; height: 100px; /* Typography */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; /* Visual */ background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; /* Misc */ opacity: 1; }
3、JavaScript 编码规范
（1）命名：
- 【强制】标准变量采⽤驼峰式命名（考虑与后台交换数据的情况，对象属性可灵活命名）
- 【强制】常量全⼤写，⽤下划线连接
- 【强制】变量名不应过短，要能准确完整地描述该变量所表述的事物，但也不能过长，不利于阅读，最长不能超过5个单词。
| 不好的变量名 | 好的变量名 |
| inp | input, priceInput |
| day1, day2, param1 | today, tomorrow |
| id | userId, orderId |
| obj | orderData, houseInfos |
| tId | removeMsgTimerId |
| handler | submitHandler, searchHandler |
- 【强制】变量名不要使⽤计算机术语，如 texareaData，应该取和业务相关的名字，如 leaveMsg
- 【强制】变量名使⽤正确的语法
- 【推荐】不要使⽤否定的名词，如 notOk、notReady，因为否定的词取反的时候就会⽐较奇怪，如 if (!notOk)
（2）语法：
- 【强制】变量不要先使⽤后声明
- 【强制】不要声明了变量却不使⽤
- 【强制】不要在同个作⽤域下声明同名变量
- 【强制】⼀个函数作⽤域中所有的变量声明尽量提到函数⾸部，可根据代码进⾏分组，但不允许出现两个连续的变量声明
// not good let registerForm = null; let question = ""; let calculateResult = 0; // good let registerForm = null, question = "", calculateResult = 0;
- 【强制】单⼀函数的返回值类型要确定
如下⽆法确定该函数的最终返回类型
// not good function calculatePrice(seatCount){ if (seatCount <= 0) { return ""; } else { return seatCount * 79; } }
- 【强制】debugger不要出现在提交的代码⾥
- 【推荐】使⽤箭头函数取代简单的函数
// not good let _this = this; setTimeout(function() { _this.foo = "bar"; }, 2000); // good setTimeout(() => this.foo = "bar", 2000);
- 【推荐】在必要的地⽅添加⾮空判断以提⾼代码的稳健性
- 【推荐】将复杂的函数分解成多个⼦函数，⽅便维护和复⽤
（3）⽂档注释
【参考】各类标签建议在以下情况下使⽤：
- 所有常量
- 所有函数
- 所有类
/** * @func * @desc ⼀个带参数的函数 * @param {string} a - 参数a * @param {number} b=1 - 参数b默认值为1 * @param {string} c=1 - 参数c有两种⽀持的取值</br>1—表⽰x</br>2—表⽰xx * @param {object} d - 参数d为⼀个对象 * @param {string} d.e - 参数d的e属性 * @param {string} d.f - 参数d的f属性 * @param {object[]} g - 参数g为⼀个对象数组 * @param {string} g.h - 参数g数组中⼀项的h属性 * @param {string} g.i - 参数g数组中⼀项的i属性 * @param {string} [j] - 参数j是⼀个可选参数 */ function foo(a, b, c, d, g, j) { // ... }
4、Vue 组件编码规范
（1）命名：
- 【强制】组件名应该始终是多个单词的，根组件App除外，但最多不超过5个单词
- 【强制】单⽂件组件的⽂件名应该始终是单词⼤写开头（ PascalCase ）
// not good components/ |- mycomponent.vue components/ |- myComponent.vue // good components/ |- MyComponent.vue
- 【推荐】应⽤特定样式或者约定的基础组件应该全部以⼀个特定的前缀开头，⽐如 Base、App或 V
// not good components/ |- MyButton.vue |- VueTable.vue |- Icon.vue // good components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue components/ |- AppButton.vue |- AppTable.vue |- AppIcon.vue components/ |- VButton.vue |- VTable.vue |- VIcon.vue
【推荐】只应该拥有单个活跃实例的单例组件应该以 The 前缀命名，以⽰其唯⼀性
单例组件不意味着组件只可⽤于⼀个单页⾯，⽽是每个页⾯只使⽤⼀次。这些组件永远不接受任何 prop，因为它们是为你的应⽤定制的，⽽不是它们在你的应⽤中的上下⽂。如果你发现有必要
- 添加 prop，那就表明这实际上是⼀个可复⽤的组件，只是⽬前在每个页⾯⾥只使⽤⼀次。
// not good components/ |- Heading.vue |- MySidebar.vue // good components/ |- TheHeading.vue |- TheSidebar.vue
- 【推荐】和⽗组件紧密耦合的⼦组件应该以⽗组件名作为前缀命名
如果⼀个组件只在某个⽗组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织⽂件，所以这样做可以把相关联的⽂件排在⼀起。
// not good components/ |- TodoList.vue |- TodoItem.vue |- TodoButton.vue components/ |- SearchSidebar.vue |- NavigationForSearchSidebar.vue //good components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue
- 【推荐】组件名应该以⾼级别的 (通常是⼀般化描述的) 单词开头，以描述性的修饰词结尾
// not good components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue // good components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue
- 【推荐】组件名应该倾向于完整单词⽽不是缩写
// not good components/ |- SdSettings.vue |- UProfOpts.vue // good components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue
（2）语法：
- 【强制】prop 的定义应该尽量详细，⾄少需要指定其类型
// not good // 这样做只有开发原型系统时可以接受 props: ['status'] // good props: { status: String } // better props: { status: { type: String, required: true, validator: function (value) { return [ 'syncing', 'synced', 'version-conflict', 'error' ].indexOf(value) !== -1 } } }
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键（三）：https://developer.aliyun.com/article/1628440
