前端代码规范点整理








































































类型 前端代码规范点
项目

在 web项目中,所有的文件名应该都遵循同一命名约定。以可读性而言,减号(-)是用来分隔文件名的不二之选,同时它也是常见的 URL 分隔符;文件命名总是以字母开头而不是数字。

资源的字母名称必须全为小写,这是因为在某些对大小写字母敏感的操作系统中,当文件通过工具压缩混淆后,或者人为修改过后,大小写不同而导致引用文件不同的错误,很难被发现。

还有一些情况下,需要对文件增加前后缀或特定的扩展名(比如 .min.js, .min.css)。这种情况下,建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。

 













不推荐:

推荐:

首页.js

MyScript.js

myCamelCaseName.css

i_love_underscores.html

1001-scripts.js

my-file-min.css

index.js

my-script.js

my-camel-case-name.css

i-love-underscores.html

thousand-and-one-scripts.js

my-file.min.css

项目 不要指定引入资源所带的具体协议

当引入图片或其他媒体文件,还有样式和脚本时,URLs 所指向的具体路径,不要指定协议部分(http:https:),除非这两者协议都不可用。

不指定协议使得 URL 从绝对的获取路径转变为相对的,在请求资源协议无法确定时非常好用,而且还能为文件大小节省几个字节。

 













不推荐:

推荐:

<script src=”http://cdn.com/a.min.js”></script>

background:url(http://static.example.com/a.jpg);

<script src=”//cdn.com/a.min.js”></script>

background:url(//static.example.com/a.jpg);

项目 文本一次缩进两个空格
html

对页面上的媒体而言,像图片、视频、canvas 动画等,要确保其有可替代的接入接口。图片文件我们可采用有意义的备选文本(alt),视频和音频文件我们可以为其加上说明文字或字幕。

 













不推荐:

推荐:

<img src=”luke-skywalker.jpg”>

<img src=”luke-skywalker.jpg” alt=”Luke skywalker riding an alien horse”>

html

关注点分离:信息(HTML 结构)、外观(CSS)和行为(JavaScript);

为了使它们成为可维护的干净整洁的代码,我们要尽可能的将它们分离开来。

 













不推荐:

推荐:

不使用超过一到两个脚本(学会用合并脚本);

不使用行内样式(<style>.no-good {}</style>); 

不在元素上使用 style 属性(<hr style=”border-top: 5px solid black”>);

不使用行内脚本(<script>alert(‘no good’)</script>);

不使用表象元素(i.e. <b><u><center><font><b>);

不使用表象 class 名(i.e. red, left, center);

 

html

省略样式表与脚本上的 type 属性。鉴于 HTML5 中以上两者默认的 type 值就是 text/css 和 text/javascript,所以 type 属性一般是可以忽略掉的。甚至在老旧版本的浏览器中这么做也是安全可靠的。

 













不推荐:

推荐:

<link rel=”stylesheet” href=”main.css” type=”text/css”>

<script src=”main.js” type=”text/javascript”></script>

<link rel=”stylesheet” href=”main.css”>

<script src=”main.js”></script>

html 对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
html 请仅仅把标题标签hn用于标题文本,不要仅仅为了产生粗体文本或改变字体大小而使用它们,请使用其它标签或 CSS 代替。h1 标签一个页面只能用一次。
html 登录、注册、帮助中心等无需要百度抓取的页面a标签 要加  rel=”nofollow”
js 总是使用 === 精确的比较操作符,避免在判断的过程中,由 JavaScript 的强制类型转换所造成的困扰。
js

逻辑操作符 || 和 && 也可被用来返回布尔值。如果操作对象为非布尔对象,那每个表达式将会被自左向右地做真假判断。基于此操作,最终总有一个表达式被返回回来。这在变量赋值时,是可以用来简化你的代码的。

 













不推荐:

推荐:

if(!x) {
  if(!y) {
    x = 1;
  } else {
    x = y;
  }
}

 x = x || y || 1;
js 语句要以分号结束,否则它将会继续执行下去,不管换不换行。所以总是使用分号,因为隐式的代码嵌套会引发难以察觉的问题。当然我们更要从根本上来杜绝这些问题
js 统一使用单引号(‘),不使用双引号(“)。这在创建 HTML 字符串非常有好处
js

用三元操作符分配或返回语句。在比较简单的情况下使用,避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。

 













不推荐:

推荐:

if(x === 10) {
return ‘valid’;
} else {
return ‘invalid’;
}
return x === 10 ? ’valid’ : ’invalid’;
css

省略“0”值后面的单位。不要在0值后面使用单位,除非有值。

 













不推荐:

推荐:

padding-bottom: 0px;

margin: 0em;

padding-bottom: 0;

margin: 0;

css 属性选择器或属性值用双引号(””),而不是单引号(”)括起来。URI值(url())不要使用引号。

发表评论

表情:
评论列表 (有 0 条评论,29人围观)

还没有评论,来说两句吧...

相关阅读

    相关 web前端命名规范整理

    web前端命名规范整理 ![img][] 一个得到广泛推崇的东西,必然有它的优势所在。web语义化: 1、可以让人一目了然这块是什么鬼,那块是什么鬼,对于项目的维

    相关 代码规范整理

    > 58到家、快狗打车(58速运)、58家政收简历啦~ > 最近想换工作的同学~ 欢迎拿简历砸我~ 加我微信:15501423004 (记得备注 内推 哈~) 代码规范

    相关 前端代码规范

    html规范 1. 符合web2.0标准,语义化html,结构、表现、行为三层分离,兼容性优良,代码简洁明了有序,尽可能的减少服务器负载,快速的解析速度。 2. 正确

    相关 前端CSS规范整理

    一、文件规范 1、文件均归档至约定的目录中。 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中: ...