------正文内容展示，开始汲取新知识啦------

介绍

想念是一种很廉价的感情相隔几百几千几万里路的关心永远比不上同撑一把伞同行一段路

抖音刷到过一条视频，里面说到雷总的代码和诗一样优美；本周想重构Banner插画网，在阅读凹凸实验室，TX前端代码规范之后，知新博客总结一份贴合自己的前端代码规范

HTML

HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：语言，编码在工具默认新建Html5的时候已经自带了，基本不用我们在去设置

<!DOCTYPE html><html lang="zh-CN"><meta charset="UTF-8">

标签

双标签有开头结尾的以/结尾，在凹凸实验室中提到单个标签则不用/结尾。例如br

<div></div><br>

注释

单独部分注释和之前保持一致，在说明前后各加一个空格

<!-- 焦点标题 --> <div class="titel_vi"> ...... </div>

如果使用一个模块或者使用循环的地方则添加S开头，E结尾标志

<!-- S 文章列表 --> <div class="list-vi"> ...... </div> <!-- E 文章列表 -->

模块代码很长，其中有特殊模块需要在注释的时候使用/开头说明

<!-- / 文章列表图片 -->

CssName

在之前的项目中所有的标签都是使用横线，文档规范中建议使用下划线取代

<!-- 之前 -->  <img src=""  class="fengrui-img">  <!-- 现在 -->  <img src="" class="fengrui_img" >

模块

例如星宿UI中的公告属于一个模块，都是以模块匿名开头（notice），随后使用基于姓氏命名法，若子孙过长采用缩写方式

<!-- 首页公告 --><view class="notice-flex">   <view class="notice-img">       <image class="fengrui-img" src="../../static/index/notice.png" mode=""></image>    </view></view>

全局/公共模块

除了特殊词汇外，保持之前的方式将以fengrui名称开头

<img src=""  class="fengrui-img">

样式

样式全部以展开格式，且属性前面，花括号后面各添加一个空格

.fengrui_btn {    display: block;    width: 50px;}

包括但除了带括号中的不用空格。例如颜色值

.fengrui_btn {    color: rgba(255,255,255,.5);}

不给0值添加任何单位

.sw_border {    border-radius:0 10px;}

样式注释

单个注释采用，文字前后个添加空格

/* 推荐 */

模块注释

注释内容第一个字符和最后一个字符都是一个空格字符，/* 与模块信息描述占一行，多个横线分隔符-与*/占一行

/* Module A---------------------------------------------------------------- */.mod_a {}

属性书写顺序

1.布局定位属性：display / position / float / clear / visibility / overflow2.自身属性：width / height / margin / padding / border / background3.文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word4.其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

JavaScript

若能使用ES6语法全采用ES6箭头函数，花括号中前面需添加空格

function foo () { return true }if (foo) { bar = 0 }

对象字面量的键和值之间不能存在空格，且要求对象字面量的冒号和值之间存在一个空格

const obj = { 'foo': 'haha' }

函数名

函数名采用驼峰命名，尽量不适用下划线

function fengRui() { ... }

点击事件

基于小程序上点击事件，保持之前风格函数名+Tap，其中函数名使用模块名称

@tap="listTap()"

Img

保持之前小程序开发风格，建立相对于的页面名称存储改页面下所用到图片，图片命名采用模块或者局部名称开头，下划线，图片内容词汇组成

图片格式

条件允许下采用SVG格式，其他不同和情况采用JPG，PNG且保证图片大小合理以及清晰

其他

好了，今天就到这里啦，如果你觉得有用，给知新社区一个评论，或者一个赞哦，感谢大家的支持！！！

温馨提示：本文最后更新于2023-06-23 00:33:39，某些文章具有时效性，若有错误或已失效，请私信客服或联系知新社长。

------本文内容已结束，喜欢请分享------

感谢您的访问，Ctrl+D收藏本站吧。

相关声明 1、本站名称：知新网
2、本站永久网址：https://www.uzhix.com
3、本站部分内容源于网络和用户投稿，仅供学习与参考，如有侵权，请联系站长进行删除处理。
4、用户评论和发布内容，并不代表本站赞同其观点和对其真实性负责。
5、本站禁止以任何方式发布或转载任何违法的相关信息。
6、资源大多存储在云盘，如发现链接失效，请联系我们替换更新。

六月 23