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