前端uniapp代码规范

前端uniapp代码规范

唯一定律：

无论有多少人共同参与同一项目，一定要确保每一行代码都像是唯一个人编写的。页面写完一定要格式化代码一下，HBuilderX格式化代码快捷键：Ctrl+k。删除打印！删除打印！删除打印！保持代码简洁！！！
修改代码的时候分清楚不要的和暂时不要的，把不需要的删掉，包括view，js，css和注释

一、视图规范

1、（id / class 命名规则）

1. 首先根据内容命名，例如header content footer
   
2. 若根据内容无法找到合适的命名，结合行为表现进行辅助, 例如 col-main blue-box
3. 名字一律小写,多个单词用 - 连接,不能使用下划线、 驼峰命名法、与text、imag等标签相同的单词命名，可基于最近的父元素名称作为前缀，例如 main-title、main-text
4. 在不影响语义的情况下,可适当使用缩写,但是缩写只用来表示结构，例如col nav btn , 别自编
5. 避免广告拦截词汇 例如ad ads advbanner sponsor ggguangg guanggao
   （广告拦截词汇：是指通过软件或浏览器插件阻止网页上显示广告的行为。广告拦截工具能够识别网页上的广告元素，并将其从页面中移除，使用户在浏览网页时不受到广告的干扰。）
   2、语法：
6. 嵌套元素应当缩进一次，即两个空格（HbuilderX四个空格）
7. 对于属性的定义，确保全部使用双引号，绝不要使用单引号（类似于class，id，style，v-if，v-show，@click…）
8. 不要在自闭合（self-closing）元素的尾部添加斜线（可加可不加），例如
9. 不要省略可选的结束标签（closing tag）（例如
10. ，…）
    （注：不要出现单独的标签，例如只有头或者只有尾；删除的时候头尾相对删干净）
11. @click点击事件方法必须加（），例如@click=“preview()”
12. Uview组件库里有的icon就不要用图片
13. View视图中出现的多个条件判断可以提出来写在computed中，结果return即可使用
    
14. View中image标签图片设置宽高，最好不要用widthfix等自适应高度，第一次加载时图片会被拉伸，视觉效果不好
15. v-for必须和key配对写，不能把key漏掉
    3、属性顺序：
    在UniApp中，属性的顺序通常可以按照以下规则组织，以提高可读性和一致性。
16. 核心属性：例如id、name、class、style等，应该放在最前面。( class是为高可复用组件设计的,所以应处在第一位，id、nameid更加具体且应该尽量少使用,所以将它放在第二位)
17. Vue指令：如果使用Vue指令，例如v-for、v-if等，应该放在核心属性之后
18. 事件属性：事件属性（例如@click、@change等）应该放在Vue指令之后
19. 其他属性：其它特定于UniApp的属性，以及自定义属性等，（例如value，src，title，placeholder，disabled，readonly）应该放在事件属性之后
20. 插槽（Slot）：如果组件包含插槽，插槽的内容应该在元素的最后
    （注：布尔型属性可以在声明时不赋值（例如input disable），行内样式style尽量不使用）
    4、减少标签的数量：
    编写代码时，尽量避免多余的父元素。减少标签数量并不是绝对的要求，而是一种优化策略。
