写出诗一样的代码

最新推荐文章于 2023-03-09 13:16:29 发布

wangjie962311

最新推荐文章于 2023-03-09 13:16:29 发布

阅读量582

点赞数

分类专栏： html5 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wangjie962311/article/details/125801563

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML 规范

基础规范

1.HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：

<!DOCTYPE html>

2.推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值

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

3.为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：

所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。
空元素标签都不加 “/” 字符

html注释

1.单行注释
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
推荐

<!-- Comment Text -->
<div>...</div>

不推荐

<div>...</div><!-- Comment Text -->	
	
<div><!-- Comment Text -->
    ...
</div>

2.模块注释
一般用于描述模块的名称以及模块开始与结束的位置

<!-- S Comment Text A -->	
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->

模板

基础模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5标准模版</title>
</head>
<body>
	
</body>
</html>

移动端

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" >
<meta name="format-detection" content="telephone=no" >
<title>移动端HTML模版</title>
	
<!-- S DNS预解析 -->
<link rel="dns-prefetch" href="">
<!-- E DNS预解析 --> 

<!-- S 线上样式页面片，开发请直接取消注释引用 -->
<!-- #include virtual="" -->
<!-- E 线上样式页面片 -->

<!-- S 本地调试，根据开发模式选择调试方式，请开发删除 --> 
<link rel="stylesheet" href="css/index.css" >
<!-- /本地调试方式 -->

<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /开发机调试方式 -->
<!-- E 本地调试 -->

</head>
<body>

</body>
</html>

pc模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="ie-stand">
<title>PC端HTML模版</title>

<!-- S DNS预解析 --> 
<link rel="dns-prefetch" href="">
<!-- E DNS预解析 --> 

<!-- S 线上样式页面片，开发请直接取消注释引用 -->
<!-- #include virtual="" -->
<!-- E 线上样式页面片 -->

<!-- S 本地调试，根据开发模式选择调试方式，请开发删除 --> 
<link rel="stylesheet" href="css/index.css" >
<!-- /本地调试方式 -->

<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /开发机调试方式 -->
<!-- E 本地调试 -->

</head>
<body>

</body>
</html>

CSS 规范

基础规范

1.代码风格
样式书写一般有两种：一种是紧凑格式

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

一种是展开格式

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

2.代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

/* 推荐 */
.jdc{
	display:block;
}
	
/* 不推荐 */
.JDC{
	DISPLAY:BLOCK;
}

3.代码缩进
统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

.jdc {
    width: 100%;
    height: 100%;
}

4.代码易读性

/* 推荐 */
.jdc {
    color: rgba(255,255,255,.5);
}
	
/* 不推荐 */
.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}
/* 推荐 */
.jdc {
    margin: 0 10px;
}
/* 不推荐 */
.jdc {
    margin: 0px 10px;
}
/* 推荐 */
.jdc { 
	font-family: 'Hiragino Sans GB';
}

/* 不推荐 */
.jdc { 
	font-family: "Hiragino Sans GB";
}

scss使用

1.嵌套

.jdc {
    .abc {}
}

2.属性嵌套

.jdc {
    background: {
        color: red;
        repeat: no-repeat;
        image: url(/img/icon.png);
        position: 0 0;
    }
}

3.变量—可复用属性尽量抽离为页面变量，易于统一维护

$color: red;
.jdc {
    color: $color;
    border-color: $color;
}

4.混合(mixin)

@mixin radius($radius:5px) {
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
.jdc_1 {
    @include radius; //参数使用默认值
}

还有extend继承，for 循环，each 循环，function 函数等使用，大大减少重复代码。

代码注释

1.单行注释

/* Comment Text */
.jdc{}

2.模块注释

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

3.文本信息注释

@charset "UTF-8";
/**
 * @一段css说明
 * @wangjie
 * @date 20202-7-15
 */

JS 规范

基础规范

1.变量命名
当命名变量时，主流分为驼峰式命名（constiableName）和下划线命名（constiable_name）两大阵营。

建议在各团队中统一

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

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

代码注释

1.单行注释

// 一段js
function func (x) {}

2.模块注释

/* 一段js
---------------------------------------------------------------- */
function func (x) {}

3.文本注释

/**
 * @一段js说明
 * @wangjie
 * @date 20202-7-15
 */

命名规范

1.目录命名

项目文件夹：zt-szhxgs-web/zt-xx-xx-web/zt-xx-xx-mobile-web
样式文件夹：css
脚本文件夹：js
样式类图片文件夹：img

2.HTML/CSS文件命名
确保文件命名总是以字母开头而不是数字，且字母一律小写，以下划线连接且不带其他标点符号

<!-- HTML -->
jdc.html
jdc_list.html
jdc_detail.html

<!-- SCSS -->
jdc.scss
jdc_list.scss
jdc_detail.scss

3.ClassName命名
ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接

在子孙模块数量可预测的情况下，严格继承祖先模块的命名前缀

<div class="modulename">
   <div class="modulename_cover"></div>
   <div class="modulename_info"></div>
</div>

全站公共模块：以 mod_ 开头;业务公共模块：以业务名_mod_ 开头

<div class="mod_yours"></div>

<div class="zt_mod_yours"></div>

图片规范

常见的图片格式有 GIF、PNG8、PNG24、JPEG、WEBP，根据图片格式的特性和场景需要选取适合的图片格式。

CSS Sprites 使用
减少请求数
加速图片的显示
维护更新成本大
更多的内存消耗，特别是大体积或有过多空白的 Sprites 图
图片渗漏，相邻的不需展示的图片有可能出现在展示元素中，特别是在高清设备移动设备上
css url引入
减少请求数
转换文件体积大，大约比原始的二进制大33%
图片显示相对较慢，需要更多的CPU消耗

vue项目规范

单模块vue项目

VueProject
├── public ------------------ vue 入口文件夹
├    ├── static -------- 静态资源（图片、字体等大型静态文件）
├── dist ------------------ 打包文件（build之后）
├── node-modules ----------- 依赖包
├── src -------------------- 项目核心文件
├    ├── api -------- 请求
├    ├── assets ------------ 静态资源
├        ├── img ---------- 图片等其他资源
├    ├── config -------- 公共配置
├    ├── components -------- 公共组件
├    ├── router ------------ 路由
├    ├── views------------ 业务功能
├    ├── mixin/global------------ 其他公共
├    ├── style ------------ 样式
├    ├── utils ------------ 公共方法
├    ├── vuex ------------- 应用级数据（Vuex）
├    ├── App.vue ----------- 根组件
├    ├── main.js ----------- 入口文件
├── .gitignore ------------- git上传需要忽略的文件配置
├── .postessre.js ---------- 转换css的工具
├── package.json ----------- 项目基本信息
├── vue.config.js ----------- vue 打包配置文件
├── README.md -------------- 项目说明

多模块项目

多模块vue项目开发链接

wangjie962311

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
写出诗一样的代码

2.推荐使用属性值cmn-Hans-CN（简体,中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用zh-CN属性值。ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线“_”连接。还有extend继承，for循环，each循环，function函数等使用，大大减少重复代码。样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行。...
复制链接

扫一扫

专栏目录