介绍
想念是一种很廉价的感情 相隔几百几千几万里路的关心 永远比不上同撑一把伞 同行一段路
抖音刷到过一条视频，里面说到雷总的代码和诗一样优美；本周想重构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且保证图片大小合理以及清晰
其他
好了，今天就到这里啦，如果你觉得有用，给知新社区一个评论，或者一个赞哦，感谢大家的支持！！！
暂无评论内容