项目代码规范

Web端代码规范

Vue项目代码规范

一、命名规范

1、项目名 全部采用小驼峰命名式,例:camelCase(小驼峰式命名法 —— 首字母小写)
2、目录名 参照项目命名规则,有复数结构时,要采用复数命名法。例:docs、assets、components、directives、mixins、utils、views。
3、图像文件名 全部采用小写方式, 优先选择单个单词命名,多个单词命名以下划线分隔
4、Vue 组件命名
1)单文件组件名 文件扩展名为 .vue 的 single-file components (单文件组件)。单文件组件名应该始终是单词大写开头(PascalCase)。
2)单例组件名 只拥有单个活跃实例的组件应该以 The 前缀命名,以示其唯一性。这不意味着组件只可用于一个单页面,而是每个页面只使用一次。这些组件永远不接受任何 prop,因为它们是为你的应用定制的。如果你发现有必要添加 prop,那就表明这实际上是一个可复用的组件,只是目前在每个页面里只使用一次。比如,头部和侧边栏组件几乎在每个页面都会使用,不接受 prop,该组件是专门为该应用所定制的。
3)基础组件名 基础组件:不包含业务,独立、具体功能的基础组件,比如日期选择器、模态框等。这类组件作为项目的基础控件,会被大量使用,因此组件的 API 进行过高强度的抽象,可以通过不同配置实现不同的功能。应用特定样式和约定的基础组件(也就是展示类的、无逻辑的或无状态、不掺杂业务逻辑的组件) 应该全部以一个特定的前缀开头 —— Base。基础组件在一个页面内可使用多次,在不同页面内也可复用,是高可复用组件。
4)业务组件 业务组件:它不像基础组件只包含某个功能,而是在业务中被多个页面复用的(具有可复用性),它与基础组件的区别是,业务组件只在当前项目中会用到,不具有通用性,而且会包含一些业务,比如数据请求;而基础组件不含业务,在任何项目中都可以使用,功能单一,比如一个具有数据校验功能的输入框。掺杂了复杂业务的组件(拥有自身 data、prop 的相关处理)即业务组件应该以 Custom 前缀命名。业务组件在一个页面内比如:某个页面内有一个卡片列表,而样式和逻辑跟业务紧密相关的卡片就是业务组件。
5、id和class的命名原则 应反映该元素的功能或使用通用名称,而不要用抽象的晦涩的命名(原则:见名知其义)
6、命名嵌套问题 书写css要注意先后顺序和嵌套问题,从性能上考虑尽量减少选择器的层级
7、命名中尽量避免使用中文拼音,应该采用更简明有语义的英文单词进行组合

代码格式

1、使用 ES6 风格编码 定义变量使用 let ,定义常量使用 const,静态字符串一律使用单引号或反引号,动态字符串使用反引号
2、如果模块只有一个输出值,就使用 export default,如果模块有多个输出值,就不使用 export default,export default 与普通的 export 不要同时使用
3、指令有缩写一律采用缩写形式
4、v-for 循环必须加上 key 属性,在整个 for 循环中 key 需要唯一,避免 v-if 和 v-for 同时用在一个元素上(性能问题)
5、函数命名
普通函数:首字母小写,驼峰式命名,统一使用动词或者动词+名词形式 例如:fnGetVersion(),fnSubmitForm(),fnInit();涉及返回逻辑值的函数可以使用is,has,contains等表示逻辑的词语代替动词,例如:fnIsObject(),fnHasClass(),fnContainsElment()。
6、内部函数:使用_fn+动词+名词形式,内部函数必需在函数最后定义。
7、对象方法与事件响应函数:对象方法命名使用fn+对象类名+动词+名词形式 例如: fnAddressGetEmail(),
8、事件响应函数:fn+触发事件对象名+事件名或者模块名 例如:fnDivClick(),fnAddressSubmitButtonClick()
9、元素嵌套规范,每个块状元素独立一行,内联元素可选。

关于第六点做示例如下:

function fnGetNumber(nTotal) {
    if (nTotal < 100) {
        nTotal = 100;
    }
    return _fnAdd(nTotal);

    function _fnAdd(nNumber) {
        nNumber++;
        return nNumber;
    }
}
alert(fGetNumber(10)); //alert 101

App端代码规范

