啊对对队——代码规范

啊对对队. 团队 2024-05-17 22:41:48
这个作业属于哪个课程2302软件工程
这个作业要求在哪里团队作业—bate冲刺+事后诸葛亮
这个作业的目标代码规范
团队名称啊对对队
团队置顶随笔啊对对队——Beta冲刺置顶集合随笔
其他参考文献

目录

  • uniapp规范
  • 一、开发规范
  • 二、 目录结构
  • 2.1 TIP
  • 三、导入静态资源
  • 3.1模板内引入静态资源
  • 3.1.2 TIP
  • 3.2 js文件引入
  • 3.2.1 WARNING
  • 3.3 css引入静态资源
  • WARNING
  • TIP
  • 四、命名规范
  • 4.1规范方式
  • 4.2 整体规范
  • 4.3 命名严谨性
  • 4.4 项目命名
  • 4.5 目录(文件夹)命名
  • 4.6 文件命名
  • 4.7 组件命名
  • 4.8 css命名
  • 4.9 js命名
  • 变量&函数
  • 五、 vue规范
  • 5.1 Router规范
  • 页面跳转数据传递使用路由参数
  • 5.2使用路由懒加载(延迟加载)机制
  • 5.3 router中的命名规范
  • 5.4 Vue组件及内容规范
  • 标签顺序保持一致
  • 4.5 组件/实例的选项的顺序
  • 5.7 模板中的组件名
  • 5.8 组件数据
  • 5.9 Prop定义
  • 5.10 多个attribute的元素
  • 5.11 模板中使用简单的表达式
  • 5.12 指令推荐都使用缩写形式
  • 5.13 v-show 与 v-if 选择
  • 5.14 为v-for设置键值
  • 5.15 避免 v-if 和 v-for 同时用在一个元素上(性能问题)
  • 提示
  • 六、小程序规范
  • 6.1 规范细则

uniapp规范

参考uniapp官网

一、开发规范

为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:

    1. 页面文件遵循 Vue 单文件组件 (SFC) 规范
    1. 组件标签靠近小程序规范,详见uni-app 组件规范 有几点特别要注意:
  • (1) 所有组件与属性名都是小写,单词之间以连字符-连接;
  • (2)每个vue文件的根节点必须为 template,且这个 template下只能且必须有一个根 view 组件;
  • (3)不推荐使用HTML标签,为了管理方便、策略统一,新写代码时仍然建议使用view等组件;
  • (4)组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName"
  • (5)uni-app支持的组件分为vue组件和小程序自定义组件;如果扩展组件符合uni-app的easycom组件规范,则可以免注册,直接使用;如果组件不符合easycom规范,则需要在代码里手动import和注册组件,然后才能使用.
    1. 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范
    1. 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
    1. 为兼容多端运行,建议使用flex布局进行开发

二、 目录结构

一个uni-app工程,默认包含如下目录及文件:

markdown
┌─uniCloud              云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
│─api                            接口接口目录
│─asses                       css、icon资源目录 
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
│─config                      公共配置文件比如请求域名、端口、缓存等。
│─libs                        第三方sdk工具包
│─mixins                     混入对象
├─hybrid                App端存放本地html文件的目录,
├─platforms             存放各平台专用页面的目录,
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
│─plugin                     第三方插件包
├─static                  存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
│─store                     vuex状态管理目录
│─utils                     自定义工具类
├─uni_modules           存放uni_module规范的插件。
├─wxcomponents          存放小程序组件的目录,
├─main.js                 Vue初始化入口文件
├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

2.1 TIP

  • 编译到任意平台时,static 目录下的文件均会被完整打包进去,且不会编译。非 static 目录下的文件(vue、js、css 等)只有被引用到才会被打包编译进去。
  • static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。
  • css、less/scss 等资源不要放在 static 目录下,建议这些公用的资源放在自建的 common 目录下。
  • HbuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 等小程序需要的文件。

三、导入静态资源

3.1模板内引入静态资源

template内引入静态资源,如image、video等标签的src属性时,可以使用相对路径或者绝对路径,形式如下

<!-- 绝对路径,/static指根目录下的static目录,在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

3.1.2 TIP

3.2 js文件引入

js文件或script标签内(包括renderjs等)引入js文件时,可以使用相对路径和绝对路径,形式如下

// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

3.2.1 WARNING

js文件不支持使用/开头的方式引入

3.3 css引入静态资源

  • css文件或style标签内引入css文件时(scss、less文件同理),可以使用相对路径或绝对路径(HBuilderX 2.6.6)
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

WARNING

