Fast-UI

# 注释规范

# HTML部分注释

把页面布局按快分开，每一块写上开头和结尾。块与块之间间隔一行

<!-- 商品列表 start -->
<view class="fu-goods-list">
  <view class="fu-list-item">商品列表的代码</view>
</view>
<!-- 商品列表 end -->

<!-- 底部栏 start -->
<view></view>
<!-- 底部栏 end -->
1
2
3
4
5
6
7
8
9

# CSS部分注释

CSS的每一块要与HTML对应

// 商品列表 start
.fu-goods-list {
  width: 100%;
  height: 256rpx;
  .fu-list-item {
    width: 100%;
    height: 256rpx;
  }
}
// 商品列表 end
1
2
3
4
5
6
7
8
9
10

# 对于在该页面可能会多次使用的css样式依次写在SCSS部分底部

// 该页面公用样式
.block-99 {
  width: 99rpx;
  height: 99rpx;
}
.block-98 {
  width: 98rpx;
  height: 98rpx;
}
1
2
3
4
5
6
7
8
9

# JS部分注释

JS使用文档注释的方式

注释 说明
@event 用户通过点击，触摸等交互方式执行的方法
@function 不是由产生交互而执行的方法
@description 该方法的功能描述
@parma 该方法接受的参数
@property 该方法内部的属性
@return 该方法的返回值
@see 引入外部文件的描述

# data里的注释方法

注释 说明
{Number} 该数据是数字类型
{String} 该数据是字符串类型
{Array} 数组类型
{Object} 对象类型
{Array.Object} 数组类型，数组里的每一项为对象
{Array.Number} 数组类型，数组里的每一项为数字
<script>
export default {
  data() {
    return {
      goodsList: [],      // {Array.Object} 商品列表信息，数组里的每一项为对象
      tempNumber: '',     // {Number} 临时数字，数据类型为数字的注释
      tempObject: {},     // {Object} 临时对象，数据类型为对象的注释
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11

# 引入外部文件的注释方法

<script>
/**
 * @see fuGoodsBlock - 引入引入商品双列布局组件
 * @see fuWaterflow - 引入瀑布流组件
*/
import fuGoodsBlock from '@/common/fu-goods-block/fu-goods-block'
import fuWaterflow from './components/fu-Waterflow/fu-Waterflow'
export default {
  // 业务代码。。。
}
</script>
1
2
3
4
5
6
7
8
9
10
11

# methods里的注释方法

<script>
export default {
  data() {
    return {}
  },
  methods: {
    /**
     * @function
     * @description 获取商品列表
     * @property {Object} data - 请求接口携带的信息
     * @property {Number} data.order_sn - 订单号
     * @property {String} data.user_id - 用户id
     */
    goodsListGeting() {
      const data = {
        order_sn: 10,
        user_id: "20",
      }
      // ...
    },
    /**
     * @event
     * @description 点击查看详情按钮
     * @parma {Object} item - 点击的商品的信息
     */
    goodsDetailGoing(item) {},
    /**
     * @function
     * @description 过滤商品价格的整数部分
     * @param {Number} num - 需要过滤的价格
     * @return {Number} 
     */
    filtraInt(num) {
      return num << 0;
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 生命周期里的注释方法

页面跳转需要携带参数的一定要在onLoad生命周期里写清楚参数的意思，需要在生命周期里实现特定功能的也要写清楚

<script>
export default {
  /**
   * @function
   * @param {Object} option - 页面跳转携带的参数
   * @property {Number} option.id - 商品id
   * @property {Number} option.sn - 订单号
  */
  onLoad(option) {
    this.tempData = option.id
  },
  /**
   * @function
   * @description 动态计算topBar的透明度
  */
  onPageScroll() {
    // 业务代码
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

快速开始