前端代码规范点整理

类型	前端代码规范点
项目	在 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()）不要使用引号。