21. 减少标签数量对前端开发有几个重要的优点：
22. 性能优化：每个标签都需要浏览器解析和渲染，减少标签数量可以减少页面的加载时间和渲染时间。特别是在移动设备上，性能优化尤为重要，因为移动设备的硬件资源相对较小。
23. 提高页面加载速度：减少标签数量可以减小前端文档的体积，从而提高页面的加载速度。较小的前端文件可以更快地从服务器传输到客户端，并且更快地被浏览器解析。
24. 改善用户体验：用户通常更喜欢加载速度快、响应迅速的网站。通过减少标签数量，页面加载速度更快，用户能够更快地看到网页内容，提高了用户的满意度。
25. 方便维护和阅读：在开发过程中，较少的标签数量意味着更简洁的前端页面结构，更容易维护和阅读。代码的可读性提高，对于开发团队来说更易于理解和维护。
26. SEO优化：搜索引擎通常更喜欢加载速度快、结构简单的网页。通过减少标签数量，网页可能更容易被搜索引擎爬取和索引，提高了网站的SEO优化。
27. 提高可访问性：简洁的前端页面结构通常更容易被屏幕阅读器等辅助技术解析，提高了网站的可访问性，使得更多的用户能够方便地访问网站。
    （注：SEO（Search Engine Optimization，搜索引擎优化）是指通过改善网站的结构、内容和链接等因素，以提高网站在搜索引擎中的可见性和排名，从而吸引更多的有针对性的访问者的过程。SEO旨在使网站在用户使用搜索引擎（如Google、Bing、百度等）进行相关查询时，能够出现在搜索结果的较前位置，提高网站的曝光度和点击率。）
    5、注释规范：
    
    6、页面编写顺序：
    从上到下；从左到右；从外到里
    第一、不能出现里面的元素高于或者宽于外层的view；
    
    
    第二、列表下的查看详情，没有左侧语音条时能用css写就不要添加空的，虽然不会对页面性能产生显著影响，但如果在CSS中为这些空标签添加了样式，也会增加页面的渲染时间。虽然单个空标签的影响微乎其微，但在大量重复的情况下，这些小的性能开销可能会叠加，从而影响整体性能
    

二、样式语言规范

css、scss、less都是样式表语言，用于描述网页中的样式和布局。编写页面时一般使用的是scss。
在 UniApp 中，通过 scoped 属性声明的样式是有作用域的，只会作用于当前组件。
Class套起来，方便页面部分修改
1、属性顺序

1. 位置属性：
   position: 定位方式（如relative, absolute, fixed）
   top, right, bottom, left: 定位距离父元素的距离
   z-index: 层叠顺序
   display: 元素的显示方式（block, inline, flex等）
2. 大小属性：
   width: 宽度；height: 高度；padding: 内边距；margin: 外边距
   （注：尽量不要用宽度和高度设置，用padding撑起来，也可用宽度和高度设置，同时需要设置box-sizing：border-box，padding和border的值就不会在影响元素的宽高）
3. 文字系列属性：
   font: 字体样式（包括字体大小、字体类型等）
   line-height: 行高
   letter-spacing: 字母间距
   color: 文字颜色
   text-align: 文本对齐方式
4. 背景属性和边框属性：
   background: 背景样式（包括颜色、图片等）
   border: 边框样式（包括边框宽度、边框样式、边框颜色等）
   background-image: 背景图片
   background-repeat：背景图片展示样式
   background-size: 背景图片大小
   background-position：背景图片位置显示
5. 其他属性（动画和过渡等）：
   animation: 动画效果
   transition: 过渡效果
   2、属性使用缩写
6. 尽量使用简写 例如：padding margin font background border border-radius
7. 颜色代码尽量也简写 例如：白色 #fff
   3、去掉小数点前面的 0
   例如：0.9 => .9
   4、css的属性穿透如何使用
   CSS属性穿透（CSS Property Penetration）是一种允许你在子组件中修改父组件的样式的技术。通常情况下，子组件的样式只会影响子组件本身，而不会影响到父组件。但有时候你可能希望通过子组件的样式来影响到父组件的样式，这就是CSS属性穿透的用途。
   CSS属性穿透使用>>>或/deep/选择器来实现。
   
   
   .parent-class是父组件中的类名，而.child-class是子组件中的类名。通过使用>>>或/deep/选择器，你可以让子组件的样式穿透到父组件，实现对父组件样式的修改。
   注意：CSS属性穿透的使用可能会导致样式的耦合性增加，因此在使用时要谨慎考虑，确保不会产生意外的影响。此外，/deep/选择器在一些 CSS 预处理器中可能不被支持，你可能需要使用>>>选择器来代替。

三、JS规范

1、语言规范

