web前端规范学习心得
前端规范学习心得
命名规则
- 文件名用英文单词，多个单词用驼峰命名法。
- 文件名、ID、CLASS等所有命名避免以下词汇。
'ad' 'ads' 'adv''banner''sponsor' 'gg' 'guangg' 'guanggao'等html书写规范
标准模式声明、文档类型声明，编码统一为UTF-8.
<meta charset="utf-8">HTML属性应当按照一下给出的顺序依次排列，来确保代码的易读性。
class
id、name
data-*
src、for、type、href
aria-*、role当JavaScript获取单个元素时，通常使用document.getElementById来获取dom元素，document.getElementById兼容所有浏览器，但IE浏览器会混淆元素的ID和NAME属性，所以要区分ID和NAME命名。
<input type="text" name="one">
<div id="one">div>
<button onclick="alert(document.getElementById('test').tagName)">button>多用无兼容性问题的HTML内置标签
比如SPAN、EM、STRONG、OPTGROUP、LABLE等，需要自定义的HTML标签属性时，首先考虑是否存在已有的合适标签可替换，如果没有可使用以“data-”为前缀来添加自定义属性，避免使用其他命名方式。
- 语义化HTML。 - 尽可能减少<DIV>嵌套。 - 书写链接地址时避免重定向。CSS书写规范
为通过W3C的验证，可将代码分为两个文件，将符合W3C的代码写到一个文件，而一些IE中必须又不能通过W3C验证的代码放到另一个文件中，在用下面方法导入。
"stylesheet" type="text/css" href=" ">css属性显示顺序。
- 显示属性
- 元素位置
- 元素属性
- 元素内容属性
使用选择器时，命名比较短的词汇或者缩写的不允许直接定义样式。
.hd，.bd，.td{};浏览器将检查整个文档中的所有链接和每个链接的父元素，并遍历文档树去查找ID为header的祖先元素，如果找不到header将追溯到文档的根节点，解决方法如下：
- 避免使用通配规则和相邻兄弟选择器、子选择符、后代选择符、属性选择符等选择器
- 不要限定id选择器，如div#header(提权的除外)
- 不要限定类选择器，如ul.recommend（提权的除外）
- 不要使用 ul li a 这样长的选择符
- 避免使用标签子选择符，如#header > li > a
JavaScript书写 规范
代码格式：
- “()” ，“=”前端需要跟空格
- “，”后面需要跟空格
- JSON对象需格式化对象参数
- if、while、for、do语句的执行体用”{}”括起来
字符串拼接应使用数组保存字符串片段，使用时调用join方法。避免使用+或+=的方式拼接较长的字符串，每个字符串都会使用一个小的内存片段，过多的内存片段会影响性能。
var str=[],
list=['测试A','测试B'];
for (var i=0 , len=list.length; i < len; i++) { str.push( ''+ list[i] + ''); };
console.log(str.join(''));
var str = '',
list=['测试A','测试B'];
for (var i = 0, len = list.length; i< len; i++) { str+='' + list[i] + ''; };
console.log(str); 避免额外的逗号。
使用严格的条件判断符。
尽量避免使用存在兼容性及消耗资源的方法或属性。
注重HTML分离, 减小reflow, 注重性能。