Maison >interface Web >tutoriel HTML >前端开发规范文档(初稿)
缩进
对于所有编程语言,我们要求缩进必须是软tab(用空格字符)。在你的文本编辑器里敲 Tab 应该等于 4个空格 。
可读性 vs 压缩
对于维护现有文件,我们认为可读性比节省文件大小更重要。大量空白和适当的ASCII艺术都是受鼓励的。任何开发者都不必故意去压缩HTML或CSS,也不必把Javascript代码最小化得面目全非。
我们会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件,例如CSS和JS
HTML,CSS,JS代码分离
html代码尽量保持整洁,采用最简单的代码层级完成复杂的布局要求,方便以后的维护和扩展
css代码本身都是全局的,所有应当采用css模块化思想,约束css的规则,尽量减少对全局的污染
JS代码分为功能代码和业务代码,功能代码尽量抽取成功能组件,方便团队内其他同事的使用
命名规范
文件及文件夹: 全部英文小写字母+数字或连接符"- , _ ",不可出现其他字符 如:jquery.1.x.x.js
文件:调用 /libs 文件需包含版本号,压缩文件需包含min关键词,其他插件则可不包含 如:/libs/modernizr-1.7.min.js
ID: 小駝峰式命名法 如:firstName topBoxList footerCopyright
Class: [减号连接符] 如:top-item main-box box-list-item-1
尽量使用语义明确的单词命名,避免 left bottom 等方位性的单独的词语命名样式
在属性上,使用双引号,不要使用单引号。
不要在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。
不要忽略可选的关闭标签(例如, 和 )。
尽量用class来渲染样式,避免用id来写样式
<code>在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式,使其每个浏览器中尽可能一致的展现。 </code>
<span style="color: #008080;">1</span> <span style="color: #800000;"></span>
<code>通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式。这样做之后,需要避免在 HTML 中出现字符实体,直接提供字符与文档一致的编码(通常是 UTF-8)。 </code>
<span style="color: #008080;">1</span> <span style="color: #800000;"> </span><span style="color: #008080;">2</span> <span style="color: #800000;"> <meta charset="UTF-8"> </span><span style="color: #008080;">3</span> <span style="color: #800000;"></span>
<code>优先使用最新版本的IE 和 Chrome 内核 </code>
<span style="color: #008080;">1</span> <span style="color: #800000;"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></span>
<span style="color: #800000;"><meta name="keywords" content="your keywords"> <meta name="description" content="your description"></span>
<span style="color: #800000;"><meta name="viewport" content="width=640,user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"></span>
在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问,避免404,必须遵循以下两种方法之一:
<span style="color: #800000;"><link rel="shortcut icon" href="path/to/favicon.ico"></span>
<span style="color: #800000;"> <meta charset="UTF-8"> <title>title</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=640,user-scalable=no"> <!--<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">--> <meta http-equiv="cleartype" content="on"> <meta name="apple-mobile-web-app-title" content="..."> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <meta http-equiv="x-rim-auto-match" content="none"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"></span>
<code>尽量确保文档和模板只包含 HTML 结构,样式都放到样式表里,行为都放到脚本里。 根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。 </code>
<span style="color: #800000;"><link rel="stylesheet" href="code-guide.css"> <script src="code-guide.js"></script> <style> </style></span><span style="color: #008000;">/*</span><span style="color: #008000;"> ... </span><span style="color: #008000;">*/</span><span style="color: #800000;"> </span>
<code>尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。 在编写 HTML 代码时,需要尽量避免多余的父节点。很多时候,需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例: </code>
<span style="color: #800000;"><!-- Not so great --> <span class="avatar"> <img src="..." alt="前端开发规范文档(初稿)" > </span> <!-- Better --> <img class="avatar" src="..." alt="前端开发规范文档(初稿)" ></span>
<code>用 document.write生成标签让内容变得更难查找,更难编辑,<b><strong>性能更差</strong></b>。应该尽量避免这种情况的出现。 </code>
<code>css代码本身都是全局的,所有应当采用css模块化思想,约束css的规则,尽量减少对全局的污染 </code>
<code>坚持限制属性取值简写的使用,属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括: padding margin font background border border-radius 大多数情况下,我们并不需要设置属性简写中包含的所有值。例如,HTML 头部只设置上下的 margin,所以如果需要,只设置这两个值。过度使用属性简写往往会导致更混乱的代码,其中包含不必要的重写和意想不到的副作用。 </code>
<code>css实例都是用的多行的格式,每一对属性和值占单独一行。这个是广泛使用的约定,不仅是在css文件中,也多出现在书里和文章里。许多人认为他的可读性很好。 然而在和团队的工作中,尤其是大型的css文件,我是将样式写成多行,并使用css模块化思想: </code>
<span style="color: #800000;">.alert-window </span>{<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid #ff0</span>;<span style="color: #ff0000;"> font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 10px</span>; }<span style="color: #800000;"> .alert-window .window-title</span>{<br><span style="color: #ff0000;"> ...<br></span> }<span style="color: #800000;"> .alert-window .window-content</span>{<br><span style="color: #ff0000;"> ... <br></span> }<span style="color: #800000;"> .alert-window .window-buttom</span>{<br><span style="color: #ff0000;"> ...<br></span> }
PS: 1. 现在纯手写css比较少了,一般 都是用sass 和 less 来管理样式。<br> 2 书写sass 和 less 一行简直就是灾难 3 css 多行书写,还有个好处,可以要求团队,css 输出按照盒子模型的顺序去书写,更好维护,不强制但是倡导输出是一致的。
PS:前端团队很少有科班出身的,位运算符效率不见得会有太高的性能,优势非常不明显,出发是高强度的算法需要,否则还是不要有位运算;它会造成代码的苦涩难懂,不利于后续的维护
<span style="color: #800000;"> '1'+1==2 //false; 1+1==2 //true</span>
<span style="color: #0000ff;">if</span> (name !== 0 || name !== '' || name!==<span style="color: #0000ff;">null</span> || name!==<span style="color: #000000;">undefined) { ... } </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (name) { ... } </span><span style="color: #0000ff;">if</span> (collection.length > 0<span style="color: #000000;">) { ... } </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (collection.length) { ... }</span>
<span style="color: #0000ff;">if</span><span style="color: #000000;">(a){ d</span>='b'<span style="color: #000000;"> }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{ d</span>='c'<span style="color: #000000;"> } d</span>=a?'b':'c';
<span style="color: #0000ff;">if</span><span style="color: #000000;">(a){ b() } a </span>&&<span style="color: #000000;"> c(); </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(bb){ a</span>=<span style="color: #000000;">bb }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{ a</span>=2<span style="color: #000000;"> } a</span>=bb||2
<span style="color: #0000ff;">if</span>(a=='1' || a=='b' || a=='c' || a=='ss'<span style="color: #000000;">){ bb(); }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{ ... } </span><span style="color: #0000ff;">var</span> hasData=<span style="color: #000000;">{ </span>'1':1<span style="color: #000000;">, </span>'b':1<span style="color: #000000;">, </span>'c':1<span style="color: #000000;">, </span>'ss':1<span style="color: #000000;"> } </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(hasData[a]){ bb() }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{ ... }</span>
<code>尽管浏览器允许你分配函数给一个变量,但坏消息是,不同的浏览器用不同的方式解析它 如果一定要定义函数,请用函数表达式方式声明; 如: </code>
<span style="color: #0000ff;">function</span><span style="color: #000000;"> b(){ ... } </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(a){ </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> b(){ ... } } </span><span style="color: #0000ff;">var</span> b=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){ ... } </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(a){ b</span>=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){ .... } }</span>
<span style="color: #0000ff;">if</span><span style="color: #000000;">(a) b() </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> c(); </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(a){ b(); }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{ c(); }</span>
<code>这会在IE6、IE7和IE9的怪异模式中导致一些问题;同时,在ES3的一些实现中,多余的逗号会增加数组的长度。在ES5中已经澄清 </code>
<span style="color: #0000ff;">var</span> hero =<span style="color: #000000;"> { firstName: </span>'Kevin'<span style="color: #000000;">, lastName: </span>'Flynn'<span style="color: #000000;">, }; </span><span style="color: #0000ff;">var</span> heroes =<span style="color: #000000;"> [ </span>'Batman'<span style="color: #000000;">, </span>'Superman'<span style="color: #000000;">, ]; </span><span style="color: #0000ff;">var</span> hero =<span style="color: #000000;"> { firstName: </span>'Kevin'<span style="color: #000000;">, lastName: </span>'Flynn'<span style="color: #000000;"> }; </span><span style="color: #0000ff;">var</span> heroes =<span style="color: #000000;"> [ </span>'Batman'<span style="color: #000000;">, </span>'Superman'<span style="color: #000000;"> ];</span>
<code>在分配低调(unobtrusive)的事件监听器时,通常可接受的做法是把事件监听器直接分派给那些会触发某个结果动作的元素。不过,偶尔也会有多个元素同时符合触发条件,给每个元素都分配事件监听器可能会对性能有负面影响。这种情况下,你就应该改用事件代理了 </code>
PS:手机端不适用GIF图的原因是:1.可以用css3动画来代替,css3动画只出发页面复合,性能更好,2 gif动画都在手机端显示不流畅,不能使用GPU加速,会造成页面重排,严重影响页面性能