uniapp代码规范

一、基本语言和开发规范

uni-app代码编写,基本语言包括js、vue、css。以及ts、scss等css预编译器。命名采用小驼峰命名法
在app端,还支持原生渲染的nvue,以及可以编译为kotlin和swift的uts。
DCloud还提供了使用js编写服务器代码的uniCloud云引擎。所以只需掌握js,你可以开发web、Android、iOS、各家小程序以及服务器等全栈应用。
为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:
页面文件遵循 Vue 单文件组件 (SFC) 规范,即每个页面是一个.vue文件
接口能力(JS API)靠近小程序规范,但需将前缀 wx、my 等替换为 uni。
数据绑定及事件处理同 Vue.js 规范,同时补充了应用生命周期及页面的生命周期
如需兼容app-nvue平台,建议使用flex布局进行开发。

逻辑层和渲染层分离

在web平台,逻辑层(js)和渲染层(html、css),都运行在统一的webview里。
但在小程序和app端,逻辑层和渲染层被分离了。
分离的核心原因是性能。过去很多开发者吐槽基于webview的app性能不佳,很大原因是js运算和界面渲染抢资源导致的卡顿。
不管小程序还是app,逻辑层都独立为了单独的js引擎,渲染层仍然是webview(app上也支持纯原生渲染)。
所以注意小程序和app的逻辑层都不支持浏览器专用的window、dom等API。app只能在渲染层操作window、dom,即renderjs。

三、页面代码规范介绍

uni-app 支持在 template 模板中嵌套 和 ,用来进行 列表渲染 和 条件渲染。
和 并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
在不同的平台表现存在一定差异,推荐统一使用 。
代码示例:

<template>
	<view>
		<template v-if="test">
			<view>test 为 true 时显示</view>
		</template>
		<template v-else>
			<view>test 为 false 时显示</view>
		</template>
	</view>
</template>
<template>
	<view>
		<block v-for="(item,index) in list" :key="index">
			<view>{{item}} - {{index}}</view>
		</block>
	</view>
</template>

static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。
css、less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。
HbuilderX 1.9.0+ 支持在根目录创建 ext.json sitemap.json 文件。

四、JavaScript语法

uni-app的js API由标准ECMAScript的js API 和 uni 扩展 API 这两部分组成,uni-app基于ECMAScript扩展了uni对象,并且API命名与小程序保持兼容。uni-app 在支持绝大部分 ES6 API 的同时,也支持了 ES7 的 await/async。

五、CSS语法

uni-app的css与web的css基本一致,支持通用css单位包括:px(屏幕像素)、rpx(响应式px)。
注意:rpx 是和宽度相关的单位,屏幕越宽,该值实际像素越大。如不想根据屏幕宽度缩放,则应该使用 px 单位;如果开发者在字体或高度中也使用了 rpx ,那么需注意这样的写法意味着随着屏幕变宽,字体会变大、高度会变大。如果你需要固定高度,则应该使用 px 。

后端代码规范

java代码规范

一、命名规范1.包名的命名

包名全部小写,连续的单词直接连接,不出现特殊符号,不使用下划线,包名中不要出现很容易区分供应商的信息
参考示例:
一级包名为com
二级包名为tesla
三级包名为应用名称:如launcher、weather等
四级包名为模块名或层级名:如工具类为util、Activity类为activity
例如:com.tesla.launcher.activity
2.类的命名
采用大驼峰式命名法,每个单词的首字母大写。尽量避免缩写,除非该缩写是众所周知的,比如HTML,URL,如果类名称包含单词缩写,则单词缩写的每个字母均应大写。例外注意命令时,区分各个组件类型。
参考示例:MainMenuActivity、SoftwareUpdateService等
3.方法(函数)命名
使用动词或动名词,采用小驼峰命名法。
参考示例:onCreate();
4.接口命名
命名规则与类一样采用命名规则与类一样采用大驼峰命名法,多以able或ible结尾
参考示例:Runnable
5.变量命名
A.成员变量和临时变量命名:采用小驼峰命名法,第一个单词首字母小写其它单词首字母大写。
参考示例:private String userName;
B.常量命名:常量使用全大写字母加下划线的方式命名,并且用final static修饰。
参考示例:private final static String TAG = “tag”;
C.控件实例命名:采用小写字母加下划线方式命名,类中控件名称必须与xml布局id保持一致。
参考示例:android:id=”@+id/tv_pic_brightness_value”则对应调用的Activity中定义该控件为 private TextView tv_pic_brightness_value;
6。res资源文件命名
A.布局文件命名规范:全部采用小写,采用下划线命名法。其中{module_name}为业务模块或功能模块等模块化的名称或简称。
activity layout:{module_name}activity{名称} 例如:
channel_activity_programedit.xml
fragment layout:{module_name}fragment{名称} 例如:
weather_fragment_cityset.xml
dialog layout:{module_name}dialog{名称} 例如:
channel_dialog_rename.xml
list layout:{module_name}list{名称} 例如:
channel_list_programeedit.xml
adapter layout:{module_name}item{名称} 例如:
channel_item_programedit.xml
widget layout:{module_name}widget{名称} 例如:
weather_widget_todayinfo.xml
B.图片文件命名规范
背景图片:{module_name}_名称_bg.png
图标:{module_name}名称_icon.png
C.字符串和字符串数组命名规范
字符串:str
{module_name}名称
字符串数组:strarr{module_name}名称
其它资源如color、dimens等类似如上命名方式:
如color{module_name}_名称

