前端编码规范个人总结
1.一般规范
文件/资源命名
- 为了可读性，以减号
-来分隔文件名。如：//example.com/blog/my-blog-entyr/或//s.example.com/images/big-black-background.jpg，所以，减号也应该用来分隔资源名称。 - 文件命名总是以字母开头而不是数字。特殊含义的文件以特殊字符开头命名
- 资源的字母名称劝慰小写
- 需要对文件增加前后缀或特定的扩展名，或一串前缀如
3fa89b.main.min.css，这种情况下使用点分隔符来区分这些在文件名中带有清晰意义的元数据。
协议
- 不要引入资源所带的具体协议。当引入图片或其他媒体文件，还有样式和脚本时，URLs 所指向的具体路径，不要指定协议部分
http:,https,除非这两者协议都不可用。不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节
文本缩进
- 一次缩进两个空格
注释
- 当你写注释时一定要注意：不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。当然也可以加入所思考问题或是解决方案的链接地址。
2.HTML规范
文档类型
- 使用 HTML5 的文档类型申明：
<!DOCTYPE html>。 - HTML中不要将无内容元素的标签闭合，例如：使用
<br>而非<br />。
脚本加载
- 出于性能考虑，异步加载脚本（只应用于现代浏览器）。脚本引用写在 body 结束标签之前，并带上 async 属性。
语义化
- 根据元素（有时被错误地称作“标签”）其被创造出来时的初始意义来使用它。如用 heading 元素来定义头部标题，p 元素来定义文字段落，用 a 元素来定义链接锚点。
多媒体回溯
- 对页面上的媒体而言，像图片、视频、canvas 动画等，要确保其有可替代的接入接口。图片文件我们可采用有意义的备选文本（alt），视频和音频文件我们可以为其加上说明文字或字幕。
- 尽量用 alt 标签去描述图片，设想你需要对于那些只能通过语音或者看不见图片的用户表达图片到底是什么。
关注点分离
严格地保证结构(HTML)、表现(CSS)、行为(JavaScript)三者分离，并尽量使三者之间没有太多的交互和联系。具体：
不使用超过一到两张样式表(i.e main.css, vendor.css)
不使用超过一到两个脚本(学会用合并脚本)
不使用行内样式(
<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内容至上
- 不要引入一些特定的 HTML 结构来解决一些视觉设计问题
- 不要将
img元素当做专门用来做视觉设计的元素。 - 图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们呈现出了与内容相关的一些信息
Type属性
- 省略样式表与脚本上的 type 属性。
ID和锚点
将页面内所有的头部标题元素都加上 ID. 这样做，页面 URL 的 hash 中带上对应的 ID 名称，即形成描点，方便跳转至对应元素所处位置。如，当在浏览器中输入 URL
http://your-site.com/about#best-practices，浏览器将定位至以下 H3 上。<h3 id="best-practices">Best practices</h3>
格式化规则
- 在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格要另起一行。（如果由于换行的空格引发了不可预计的问题，那将所有元素并入一行也是可以接受的，格式警告总好过错误警告）。
HTML引号
- 使用双引号(” “)而不是单引号(’ ‘)。
3. JavaScript 规范
全局命名空间污染与 IIFE
- 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改（i.e. 第三方库，window 引用，被覆盖的未定义的关键字等等）。
IIFE（立即执行的函数表达式）
- 无论何时，想要创建一个新的封闭的定义域，那就用 IIFE。它不仅避免了干扰，也使得内存在执行完后立即释放。
- 所有脚本文件建议都从 IIFE 开始。
- 立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的，但写在内使得整个表达式看起来更像一个整体，因此推荐这么做。
严格模式
- 在脚本中启用严格模式，最好是在独立的 IIFE 中应用它。避免在脚本第一行使用它而导致所有脚本都启动了严格模式，这有可能会引发一些第三方类库的问题。
变量声明
- 总是使用
var来声明变量。
提升声明
为避免变量和方法定义被自动提升造成误解，把风险降到最低，我们应该手动地显示地去声明变量与方法。也就是说，所有的变量以及方法，应当定义在 function 内的首行。
只用一个
var关键字声明，多个变量用逗号隔开。
总是使用带类型判断的比较判断
- 总是使用
===精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。
分号
- 总是使用分号，因为隐式的代码嵌套会引发难以察觉的问题。
- 分号需要用在表达式的结尾，而并非函数声明的结尾。
语句块内的函数声明
- 切勿在语句块内声明函数，在 ECMAScript 5 的严格模式下，这是不合法的。函数声明应该在定义域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。
标准特性
- 总是优先考虑使用标准特性。为了最大限度地保证扩展性与兼容性，总是首选标准的特性，而不是非标准的特性（例如：首选
string.charAt(3)而不是string[3]；首选 DOM 的操作方法来获得元素引用，而不是某一应用特定的快捷方法）。
切勿在循环中创建函数
- 在简单的循环语句中加入函数是非常容易形成闭包而带来隐患的。
eval函数（魔鬼）
eval()不但混淆语境还很危险，总会有比这更好、更清晰、更安全的另一种方案来写你的代码，因此尽量不要使用 evil 函数。
this关键字
- 只在对象构造器、方法和在设定的闭包中使用
this关键字。
使用ECMA Script 5
- 建议使用 ECMA Script 5 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。
数组和对象的属性迭代
- 用 ECMA5 的迭代方法来迭代数组。使用
Array.forEach或者如果你要在特殊场合下中断迭代，那就用Array.every。
不要使用 switch
- switch 在所有的编程语言中都是个非常错误的难以控制的语句，建议用 if else 来替换它。
数组和对象字面量
- 用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错。
修改内建对象的原型链
- 修改内建的诸如
Object.prototype和Array.prototype是被严厉禁止的。修改其它的内建对象比如Function.prototype，虽危害没那么大，但始终还是会导致在开发过程中难以 debug 的问题，应当也要避免。
自定义 toString() 方法
- 你可以通过自定义
toString()来控制对象字符串化。这很好，但你必须保证你的方法总是成功并不会有其它副作用。如果你的方法达不到这样的标准，那将会引发严重的问题。如果toString()调用了一个方法，这个方法做了一个断言[3] ，当断言失败，它可能会输出它所在对象的名称，当然对象也需要调用toString()。
圆括号
- 一般在语法和语义上真正需要时才谨慎地使用圆括号。不要用在一元操作符上，例如
delete,typeof和void，或在关键字之后，例如return,throw,case,new等。
字符串
- 统一使用单引号(‘)，不使用双引号(“).
三元条件判断（if 的快捷方法）
- 用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用
4.CSS和Sass(SCSS)风格规范
ID和类命名
- ID和class(类)名总是使用可以反应元素目的和用途的名称，或其他通用名称。
合理的避免使用ID
- 一般情况下ID不应该被应用于样式。
- ID的样式不能被复用并且每个页面中只能使用一次ID。
- 使用ID唯一有效的是确定网页或整个站点中的位置。
CSS选择器中避免标签名
- 当构建选择器时应该使用清晰， 准确和有语义的class(类)名。不要使用标签选择器。
- 从分离的角度考虑,在表现层中不应该分配html标记/语义。
缩写属性
- 使用缩写属性提高代码效率和可读性
0 和 单位
- 省略“0”值后面的单位。不要在0值后面使用单位，除非有值。
十六进制表示法
- 在可能的情况下，使用3个字符的十六进制表示法。
- 始终使用小写的十六进制数字
ID 和 Class（类） 名的分隔符
- 使用连字符（中划线）分隔ID和Class（类）名中的单词。为了增强课理解性，在选择器中不要使用除了连字符（中划线）以为的任何字符（包括没有）来连接单词和缩写。
声明顺序
作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：
- 结构性属性：
- display
- position, left, top, right etc.
- overflow, float, clear etc.
- margin, padding
- 表现性属性：
- background, border etc.
- font, text
声明结束
- 为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。
属性名结束
- 属性名的冒号后使用一个空格。出于一致性的原因，
- 属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。
选择器和声明分离
- 每个选择器和属性声明总是使用新的一行。
规则分隔
- 规则之间始终有一个空行（双换行符）分隔
CSS引号
- 属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
- URI值（url()）不要使用引号。
选择器嵌套 (SCSS)
- 在Sass中可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。
- 如果需要指定一些子元素的样式属性，而父元素将不什么样式属性, 可以使用常规的CSS选择器链。
嵌套中引入 空行 (SCSS)
- 嵌套选择器和CSS属性之间空一行。
嵌套顺序和父级选择器(SCSS)
- 以下内容是一个SCSS块应具有的顺序。
- 当前选择器的样式属性
- 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
- 伪类元素 (:before and :after)
- 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
- 用Sass的上下文媒体查询
- 子选择器作为最后的部分
2322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