自HBuilderX 2.6.6起支持绝对路径引入静态资源,旧版本不支持此方式

  • css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径,需要注意的是,有些小程序端css文件不允许引用本地文件(请看注意事项)。
    /* 绝对路径 */
    background-image: url(/static/logo.png);
    background-image: url(@/static/logo.png);
    /* 相对路径 */
    background-image: url(../../static/logo.png);
    

TIP

四、命名规范

4.1规范方式

  • 帕斯卡拼写法,英文为PascalCase,特点是所有连接单词的首字母大写,可以简称为大坨峰

  • 骆驼拼写法,英文为camelCase,特点是第一个连接的单词的首字母小写,其余大写,可以简称为小坨峰;

  • 短横拼写法,英文为kebab-case,特点是所有连接的单词以中划线(-)连接,可以简称为中划线。

  • 文件和文件夹中除components中组件文件夹要使用 大坨峰规则外,其他文件和文件夹都为中划线分隔。

    4.2 整体规范

  • 命名不可使用中文拼音

  • 字母统一小写,专有名词可大写

  • 共性在前,个性在后

  • 语义要清楚完整,不要过分简写

4.3 命名严谨性

  • 与后端命名统一。比如权限:后端privilege, 前端无论router , store, api等都必须使用privilege单词!

  • 文件和代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式。 正确的英文拼写和语法可以让阅读者易于理解,避免歧义。 注:beijing、henan、rmb 等国际通用的名称,可视同英文。

4.4 项目命名

  • 字母组成,中划线拼接,全部采用小写方式,以中划线分隔。前面为项目英文名称,后面为项目的类型。尽量不要用mall-management-system,因为被后台占用。

4.5 目录(文件夹)命名

  • 文件夹代表着功能或者模块的名字,应该简洁明了。 除components组件目录,使用大坨峰命名, node_modules 依赖外,其余全部采用字母组成,中划线拼接。 有复数结构时,要采用复数命名法

  • 普通示例:
    scripts/、styles/、images/、utils/、layouts、company-news/、img/、js/、doc/、api/、order/

  • 特殊:
    node_modules示例:node_modules/、 components示例:SvgIcon、Upload、TestUnit

4.6 文件命名

  • 文件包括.js .css .html .vue .sass .less 图片等文件

  • 字母组成,中划线拼接

  • 例:sass-index.scss dialog-user-info.vue

4.7 组件命名

  • 声明&使用:首字母大写,驼峰拼接
// 声明
import DialogUserInfo form '@/components/dialog-user-info'
components: {
    DialogUserInfo
}
// 使用
<DialogUserInfo></DialogUserInfo>

4.8 css命名

  • 字母组成,中划线拼接 id采用驼峰式命名

  • 例:.color-white #theDialog

4.9 js命名

变量&函数

  • 常量:大写字母、数字组成,下划线拼接,例:CONSULT_TYPE 私有变量:字母、数字组成,驼峰拼接,下划线开头,例:_self 普通变量:字母、数字组成,驼峰拼接,例:idCard 构造函数:字母组成,驼峰拼接,首字母大写,例:Vue() 普通函数:字母组成,驼峰拼接,动词+名词方式组合,例:getList()

五、 vue规范

5.1 Router规范

页面跳转数据传递使用路由参数

  • 页面跳转,例如 A 页面跳转到 B 页面,需要将 A 页面的数据传递到 B 页面,推荐使用 路由参数进行传参,而不是将需要传递的数据保存 vuex,然后在 B 页面取出 vuex 的数据,因为如果在 B 页面刷新会导致 vuex 数据丢失,导致 B 页面无法正常显示数据。

let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });

5.2使用路由懒加载(延迟加载)机制


{
  path: '/uploadAttachment',
  name: 'uploadAttachment',
  meta: {
    title: '上传附件'
  },
  component: () => import('@/view/components/uploadAttachment/index.vue')
}

5.3 router中的命名规范

  • path命名规范选择单个单词组成,如果一个单词不能代表页面意思,可以采用kebab-case命名规范。与vue文件的目录命名的单词保持一致。必须以 / 开头,即使是children里的path也要以 / 开头,这样很方便找到对应的文件。
  • name命名规范采用kebab-case命名规范且和component组件名保持一致!(因为要保keep-alive特性,keep-alive按照component的name进行缓存,所以两者必须高度保持一致)
  • meta里面至少要有title属性,并且命名与页面路由和文件名意思相同。
    export const reload = [
    {
      path: '/reload',
      name: 'reload',
      component: () =>{
          import('@/views/reload/reload.vue')
      },
      meta: { title: '加载页面' },
      children: [
        {
          path: '/reload/list',
          name: 'reload-list',
          component: () =>{
              import('@/views/reload/reload-list/reload-list.vue')
          },
          meta: { title: '加载列表' },
          children: [
            {
                path: '/reload/list/file',
                name: 'reload-list-file',
                component: () =>{
                  import('@/views/reload/reload-list/reload-list-file.vue')
                },
                meta: { title: '加载列表文件' }
            }
          ]
        }
      ]
    }
    ];
    

    5.4 Vue组件及内容规范

    标签顺序保持一致

  • 单文件组件应该总是让标签顺序保持为:
