您现在的位置是:网站首页>软件开发>开发终端>uni-appuni-app
uniapp规范开发(3)命名规范
风口下的猪2020-08-25【uni-app】
简介
普通变量命名规范
命名方法 :驼峰命名法
命名规范 :
- 命名必须是跟需求的内容相关的词,比如说我想申明一个变量,用来表示我的学校,那么我们可以这样定义const mySchool = "我的学校";
- 命名是复数的时候需要加s,比如说我想申明一个数组,表示很多人的名字,那么我们可以这样定义const names = new Array();
常量
- 命名方法 : 全部大写
- 命名规范 : 使用大写字母和下划线来组合命名,下划线用以分割单词。
const MAX_COUNT = 10
const URL = 'https://www.baidu.com/'
组件命名规范
官方文档推荐及使用遵循规则
PascalCase (单词首字母大写命名)是最通用的声明约定
kebab-case (短横线分隔命名) 是最通用的使用约定
组件名应该始终是多个单词的,根组件 App 除外
有意义的名词、简短、具有可读性
命名遵循 PascalCase 约定
公用组件以 Abcd (公司名缩写简称) 开头,如(AbcdDatePicker,AbcdTable)
页面内部组件以组件模块名简写为开头,Item 为结尾,如(StaffBenchToChargeItem,StaffBenchAppNotArrItem)
使用遵循 kebab-case 约定
在页面中使用组件需要前后闭合,并以短线分隔,如(
, )导入及注册组件时,遵循 PascalCase 约定 同时还需要注意:必须符合自定义元素规范: 切勿使用保留字。
method 方法命名命名规范
- 驼峰式命名,统一使用动词或者动词+名词形式
//bad
go、nextPage、show、open、login
// good
jumpPage、openCarInfoDialog
- 请求数据方法,以 data 结尾
//bad
takeData、confirmData、getList、postForm
// good
getListData、postFormData
init、refresh 单词除外
尽量使用常用单词开头(set、get、go、can、has、is)
附: 函数方法常用的动词:
get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
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 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集
views 下的文件命名
只有一个文件的情况下不会出现文件夹,而是直接放在 views 目录下面,如 index.vue
尽量是名词,且使用驼峰命名法
开头的单词就是所属模块名字(workbenchIndex、workbenchList、workbenchEdit)
名字至少两个单词(good: workbenchIndex)(bad:workbench)
props 命名
在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case
<!-- bad -->
<script>
props: {
'greeting-text': String
}
</script>
<welcome-message greetingText="hi"></welcome-message>
<!-- good -->
<script>
props: {
greetingText: String
}
</script>
<welcome-message greeting-text="hi"></welcome-message>
例外情况
作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr。
循环变量可以简写,比如:i,j,k 等。
很赞哦! (0)
/ponder/index.php/index/catelist/catelist/cateid/10.html
相关阅读 (同一栏目)
- uni-app发行(打包)h5,访问为白屏
- v-for使用报错:Cannot use v-for on stateful component root element because it renders multiple elements.
- 组件中不通过$emit改父组件数据,报错
- $emit传递多个参数
- 通过html5+扩展titleNView定义autoBackButton,autoBackButton在h5失效的问题
- 交互反馈uni.showModel()中success用箭头函数的问题
- 页面首次加载时,popup弹出层失效问题
- 使用uni-nav-bar左右两个图标宽度不同的问题
- 自定义组件uni-nav-bar插槽问题
- 解决 img mode="widthFix" 高度闪烁问题
- 多层使用组件,每层都要注册的问题
- scroll-view上拉加载失效问题
- Hbuilder智能感知引入同目录组件,路径出错问题
- swiper轮播图片右侧空白问题
- 可拖拽顶部tab组件,设置padding时,只需在下部uni-tab-bar中scroll-view里的view
- 渐变透明的导航栏设计
- watch数据监听
- 微信小程序swiper-item设置style引起图片不显示问题(ios端)
- uni-app开发微信小程序时page.json如何设置每个页面的Style(状态栏、导航条、标题、窗口背景色等)
- uniapp运行到app端出现空白的问题
- uni-app路由跳转及参数的传参和接收
- 在获取异步函数(uniapp中的uni.request等)返回结果,用renturn报undefined
- ios时间格式为2020-02-02使用new Data()转化为时间戳的问题
- better-scroll使用时报错
- better-scroll在项目中涉及到v-if控制显示切换时,滑动失效
- uni-app导航栏和状态栏配置
- APP端js类方法及属性间相互调用,this的指向问题
- uniapp app端调试
- uniapp 页面栈管理
- uni-app规范开发(1)设置配置文件
- uniapp规范开发(2)封装请求接口
- uniapp规范开发(3)命名规范
- uniapp规范开发(4)结构化规范
- uniapp规范开发(5)注释规范
- uniapp规范开发(8)使用过滤器filter
- uniapp规范开发(6)编码规范
- uniapp规范开发(7)指令规范
- uni-app规范开发(10)Vue 单文件组件 (SFC) 规范
- uni-app规范开发(9)使用公共组件利用slot
- vue挂载全局方法和组件(uni-app中)
- bscroll左右联动
- uni-app规范开发(11)加载数据后渲染
- HbuilderX运行npm
- [BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll
- 含bscroll页面重复渲染引起页面中点击事件执行多次
- bscroll购物车面板打开关闭后,bacroll不再可滑动的解决方案
- [BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll
- renderjs的概述及作用
- renderjs模式下,视图层与逻辑层的通信及调用
- renderjs模块获取逻辑层的数据
- 子组件需要自有数据时,不要用data申明数据+方法里用this定义数据
- QQ小程序打开指定QQ群
- eqqwe
- 前端使用uni.uploadFile发生表单数据时,后端通过$_POST/param()等方法都获取不到
- render模块下,视图层js(render.js)调用逻辑层js
- Uniapp 实现 与 外部 HTML 页面通信
- 非页面js使用uni.navigateTo()进行跳转
- 新增和编辑页面中,数据带图片的问题
- 前后端开发时,数组遍历的偏重使用
- uniapp h5页面刷新出现404或者空白的解决方法
- JDK或JRE生成安卓APP证书
- uni-app HBuilder X 云打包:证书文件不是有效地keystore文件
- 软件版本更新的一些梳理
- uniapp wgt安装失败的原因
- plus.install安装失败的解决方案
- 源生组件的z-index问题
- 组件通过qq.createSelectorQuery().select()不能获取到自己板块的id,但是能获取到父主页面的id
- 微信/QQ小程序网络图片-canvas时不显示的问题
- 小程序将网络图片转为base64
- uniapp 安卓端保存base64到相册
栏目目录
标签云
站点信息
- 文章统计:528篇
- 移动端访问:扫码进入SQ3R
