Front-end development specification document (first draft)

Overall Principles

• Indent

  For all programming languages, we require that indentation must be soft tabs (with space characters). Typing Tab in your text editor should equal 4 spaces.

• Readability vs Compression

  For maintaining existing files, we believe readability is more important than saving file size. Lots of whitespace and appropriate ASCII art are encouraged. No developer should intentionally minify HTML or CSS, or minify Javascript code beyond recognition.

  We will automatically minimize and gzip all static client files such as CSS and JS on the server side or during the build process

• HTML, CSS, JS code separation

  Keep the html code as clean as possible and use the simplest code level to complete complex layout requirements to facilitate future maintenance and expansion

  The css code itself is global. All CSS modular ideas should be adopted to constrain the rules of css and minimize global pollution

  JS code is divided into functional code and business code. Functional code should be extracted into functional components as much as possible to facilitate the use of other colleagues in the team

• Naming convention

  Files and folders: All English lowercase letters and numbers or connectors "-, _", other characters are not allowed such as: jquery.1.x.x.js
  Files: Calling /libs files must include version numbers, compressed files The min keyword needs to be included. Other plug-ins do not need to include it, such as: /libs/modernizr-1.7.min.js
  ID: small camel case naming method such as: firstName topBoxList footerCopyright
  Class: [minus sign connector] such as ：top-item main-box box-list-item-1
  Try to use word names with clear semantics, and avoid directional separate word naming styles such as left and bottom

---

html specification

Basic Grammar

On attributes, use double quotes, not single quotes.
Don’t use slashes at the end of auto-closing tags - the HTML5 specification states that they are optional.
Don’t ignore optional closing tags (e.g., and ).
Try to use class to render styles and avoid using id to write styles

Doctype

<code>在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式，使其每个浏览器中尽可能一致的展现。
</code>

<span style="color: #008080;">1</span> <span style="color: #800000;"></span>

Character encoding

<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>

Compatibility Mode

<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>

Basic SEO

<span style="color: #800000;"><meta name="keywords" content="your keywords">
<meta name="description" content="your description"></span>

viewport settings

• viewport: generally refers to the size of the content area of ​​the browser window, excluding toolbars, tabs, etc.;
• width: browser width, the width of the visible area of ​​the page in the output device;
• device-width: device resolution width, the visible width of the screen of the output device;
• initial-scale: initial scaling ratio;
• minimum-scale: minimum scaling ratio;
• maximum-scale: maximum scaling ratio;
• user-scalable: allows users to zoom the page
• minimal-ui, not supported (remove navigation bar) Optimize for mobile devices, set the width and initial scaling of the visible area.

<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

When favicon is not specified, most browsers will request favicon.ico in the root directory of the Web Server. In order to ensure that the favicon is accessible and avoid 404, one of the following two methods must be followed:

• Place the favicon.ico file in the root directory of the Web Server;
• Use link to specify favicon;

<span style="color: #800000;"><link rel="shortcut icon" href="path/to/favicon.ico"></span>

Recommended configuration for mobile page header

<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>

Separation of CSS and JavaScript structures, styles, and behaviors

<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>

Practicality is better than perfection

<code>尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
在编写 HTML 代码时，需要尽量避免多余的父节点。很多时候，需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例:
</code>

<span style="color: #800000;"><!-- Not so great -->
<span class="avatar">
  <img  src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="Front-end development specification document (first draft)" >
</span>

<!-- Better -->
<img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="..." alt="Front-end development specification document (first draft)" ></span>

 

避免用 document.write 生成标签

<code>用 document.write生成标签让内容变得更难查找，更难编辑，<b><strong>性能更差</strong></b>。应该尽量避免这种情况的出现。
</code>

---

CSS 规范

• 外部文件LINK加载CSS，尽可能减少文件数。加载标签必须放在文件的 HEAD 部分。
• 避免使用内联样式 不要在文件中用内联式引入的样式，不管它是定义在样式标签里还是直接定义在元素上。这样会很难追踪样式规则
• 使用 reset.css 让渲染效果在不同浏览器中更一致。
• 避免使用CSS表达式（Expression）
• 不要用@import
• 避免使用ID选择器
• 避免使用开销大的CSS选择器 如：*
• 禁止给class加上html标签 如：li.list
• 避免让选择符看起来像正则表达式 如：[name='aa'] 高级选择器执行耗时长且不易读懂，避免使用。
• 避免直接使用html tag作为样式选择器
• 避免使用 !important
• 有节制的使用css3伪元素
• 避免使用css3 低效属性，如：linear-gradient，borde-image；
• 使用语义化、通用的命名方式；
• 使用连字符 - 作为 Class 名称界定符，不要驼峰命名法和下划线；
• 避免选择器嵌套层级过多，尽量少于 3 级；

用css模块化

<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 输出按照盒子模型的顺序去书写，更好维护，不强制但是倡导输出是一致的。

---

Javascript

命名规范

• 使用单引号'而不是双引号"
• 类的命名使用骆驼命名规则，并且首字母大写，例如： Account, EventHandler
• 常量必须使用大写，在对象（类）或者枚举变量的前部声明，骆驼命名规则
• 类的私有变量和属性建议以 _开头。例如：var _buffer; _init:function(){}

变量

• 必须全部小写字符组成
• 变量必须在声明初始化以后才能使用，即便是 NULL 类型。
• 在作用域顶端对变量赋值，这有助于避免变量声明问题和与声明提升相关的问题
• 变量不要产生歧义。
• 相关的变量集应该放在同一代码块中，非相关的变量集不应该放在同一代码块中。
• 变量应该尽量保持最小的生存周期。
• 能直接使用直接量的，不要使用 new ....; 如： a=/\d/g; a=new RegExp('\d','g');

不要用 void

不要用 with 语句

不要用 continue 语句

尽量不要用位运算

PS：前端团队很少有科班出身的，位运算符效率不见得会有太高的性能，优势非常不明显，出发是高强度的算法需要，否则还是不要有位运算；它会造成代码的苦涩难懂，不利于后续的维护

不要扩充内置原型（Object,Array,String...）

不要用 eval();

+运算要注意

<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>

 

使用三元表达式来代替简单的if else

<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';

 

使用&& 和 || 替代简单的if

<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

 

使用数组或json优化if else

<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>

 

不要在非函数块中(if, while etc)声明函数

<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>

 

有else的if都要有{}

<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>

---

图片

尽量使用png8替代gif图片

不要在移动端手机使用gif动画图片

使用雪碧图，减少css背景图的加载

使用第三方工具压缩png24的图片，可以有非常高的压缩率

PS：手机端不适用GIF图的原因是：1.可以用css3动画来代替，css3动画只出发页面复合，性能更好，2 gif动画都在手机端显示不流畅，不能使用GPU加速，会造成页面重排，严重影响页面性能