我对于前端开发的一些基本准则

Posted 2021-04-08 北斗大数据

结构、样式、行为分离

尽量确保文档和模板只包含html结构，样式都放到样式表里，行为都放到脚本里。

理解 web 中如何和为何区分不同的关注点，这很重要。这里的关注点主要指的是：信息（HTML 结构）、外观（CSS）和行为（javascript）。为了使它们成为可维护的干净整洁的代码，我们要尽可能的将它们分离开来。

严格地保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。

就是说，尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。

在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。

清晰的分层意味着：

·      不使用超过一到两张样式表（i.e. main.css, vendor.css）

·      不使用超过一到两个脚本（学会用合并脚本）

·      不使用行内样式（<style>.no-good{}</style>）

·      不在元素上使用 style 属性（<hrstyle="border-top: 5px solid black">）

·      不使用行内脚本（<script>alert('nogood')</script>）

·      不使用表象元素（i.e. <b>,<u>, <center>, <font>, <b>）

·      不使用表象 class 名（i.e. red, left, center）

不推荐

 

推荐

缩进

统一两个空格缩进（总之缩进统一即可），不要使用Tab或者Tab、空格混搭。

文件编码

使用不带BOM的 UTF-8 编码。

·      在 HTML中指定编码<meta charset="utf-8">；

·    无需使用@charset指定样式表的编码，它默认为UTF-8（参考@charset）；

一律使用小写字母

 

省略外链资源 URL 协议部分

省略外链资源（图片及其它媒体资源）URL 中的http / https协议，使 URL 成为相对地址，避免MixedContent问题，减小文件字节数。

其它协议（ftp等）的 URL 不省略。

统一注释

注释是你自己与你的小伙伴们了解代码写法和目的的唯一途径。特别是在写一些看似琐碎的无关紧要的代码时，由于记忆点不深刻，注释就变得尤为重要了。

编写自解释代码只是一个传说，没有任何代码是可以完全自解释的。而代码注释，则是永远也不嫌多。

当你写注释时一定要注意：不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。当然也可以加入所思考问题或是解决方案的链接地址。

通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

HTML 注释

·      模块注释

·      区块注释

CSS 注释

组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

 

JavaScript 注释

·      单行注释

必须独占一行。//后跟一个空格，缩进与下一行被注释说明的代码一致。

·      多行注释

避免使用/*...*/这样的多行注释。有多行注释内容时，使用多个单行注释。

·      函数/方法注释

·      函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。；

·      参数和返回值注释必须包含类型信息和说明；

·      当函数是内部函数，外部不可访问时，可以使用 @inner 标识；

·      文件注释

文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。如下:

代码验证

·      使用W3C HTML Validator来验证你的HTML代码有效性；

·      使用W3CCSS Validator来验证你的CSS代码有效性；

代码验证不是最终目的，真的目的在于让开发者在经过多次的这种验证过程后，能够深刻理解到怎样的语法或写法是非标准和不推荐的，即使在某些场景下被迫要使用非标准写法，也可以做到心中有数。