<template>...</template>
<script>...</script>
<style>...</style>

4.5 组件/实例的选项的顺序

组件/实例的选项应该有统一的顺序。下面是我们推荐的组件选项默认顺序。它们被划分为几大类,所以你也能知道从插件里添加的新 property 应该放到哪里。

  • 常见顺序展示:
    name > components > filters > mixins >  props > data > computed > watch > 钩子函数(按其执行顺序) > methods
    
  • 详细展示:
    ```md

//副作用 (触发组件外的影响)
el
//全局感知 (要求组件以外的知识)
name
parent
//组件类型 (更改组件的类型)
functional
//模板修改器 (改变模板的编译方式)
delimiters
comments
//模板依赖 (模板内使用的资源)
components
directives
filters
//组合 (向选项里合并 property)
extends
mixins
//接口 (组件的接口)
inheritAttrs
model
props/propsData
//本地状态 (本地的响应式 property)
data
computed
//事件 (通过响应式事件触发的回调)
watch
//生命周期钩子 (按照它们被调用的顺序)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
//非响应式的 property (不依赖响应系统的实例 property)
methods
//渲染 (组件输出的声明式描述)
template/render
renderError

### 5.6 组件名字
组件名应该始终是多个单词的,根组件 App 以及 transition 、component 之类的 Vue 内置组件除外。 这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。

```js

Vue.component('todo-item', { 
// ...
})
import TodoItem from './todo-item'
import TodoItem from './todo/todo-item.vue'
export default { 
  name: 'todo-item', // ... 
}

5.7 模板中的组件名

对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是大坨峰命名,并且使用自闭合组件。但是在 DOM 模板中总是中划线命名,并且需要有闭合标签。


//在单文件组件和字符串模板中
<MyHeader>
<MyComponent/>
<table :column="data" />
</MyHeader>
//在 DOM 模板中
<my-component>
<table :column="data"></table>
</my-component>

5.8 组件数据

组件的 data 必须是一个函数。 当在组件中使用 data property 的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数。


Vue.component('todo-item', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}
// 在一个 Vue 的根实例上直接使用对象是可以的,因为只存在一个这样的实例。
new Vue({
  data: {
    foo: 'bar'
  }
})

5.9 Prop定义

Prop 定义应该尽量详细。在你提交的代码中,prop 的定义应该尽量详细;至少需要指定其类型;必须加上注释,表明其含义;必须加上required或者default,两者二选其一;如果有业务需要,必须加上 validator 验证

props: {
  status: String
}
props: {
// 组件状态,用于控制组件的颜色
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'version-conflict',
      ].indexOf(value) !== -1
    },
     // 用户级别,用于显示皇冠个数
userLevel:{
type: String,
required: true
   }
  }
}

5.10 多个attribute的元素

大于两个attribute的元素应该分多行撰写,每个attribute一行。

<div class="main"></div>
<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

5.11 模板中使用简单的表达式

正例:


<template>
  <p>{{ normalizedFullName }}</p>
</template>
// 复杂表达式已经移入一个计算属性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

反例:


<template>
  <p>
       {{
          fullName.split(' ').map(function (word) {
             return word[0].toUpperCase() + word.slice(1)
           }).join(' ')
        }}
  </p>
</template>

5.12 指令推荐都使用缩写形式

用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot


<input
  @input="onInput"
  @focus="onFocus"
>

5.13 v-show 与 v-if 选择

如果运行时,需要非常频繁地切换,使用v-show;如果在运行时,条件很少改变,使用 v-if。另外v-if比较耗性能,大量元素和内容进行判断,建议用v-show。

5.14 为v-for设置键值

总是用 key 配合 v-for。在组件上总是必须用 key 配合 v-for,以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为,比如动画中的对象固化 (object constancy),也是一种好的做法。

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

5.15 避免 v-if 和 v-for 同时用在一个元素上(性能问题)

*(1)将数据替换为一个计算属性,让其返回过滤后的列表


<ul>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
 </ul>
