首页  思维导图  详情

前端标准

2018-05-24 21:26:31   0  举报





仅支持查看

AI智能生成

前端标准

web

作者其他创作

大纲/内容

语法标准(通过书籍获取对应的标准)

语言自身标准

html标准（如w3c 标签闭合等）

css标准（如使用块级元素不使用float 定位元素不使用float）

javascript语法标准遵循es3 es6 标准书写js代码

书写标准

html

嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号

结构嵌套简单明了

属性

自定义属性

使用data-*

属性顺序

class
id, name
data-*
src, for, type, href, value
title, alt

符号

属性值全部使用双引号

css

用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
为选择器分组时，将单独的选择器单独放在一行。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 : 后应该插入一个空格。
为了获得更准确的错误报告，每条声明都应该独占一行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

class 命名

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-red）。

避免过度任意的简写。.btn 代表 button，但是 .a 不能表达任何意思

避免使用属性选择器（例如，[class^="type"]）。浏览器的性能会受到这些因素的影响。

javascript

空格

二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格
代码块起始的左花括号前需要添加一个空格
关键字后面需要有一个空格
在对象创建时，属性中的 : 之后必须有空格，: 之前不允许有空格

命名

变量名称函数名称对象名称数据类型存储定义的变量使用驼峰命名法 goPay

常量命名使用大写加下划线命名 PAY_SUCCESS(部分？)

循环

不要在循环体中包含函数表达式，事先将函数提取到循环体外
对循环内多次使用的不变值，在循环外用变量缓存
对有序集合进行遍历时，缓存 length