Weapp影视评分项目开发（03）：代码规范与约束本篇文章是该系列的第三篇，介绍本项目的一些代码规范，包含命名、注释、语

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前言

本篇文章介绍本项目的一些代码规范，包含命名、注释、语法等。更多详细的介绍，会在具体的模块中补充。

知识点

CSS 命名 组件命名 语法规范

一、CSS 命名

1. class 命名

本项目中 CSS 采用 BEM 命名法。关于 BEM 命名规范，在此不做过多描述。项目中有部分代码未能完全采用该规范，但会尽量避免。示例：

<view class="switch switch--checked">
  <input class="switch__input" type="checkbox" name="{{ name }}" value="{{ value }}" />
  <view class="switch__node">
    <view class="spinner__snake"></view>
  </view>
</view>

2. 样式属性

书写顺序
1. 定位：z-index、position、left、top、right、bottom 等
2. 模型：display、float 等
3. 尺寸：margin、padding、width、height、min-width、min-height、line-height 等
4. 文字：font-size、font-weight、text-align、color 等
5. 背景：border、border-radius、background、box-shadow 等
6. 溢出：overflow、text-overflow 等
7. 其它：animation、transform 等
书写规范
- 使用 CSS 属性缩写:
  如 margin: 0 10px; color: #fff; background: url('xx.png') center no-repeat cover;
- 0 值后省略单位：
  如 margin: 0 10px; padding: 0;
- 每行样式后需要加 ; 结尾

二、函数命名与注释

命名：
- 采用驼峰命名，即 camelCase 形式
- 命名应该使用英文且有意义

注释：

单行注释在注释的 // 后需要保留一个空格
多行注释如下

/**
 * @desc 函数说明
 * @param {string} [name] 参数描述
 * @return {object} 返回描述
 */

三、组件约束

组件目录

组件目录统一使用 kebab-case 风格
组件文件统一使用 index.xxx 格式，如下：

└── components                         // 所有组件目录
    └── movie-item                     // 单个组件目录
        ├── index.js                   // 逻辑交互
        ├── index.json                 // 静态配置
        ├── index.wxml                 // 组件模板
        └── index.scss                 // 组件样式

组件样式设置
对于全局组件，需要开启样式穿透，使其父组件或者页面，能修改组件的样式，如下： JS options: { addGlobalClass: true },

组件内部属性或方法书写顺序

Component({
  behaviors: [],
  options: {},
  externalClasses: [],
  properties: {},
  data: {},
  observers: {},
  created() {},
  attached() {},
  ready() {},
  methods: {}
})

组件 properties
- 命名使用 camelCase 形式，模板中使用 kebab-case 形式
- 尽可能提供 value 默认值
组件说明

/**
 * m-tag
 * @module components/tag
 * @desc 标签
 * @param {string} [type=primary] 组件样式，可选 primary, error, success, warning
 * @param {string} [color] 传入颜色值
 *
 * @example
 * <m-tga color="red">失败</m-tag>
 */

四、JS 语法

优先使用 ES6 及以上语法，特别是对象解构赋值与箭头函数。

// 例1：
// bad
onLoad: function() {

}
// good
onLoad() {

}

// 例2：
// bad
setTimeout(function() {

})
// good
setTimeout(() => {

})

使用全等操作符 ===
对于不使用的 console.log 应及时删除

五、Wxml 语法

标签全部使用小写，组件使用 kebab-case 形式
标签属性使用双引号
标签属性较多时，应该折行处理，每个属性占一行，布尔值属性为 true 时省略不写，如：
```
<image 
 src="xxx.jpg"
 alt="xxx"
 lazy-load
 mode="aspectFit"
/>
```
标签闭合
对于展示类型的标签（原生或者组件），应该使用单闭合，如：
```
<image src="" alt="" />
<slot />
```

最后

本文是对本项目代码的规范以及文件命名等的约束说明，可能有些方式与您的日常使用并不一致，我们求同存异，如您有更好的方案或建议，请在评论区留言。