二、代码编写风格

2.1方法和类的长度
为便于阅读和理解,单个函数的有效代码长度当尽量控制在 100 行以内(不包括注释行),当一个功能模块过大时往往造成阅读困难,因此当使用子函数等将相应功能抽取出来,这也有利于提高代码的重用度。
单个类也不宜过大,当出现此类情况时当将相应功能的代码重构到其他类中,通过组合等方式来调用,建议单个类的长度包括注释行不超过 1500 行。尽量避免使用大类和长方法。
2.2间隔问题
类、方法及功能块间等应以空行相隔,以增加可读性,但不得有无规则的大片空行。
操作符两端应当各空一个字符以增加可读性。相应独立的功能模块之间可使用注释行间隔,并标明相应内容。
2.4 控制语句
判断中如有常量,则应将常量置与判断式的右侧。如:

if ( true == isAdmin())...
if ( null == user)...

尽量不使用三目条件判断。
所有 if 语句必须用{}包括起来,即便是只有一句
2.5 循环调节
循环中必须有终止循环的条件或语句,避免死循环。当在 for 语句的初始化或更新子句中使用逗号时,避免因使用三个以上变量,而导致复杂度提高。若需要,可以在 for 循环之前(为初始化子句)或 for 循环末尾(为更新子句)使用单独的语句。因为循环条件在每次循环中多会执行一次,故尽量避免在其中调用耗时或费资源的操作。
2.6 异常的捕捉和处理
捕捉异常是为了处理它,不要捕捉了却什么都不处理而抛弃,最低限度当向控制台输出当前异常,如果你不想处理它,请将该异常抛给它的调用者,建议对每个捕捉到的异常都调用
printStackTrace()输出异常信息,避免因异常的湮没。多个异常应分别捕捉并处理,避免使用一个单一的 catch 来处理。

三、注释说明

3.1文件注释内容
版权说明、描述信息、生成日期、修改记录、作者、生成日期,格式如下:
/**
Copyright © 2015ktc. All rights reserved.
@Title: LogcatUtil.java
@Description: 调试信息工具文件
@author: shan.zhang
@date: 2015-6-4
@modifier:
@version: V1.0
/
3.2类和接口的注释
类功能描述、作者、生成日期
/*
@ClassName: LogcatUtil
@Description: 用于程序中调试信息输出的工具类
@author: shan.zhang
@date: 2015-6-4
/
3.3方法注释
功能描述、输入参数、返回值
/*
*
@Title: getInstance
@Description: 调试工具类实例获取方法
@return: LogcatUtil
/
public static LogcatUtil getInstance() {
if(null == mLogcatUtil) {
mLogcatUtil = new LogcatUtil();
}
return mLogcatUtil;
}
3.4成员变量、常量注释
对应的功能定义
/*
是否输出打印信息开关
true:输出打印信息
false:不输出打印信息
/
private final static boolean DEBUG_ENABLE = false;
/*
默认输出log信息的Tag标识
*/
private final static String DEBUG_TAG = “k_debug”;

  • 21
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值