项目代码规范

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";