web前端规范学习心得

本文分享了关于前端开发的规范学习心得,包括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、fortypehref
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); 

避免额外的逗号。
使用严格的条件判断符。
尽量避免使用存在兼容性及消耗资源的方法或属性。
注重HTML分离, 减小reflow, 注重性能。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值