web前端规范学习心得

最新推荐文章于 2022-09-04 21:51:10 发布

原创最新推荐文章于 2022-09-04 21:51:10 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript #规范

前端专栏收录该内容

8 篇文章

订阅专栏

本文分享了关于前端开发的规范学习心得，包括HTML、CSS和JavaScript的书写规范。强调了命名规则的重要性，如区分ID和NAME，使用无兼容问题的HTML标签，遵循CSS属性顺序，避免特定选择器的使用，以及在JavaScript中优化代码格式和性能，如字符串拼接和条件判断的优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端规范学习心得

命名规则

 - 文件名用英文单词，多个单词用驼峰命名法。
 - 文件名、ID、CLASS等所有命名避免以下词汇。
 'ad' 'ads' 'adv''banner''sponsor' 'gg' 'guangg' 'guanggao'等

html书写规范

标准模式声明、文档类型声明，编码统一为UTF-8.

<!DOCTYPE html>
<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验证的代码放到另一个文件中，在用下面方法导入。

<link rel="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( '<div>'+ list[i] + '</div>');
};
console.log(str.join(''));
var str = '',
    list=['测试A','测试B'];
for (var i = 0, len = list.length; i< len; i++) {
    str+='<div>' + list[i] + '</div>';
};
console.log(str);