<script>
  computed: {
    activeUsers: function () {
      return this.users.filter(function (user) {
        return user.isActive
      })
    }
  }
</script>
  • 将 v-if 移动至容器元素上 (比如 ul, ol)#
    ```html
  • {{ user.name }}
``` ### 5.16 为组件样式设置作用域 公共样式单独新建css或less、sass文件进行引入,组件内style使用scoped特性。

<style scoped>
.btn-close {
    background-color: red;
}
</style>

提示

  • 尽量不要手动操作 DOM,因使用 vue 框架,所以在项目开发中尽量使用 vue 的数据驱动更新 DOM,尽量(不到万不得已)不要手动操作 DOM,包括:增删改 dom 元素、以及更改样式、添加事件等。

六、小程序规范

6.1 规范细则

  • 单位:rpx
  • 生命周期钩子书写顺序:
    ```js
  • mixin
  • components
  • props
  • data
  • computed
  • watch
  • onLoad
  • onShow
  • onPullDownRefresh
  • onReachBottom
  • onHide
  • onUnload
  • updated
  • methods
    ```
  • 页面载入存在脏数据,在 onLoad 钩子进行数据初始化:
    onLoad () {
      Object.assign(this, this.$options.data())
    }
    
  • 获取翻页列表格式规范
    // 列表只需加载一次用onLoad,返回该页面会导致列表数据改变用onShow
    onLoad/onShow () {
      wx.startPullDownRefresh()
    }
    // 下拉刷新
    onPullDownRefresh () {
      this.getXxxList(true, false).then(() => {
        wx.stopPullDownRefresh()
      })
    },
    // 上拉翻页
    onReachBottom () {
      this.getXxxList(false, true)
    },
    // 获取xxx列表
    async getXxxList (isRefresh, isLoading) {
      if (isRefresh) {
          this.pageNo = 1
          this.mainList = []
      } else {
          this.pageNo++
      }
      await this.$post({
          isLoading: isLoading,
          loadingText: '加载中...',
          url: this.$apis.list,
          param: {
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            ...
          }
      }).then(res => {
          this.mainList.push(...res.data.list)
          this.nodata = this.$util.switchNodata(this.mainList)
      }, () => {
          isRefresh && this.nodata = true
      })
    }
    
  • van-ui 组件中,动画效果有两个组件,popup 和transition

1.折叠展开之类,用 transition
2.城市下拉树之类,用 popup

  • van-ui 组件中的以下情况,样式需要另起一个 style,不加 scoped,必要的话对页面根元素加命名空间

1.单页面重写组件样式
2.custom-class自定义的样式

  • 上传图片并提交的一般的逻辑是,提交的时候再做上传操作,上传成功之后调提交的接口
    ```js
    // common.js
    /**
  • 上传图片
  • @param {String} url 接口路径
  • @param {Array} fileArr 图片文件数组
  • @param {String} belong 唯一标识
  • @param {Number} index 索引,默认从0开始递归
  • @return promise异步方法
  • /
    const uploadOneImg = (url, fileArr, belong, index = 0) => { // wx.uploadFile只能一张一张传
    return new Promise((resolve, reject) => {
    if (fileArr.length === 0) {
    return resolve('complete')
    
    }
    wx.uploadFile({
    url: url,
    filePath: fileArr[index].path,
    name: 'file',
    header: {
      'content-type': 'application/x-www-form-urlencoded',
      token: store.state.userInfo.token
    },
    formData: {
      belong: belong,
      type: 2 // 1.一般图片2.咨询图片3.pdf4.pdf图片5.反馈与意见图片 6.历史图片中重复的图片 7.白处方图片
    },
    success: res => {
      if (index < fileArr.length - 1) {
        resolve(uploadOneImg(url, fileArr, belong, ++index))
      } else {
        resolve('complete')
      }
    },
    fail: res => {
      reject(res)
    }
    
    })
    })
    }
    // xxx.vue
    import { uploadOneImg } from '@/utils/common'
    submitFeedBack () {
    uploadOneImg(this.$apis.uploadFeedBackImage, this.fileArr, this.belong).then(res => {
      if (res === 'complete') {
          // 提交操作
          ...
      }
    
    }, () => {
      // 上传失败
    
    })
    }
    ```
  • 按钮统一用小程序原生
    <button :disabled="!ableSubmit" class="width100 bgcolor-orange color-white" @tap="buy">立即购买</butt>
    
...全文
31 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

116

社区成员

发帖
与我相关
我的任务
社区描述
FZU-SE
软件工程 高校
社区管理员
  • LinQF39
  • 助教-吴可仪
  • 一杯时间
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