【泽楠云】整理一份适合自己的web前端代码规范入门

介绍

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

图片[1]-【泽楠云】整理一份适合自己的web前端代码规范入门-泽楠云资源博客

抖音刷到过一条视频,里面说到雷总的代码和诗一样优美;本周想重构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 / overflow

2.自身属性:width / height / margin / padding / border / background

3.文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word

4.其他属性(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且保证图片大小合理以及清晰

其他

好了,今天就到这里啦,如果你觉得有用,给泽楠云一个评论,或者一个赞哦,感谢大家的支持!!!

© 版权声明
THE END
喜欢就支持一下吧
点赞14赞赏 分享
评论 共2条

请登录后发表评论

    • 头像ddd0