Task13

2017-12-29 本文已影响11人 DHFE

说一说你平时写代码遵守的编码规范

上了这节课发现自己的代码习惯也是乱哄哄，这次就当成是“如何养成良好的编码习惯”问题来写吧......

黄金定律

永远遵循同一套编码规范，可以是这里列出的，也可以是你自己总结的。如果你发现本规范中有任何错误，敬请指正。

不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

项目命名

项目名采用小写方式，中横线分隔，禁止驼峰式命名。如：my-project-name

文件命名

文件命名参照上一条规则，多个单词组成时，采用中划线连接方式，比如说: error-report.html
有复数结构时，要采用复数命名法，比如说： scripts, styles, images, data-models
文件名中只可由小写英文字母a~z、排序数字0~9或间隔符-组成，禁止包含特殊符号，比如空格、$等
为更好的表达语义，文件名使用英文名词命名，或英文简写
不允许命名带有广告等英文的单词，例如ad,adv,adver,advertising，防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。（涨见识了）

HTML规范

结构表现分离，保证代码结构清晰
简洁，保证代码的最简化，避免多余空格、空行、保持代码语义化，尽量使用具有语义的元素，避免使用样式属性和行为属性。任何时候都要用简单、少的元素解决问题。

语法

小写，HTML标签、属性全部小写。
嵌套，所有元素必须正确嵌套。
闭合，双标签必须闭合，单标签（自关闭标签）不闭合如 <hr>。
使用四个空格的缩进，这是保证代码在各种环境下显示一致的唯一方式。
属性上使用双引号，不要使用单引号。

注释

编码规范中有一条很重要---见名知意，有时候直白的函数名还不能表达完整的意思，这个时候注释就出场了，代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。
在写代码前就应该添加注释，这时在你的脑子里的是清晰完整的思路。
如果在代码最后再添加注释，它将花费你双倍的时间。

详尽注释。解释代码解决问题、解决思路等。
模块注释。建议不使用模块结束注释。

关于注释，不同语言，功能，业务需求下也不一样，但约定俗成的

边写代码边注释，修改代码同时修改相应的注释，以保证注释与代码的一致性。不再有用的注释要删除。
注释的内容要清楚、明了，含义准确，防止注释二义性。
避免在注释中使用缩写，特别是非常规缩写。

编程注释规范

HTML声明

在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式，使其每个浏览器中尽可能一致的展现。
虽然doctype不区分大小写，但是按照惯例，doctype大写

<!DOCTYPE html>

文档类型使用html5标准文档类型，文档类型声明之前，不允许出现任何非空字符。不允许添加<meta>强制改变文档模式。
.html元素上指定lang属性。显示页面语言，有助于语言合成工具来确定怎样发音，以及翻译工具决定使用的规则，等等。
指定明确的字符编码。让浏览器轻松、快速的确定适合网页内容的渲染方式。

字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样

做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与
文档编码一致（一般采用 UTF-8 编码）。

<meta charset="UTF-8">

引入 CSS 和 JavaScript

根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。

PS：又涨知识......

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
    /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

属性

HTML 属性应该按照特定的顺序出现以保证易读性。

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class 是为高可复用组件设计的，理论上他们应处在第一位。id 更加具体而且应该尽量少使用（例如, 页内书签），所以他们处在第二位。

省略url类属性资源协议头。
属性顺序。html属性应该按照特定的顺序出现以保证易读性。
多媒体元素添加替代属性。图像增加alt属性，音视频增加替代文字。

Boolean 属性

Boolean 属性指不需要声明取值的属性。XHTML 需要每个属性声明取值，但是 HTML5 并不需要。
一个元素中 Boolean 属性的存在表示取值 true，不存在则表示取值 false。
简而言之，不要为 Boolean 属性添加取值。

<input type="text" disabled>

JavaScript 生成标签

在 JavaScript 文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

元素

使label标签包裹radio或checkbox和他们的文字，不用再使用for属性。
form button应制定type类型，使用type="submit"、type="reset"或type="button"

CSS规范