1. 声明变量必须加上 let关键字.不要再使用 var
2. 优先使用箭头函数
3. props接收父组件传来的值必须写类型和默认值，尽量不要随意更改变量字段，如果要修改，注意把父组件、子组件的都修改掉；并且不要修改props接收的值，如果要修改，定义一个变量再去修改变量，不能直接修改props接收的值
4. 多个文件内使用到的变量放在store中，例如：loading
   2、使用分号
   如果仅依靠语句间的隐式分隔,有时会很麻烦,使用分号更能清楚哪里是语句的起止,而且有些情况下,漏掉分号会出 BUG
   3、关于循环
5. forEach 是用来循环数组的
6. forEach 不支持 break continue
7. forEach 过程中 arr.push() arr.pop() arr.shift() arr.unshift() arr.reverse() arr.sort() arr.concat() 都可以使用,但是arr.push() 不会改变输出顺序.
8. map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
9. for-in 循环实际是为循环 enumerable2 对象而设计的
10. for–in 是用来循环带有字符串 key 的对象的方法
    4、回调函数规范
11. 回调函数统一使用 Promise 函数,回调成功的参数统一为 res,错误参数为 err
12. 私有函数以及回调函数统一放置在生命周期函数后,每个函数之间用一个空行分离结构,删除 js 文件中未用到的生命周期函数,保持代码的整洁,精简
    5、注释规范
13. 单行注释Ctrl + /，在HBuilderX一般用在js中（需要注释定义的变量、注释函数/方法用到的参数从哪来，需要实现啥样的功能）；
14. 多行注释Ctrl + Shift + /，在HBuilderX一般用在view视图中，叶也用在页面最开始，展示页面信息
    
    （用在一个文件的开头写清页面的信息作用，可自定义设置，后续添加的功能手动添加，实现谁的问题谁改，不懂的地方便于问到个人）
15. 文档注释输入/**然后按回车键，一般前端不用
16. 注释位置，data变量的注释在定义的变量后面添加注释，其余地方的注释放在上方
    data中变量的的注释信息在后方
    
    函数的注释信息在上方
    

四、命名规范

1. 变量名: 必须使用 小写字母+下划线
   

2. 参数名: 必须使用 小写字母+下划线
   

3. 函数名: 必须使用 小驼峰命名法
   

4. 方法/属性: 必须使用 小驼峰命名法
   

5. 常量名: 必须使用全部大写的下划线命名法，例如 XTEP_HOST_API

6. 枚举名: 必须使用 大驼峰命名法
   

7. 枚举的属性: 必须使用全部大写的下划线命名法，例如XTEP_HOST_API
   

8. 接口命名：必须使用 大驼峰命名法
   

五、文件夹命名规范

1. api目录下文件夹命名
   所有文件夹名称与views对应且使用小写
2. components目录下文件夹命名
   必须使用 大驼峰命名法
3. views目录下文件命名
   必须使用 大驼峰命名法，除了页面入口文件，其余模块放在modules文件夹下，例如
   

六、接口规范

1、接口需要什么参数传什么参数
2、接口按模块写
开始：// 农事记录模块---------------------------------

结束：// ---------------------------------农事记录模块

七、生命周期

uniapp中有应用生命周期、页面生命周期、组件生命周期（同vue标准组件的生命周期相同），页面编写时按照图片上显示的生命周期顺序写
1、应用生命周期

注意：应用生命周期仅可在App.vue中监听，在其它页面监听无效。
2、页面生命周期

3、组件生命周期

注意：组件生命周期中没有onLoad()和onShow()

八、其他

1、时间戳长度（10位秒级时间戳）
将获取到的毫秒级时间戳转换为秒级时间戳。这样可以确保时间戳的长度为10位数，即使在不同的编程语言或平台上也是一致的。

const timestampInSeconds = Math.floor(Date.now() / 1000); // 获取当前时间的秒级时间戳
console.log(timestampInSeconds); // 输出秒级时间戳，长度为10位

2、临时图片
编写页面时用的临时图片单独创建一个图片文件夹，接口对接完成后，删除图片，文件夹不删除
（注：只适用于接口返回图片的情况）