使用四个空格的缩进，这是保证代码在各种环境下显示一致的唯一方式。
使用组合选择器时，保持每个独立的选择器占用一行。
为了代码的易读性，在每个声明的左括号前增加一个空格。
声明块的右括号应该另起一行。

ul {
    XXX
};

所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出错。
逗号分隔的取值，都应该在逗号之后增加一个空格。
rgba(0, 0, 0, 0.5);
不要在颜色值 rgb() rgba() hsl() hsla()和 rect() 中增加空格，并且不要带有取值前面不必要的 0 (比如，使用 .5 替代 0.5)。
所有的十六进制值都应该使用小写字母，例如 #fff。因为小写字母有更多样的外形，在浏览文档时，他们能够更轻松的被区分开来。
尽可能使用短的十六进制数值，例如使用 #fff替代 #ffffff。
不要为 0 指明单位，比如使用 margin: 0; 而不是 margin: 0px;

参考

全局：global.css
全局样式为全站公用，为页面样式基础，页面中必须包含。

结构：global.css
页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。

私有：style.css
独立页面所使用的样式文件，页面中必须包含。

模块：style.css
产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。

主题：themes.css
实现换肤功能时应用。

补丁 mend.css 基于以上样式进行的私有化修补。

CSS命名规范
头：header
内容：content/containe
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

class命名

颜色：使用颜色的名称或者16进制代码,如

.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

字体大小,直接使用”font+字体大小”作为名称,如

.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

对齐样式,使用对齐目标的英文名称,如

.left { float:left; }
.bottom { float:bottom; }

标题栏样式,使用”类别+功能”的方式命名,如

.barnews { }
.barproduct { }

语义化标签优先

基于功能命名、基于内容命名、基于表现命名

简略、明了、无后患

范例

<!-- 不好  -->
<div class="article">
  <div class="article_title"></div>
  <div class="the_content">
     <div class="darkbold"></div></div>
</div>

<!-- 好 -->
<article>
  <h1></h1>
  <p><b></b></p>
</article>

<!-- 好 -->
<article class="movies">...</article>
<article class="news">...</article>
<!-- 不好 -->
<article class="blue">...</article>
<article class="redBg mt30 bigText">...</article>

JavaScript

使用驼峰标记法
首字母是小写的，接下来的字母都以大写字符开头。如：

var testValue = 0, secondValue = "hi";

不要使用 switch，switch 在所有的编程语言中都是个非常错误的难以控制的语句，建议用 if else 来替换它。
操作符（+，-，*，/，%）前后请加空格，如

return x + y;

缩进，使用两个空格来代替tab
字符串
统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：

学习JS后继续补充。

Elvin Web前端代码规范

白小明 Web前端代码规范

垂直居中有几种实现方式？给出代码范例

动态高度垂直居中

通过设置上下padding，将内容“挤”入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .ct {
            background-color: #eee;
            text-align: center;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div class="ct">
        <p>2017年12月30日 12:42:31</p>
        <p>2017年12月30日 12:42:34</p>
        <p>2017年12月30日 12:43:47</p>
        <p>2017年12月30日 12:43:50</p>
        <p>2017年12月30日 12:43:55</p>
        <p>2017年12月30日 12:44:01</p>
    </div>
</body>
</html>

现在向容器内添加文字，都将是垂直居中的。

绝对定位居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        html,body {
            height: 100%;
        }
        .ct {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -150px;
            width: 400px;       
            height: 300px;
            box-shadow: 0px 0px 3px #000;
        }
        .ct .header {
            padding: 10px;
            background: #000;
            color: #fff;
        }
        .ct .content {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="ct">
        <div class="header">我是标题</div>
        <div class="content">我是内容</div>
    </div>
</body>
</html>

vertical-align实现居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .ct {
                width: 300px;
                height: 200px;
                border: 1px solid;
                text-align: center;
            }
            .ct:before {
                content: "";
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
            .ct img {
                vertical-align: middle;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="ct">
            <img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
        </div>
    </body>
</html>

在img元素前加上一个content，使其inline-block，设置高度100%，俩元素一起vertical-align。

table-cell实现居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .ct {
                width: 300px;
                height: 200px;
                border: solid 1px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="ct">
            <img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
        </div>
    </body>
</html>