前端开发规范：命名规范、HTML 规范、CSS 规范、JavaScript 规范

金少一 發表於 2019-9-16 13:31:00

前端开发规范：命名规范、HTML 规范、CSS 规范、JavaScript 规范

<img src="https://mmbiz.qpic.cn/mmbiz_jpg/WY6GjfR9CEnLNChbnlbFMtSowDmrfKxsJKklpEJugIuJC5avsqd3x4wfUXdynpHy6szaeYL6ctiacmwgm0tQ0CQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" data-fail="0">一个好的程序员肯定是要能书写可维护的代码，而不是一次性的代码，怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢，这就需要规范你的代码了。 我是有一点强迫症的人，上周我们后端给我了一个CanUsename的接口（该接口的目的是判断输入的目的地是否是4级目的地），我真的是崩溃的。 我只是觉得这个名字不够语义化，但是让我自己想一个名字我又想不出来，于是我就在想，如果有一套命名规范的话，那么以后起名字就不用发愁了，直接按照规范来就好了~ 于是端午在家就百度了一下~
<h1>命名</h1>
<h2>驼峰式命名法介绍</h2>
<ul class="list-paddingleft-2">
<li>
Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo

</li>
<li>
Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo

</li>

</ul>
<h2>文件资源命名</h2>
<ul class="list-paddingleft-2">
<li>
文件名不得含有空格

</li>
<li>
文件名建议只使用小写字母，不使用大写字母。( 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。 )

</li>
<li>
文件名包含多个单词时，单词之间建议使用半角的连词线 ( – ) 分隔。

</li>
<li>
引入资源使用相对路径，不要指定资源所带的具体协议 ( <code>http:</code>,<code>https:</code> ) ，除非这两者协议都不可用。

</li>

</ul>
 
不推荐：
<h6>HTML 代码:</h6>
<ol class="list-paddingleft-2">
<li>
<script src="http://cdn.com/foundation.min.js"></script>

</li>

</ol>
推荐
<h6>HTML 代码:</h6>
<ol class="list-paddingleft-2">
<li>
<script src="//cdn.com/foundation.min.js"></script>

</li>

</ol>
<h2>变量命名</h2>
命名方式 : 小驼峰式命名方法 命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词
<table style="width: 677px">
<thead>
<tr><th>类型</th><th>小写字母</th></tr>

</thead>
<tbody>
<tr>
<td>array</td>
<td>a</td>

</tr>
<tr>
<td>boolean</td>
<td>b</td>

</tr>
<tr>
<td>function</td>
<td>fn</td>

</tr>
<tr>
<td>int</td>
<td>i</td>

</tr>
<tr>
<td>object</td>
<td>o</td>

</tr>
<tr>
<td>regular</td>
<td>r</td>

</tr>
<tr>
<td>string</td>
<td>s</td>

</tr>

</tbody>

</table>
推荐
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
var tableTitle = "LoginTable"

</li>

</ol>
不推荐
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
var getTitle = "LoginTable"

</li>

</ol>
<h2>函数</h2>
命名方式 : 小驼峰方式 ( 构造函数使用大驼峰命名法 ) 命名规则 : 前缀为动词
<table style="width: 677px">
<thead>
<tr><th>动词</th><th>含义</th><th>返回值</th></tr>

</thead>
<tbody>
<tr>
<td>can</td>
<td>判断是否可执行某个动作 ( 权限 )</td>
<td>函数返回一个布尔值。true：可执行；false：不可执行</td>

</tr>
<tr>
<td>has</td>
<td>判断是否含有某个值</td>
<td>函数返回一个布尔值。true：含有此值；false：不含有此值</td>

</tr>
<tr>
<td>is</td>
<td>判断是否为某个值</td>
<td>函数返回一个布尔值。true：为某个值；false：不为某个值</td>

</tr>
<tr>
<td>get</td>
<td>获取某个值</td>
<td>函数返回一个非布尔值</td>

</tr>
<tr>
<td>set</td>
<td>设置某个值</td>
<td>无返回值、返回是否设置成功或者返回链式对象</td>

</tr>

</tbody>

</table>
推荐：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
//是否可阅读

</li>
<li>
function canRead(){

</li>
<li>
    return true;

</li>
<li>
}

</li>
<li>
 

</li>
<li>
//获取姓名

</li>
<li>
function getName{

</li>
<li>
    return this.name

</li>
<li>
}

</li>

</ol>
<h2>常量</h2>
命名方法 : 全部大写 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。 推荐：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
 var MAX_COUNT = 10;

</li>
<li>
 var URL = 'http://www.baidu.com';

</li>

</ol>
<h2>类的成员</h2>
<ul class="list-paddingleft-2">
<li>
公共属性和方法 : 同变量命名方式

</li>
<li>
私有属性和方法 : 前缀为下划线(_)后面跟公共属性和方法一样的命名方式

</li>

</ul>
 
推荐(将<code>name</code>换成<code>this</code>是不是更熟悉了呢)
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
function Student(name) {

</li>
<li>
    var _name = name; // 私有成员

</li>
<li>
 

</li>
<li>
    // 公共方法

</li>
<li>
    this.getName = function () {

</li>
<li>
        return _name;

</li>
<li>
    }

</li>
<li>
 

</li>
<li>
    // 公共方式

</li>
<li>
    this.setName = function (value) {

</li>
<li>
        _name = value;

</li>
<li>
    }

</li>
<li>
}

</li>
<li>
var st = new Student('tom');

</li>
<li>
st.setName('jerry');

</li>
<li>
console.log(st.getName()); // => jerry：输出_name私有变量的值

</li>

</ol>
<h2>注释规范</h2>
<h3>单行注释 ( // )</h3>
<ul class="list-paddingleft-2">
<li>
单独一行：//(双斜线)与注释文字之间保留一个空格

</li>
<li>
在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。

</li>
<li>
注释代码：//(双斜线)与代码之间保留一个空格。

</li>

</ul>
 
推荐 :
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
// 调用了一个函数；1)单独在一行

</li>
<li>
setTitle();

</li>
<li>
 

</li>
<li>
var maxCount = 10; // 设置最大量；2)在代码后面注释

</li>
<li>
 

</li>
<li>
// setName(); // 3)注释代码

</li>

</ol>
<h2>多行注释 ( / 注释说明 / )</h2>
<ul class="list-paddingleft-2">
<li>
若开始(/<code>*</code>和结束(<code>*</code>/)都在一行，推荐采用单行注释

</li>
<li>
若至少三行注释时，第一行为/<code>*</code>，最后行为<code>*</code>/，其他行以<code>*</code>开始，并且注释文字与<code>*</code>保留一个空格。

</li>

</ul>
 
推荐 :
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
/*

</li>
<li>
* 代码执行到这里后会调用setTitle()函数

</li>
<li>
* setTitle()：设置title的值

</li>
<li>
*/

</li>
<li>
setTitle();

</li>

</ol>
<h2>函数 ( 方法 ) 注释</h2>
函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求，参照 javadoc(百度百科)
语法：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
/** 

</li>
<li>
* 函数说明 

</li>
<li>
* @关键字 

</li>
<li>
*/

</li>

</ol>
常用注释关键字
<table style="width: 677px">
<thead>
<tr><th>注释名</th><th>语法</th><th>含义</th><th>示例</th></tr>

</thead>
<tbody>
<tr>
<td>@param</td>
<td>@param 参数名 {参数类型} 描述信息</td>
<td>描述参数的信息</td>
<td>@param name {String} 传入名称</td>

</tr>
<tr>
<td>@return</td>
<td>@return {返回类型} 描述信息</td>
<td>描述返回值的信息</td>
<td>@return {Boolean} true:可执行;false:不可执行</td>

</tr>
<tr>
<td>@author</td>
<td>@author 作者信息 [附属信息：如邮箱、日期]</td>
<td>描述此函数作者的信息</td>
<td>@author 张三 2015/07/21</td>

</tr>
<tr>
<td>@version</td>
<td>@version XX.XX.XX</td>
<td>描述此函数的版本号</td>
<td>@version 1.0.3</td>

</tr>
<tr>
<td>@example</td>
<td>@example 示例代码</td>
<td>@example setTitle(‘测试’)</td>
<td>如下</td>

</tr>

</tbody>

</table>
推荐 :
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
/**

</li>
<li>
 - 合并Grid的行

</li>
<li>
 - @param grid {Ext.Grid.Panel} 需要合并的Grid

</li>
<li>
 - @param cols {Array} 需要合并列的Index(序号)数组；从0开始计数，序号也包含。

</li>
<li>
 - @param isAllSome {Boolean} ：是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样

</li>
<li>
 - @return void

</li>
<li>
 - @author polk6 2015/07/21 

</li>
<li>
 - @example

</li>
<li>
 - _________________                             _________________

</li>
<li>
 - |  年龄 |  姓名 |                             |  年龄 |  姓名 |

</li>
<li>
 - -----------------      mergeCells(grid,)   -----------------

</li>
<li>
 - |  18   |  张三 |              =>             |       |  张三 |

</li>
<li>
 - -----------------                             -  18   ---------

</li>
<li>
 - |  18   |  王五 |                             |       |  王五 |

</li>
<li>
 - -----------------                             -----------------

</li>
<li>
*/

</li>
<li>
function mergeCells(grid, cols, isAllSome) {

</li>
<li>
    // Do Something

</li>
<li>
}

</li>

</ol>
愚人码头注：推荐使用 JSDOC 或者 ESDOC
<h2>HTML规范</h2>
<h3>文档规范</h3>
使用 HTML5 的文档声明类型 : <code><!DOCTYPE html></code>
<ul class="list-paddingleft-2">
<li>
DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

</li>
<li>
使用文档声明类型的作用是为了防止开启浏览器的怪异模式。

</li>
<li>
没有DOCTYPE文档类型声明会开启浏览器的怪异模式，浏览器会按照自己的解析方式渲染页面，在不同的浏览器下面会有不同的样式。

</li>
<li>
如果你的页面添加了<!DOCTYP>那么，那么就等同于开启了标准模式。浏览器会按照W3C标准解析渲染页面。

</li>

</ul>
<h3>脚本加载</h3>
说到js和css的位置，大家应该都知道js放在下面，css放在上面。 但是，如果你的项目只需要兼容ie10+或者只是在移动端访问，那么可以使用HTML5的新属性<code>async</code>，将脚本文件放在<code><head></code>内 兼容老旧浏览器(IE9-)时： 脚本引用写在 body 结束标签之前，并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了 body 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。 而在现代浏览器中： 脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载，此时加载属于异步加载，不会阻塞 CSSOM（但其执行仍发生在 CSSOM 之后）。 综上所述， 所有浏览器中推荐:
<h6>HTML 代码:</h6>
<ol class="list-paddingleft-2">
<li>
<html>

</li>
<li>
  <head>

</li>
<li>
    <link rel="stylesheet" href="main.css">

</li>
<li>
  </head>

</li>
<li>
  <body>

</li>
<li>
    

</li>
<li>
 

</li>
<li>
    <script src="main.js" async></script>

</li>
<li>
  </body>

</li>
<li>
</html>

</li>

</ol>
只兼容现代浏览器推荐:
<h6>HTML 代码:</h6>
<ol class="list-paddingleft-2">
<li>
<html>

</li>
<li>
  <head>

</li>
<li>
    <link rel="stylesheet" href="main.css">

</li>
<li>
    <script src="main.js" async></script>

</li>
<li>
  </head>

</li>
<li>
  <body>

</li>
<li>
    

</li>
<li>
  </body>

</li>
<li>
</html>

</li>

</ol>
<h3>语义化</h3>
我们一直都在说语义化编程，语义化编程，但是在代码中很少有人完全使用正确的元素。使用语义化标签也是有理由SEO的。
<blockquote>
语义化是指：根据元素其被创造出来时的初始意义来使用它。 意思就是用正确的标签干正确的事，而不是只有<code>div</code>和<code>span</code>。

</blockquote>
不推荐：
<h6>HTML 代码:</h6>
<ol class="list-paddingleft-2">
<li>
My page title

</li>
<li>
<div class="top-navigation">

</li>
<li>
  <div class="nav-item"><a href="#home">Home</a></div>

</li>
<li>
  <div class="nav-item"><a href="#news">News</a></div>

</li>
<li>
  <div class="nav-item"><a href="#about">About</a></div>

</li>
<li>
</div>

</li>
<li>
 

</li>
<li>
<div class="news-page">

</li>
<li>
  <div class="page-section news">

</li>
<li>
    <div class="title">All news articles</div>

</li>
<li>
    <div class="news-article">

</li>
<li>
      <h2>Bad article</h2>

</li>
<li>
      <div class="intro">Introduction sub-title</div>

</li>
<li>
      <div class="content">This is a very bad example for HTML semantics</div>

</li>
<li>
      <div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div>

</li>
<li>
      <div class="article-foot-notes">

</li>
<li>
        This article was created by David <div class="time">2014-01-01 00:00</div>

</li>
<li>
      </div>

</li>
<li>
    </div>

</li>
<li>
 

</li>
<li>
    <div class="section-footer">

</li>
<li>
      Related sections: Events, Public holidays

</li>
<li>
    </div>

</li>
<li>
  </div>

</li>
<li>
</div>

</li>
<li>
 

</li>
<li>
<div class="page-footer">

</li>
<li>
  Copyright 2014

</li>
<li>
</div>

</li>

</ol>
推荐
<h6>HTML 代码:</h6>
<ol class="list-paddingleft-2">
<li>


</li>
<li>
<header>

</li>
<li>
  

</li>
<li>
  <h1>My page title</h1>

</li>
<li>
</header>

</li>
<li>
 

</li>
<li>


</li>
<li>
<nav class="top-navigation">

</li>
<li>
  

</li>
<li>
  <ul>

</li>
<li>
    <li class="nav-item"><a href="#home">Home</a></li>

</li>
<li>
    <li class="nav-item"><a href="#news">News</a></li>

</li>
<li>
    <li class="nav-item"><a href="#about">About</a></li>

</li>
<li>
  </ul>

</li>
<li>
</nav>

</li>
<li>
 

</li>
<li>


</li>
<li>
<main class="news-page" role="main">

</li>
<li>
  

</li>
<li>
  <section class="page-section news">

</li>
<li>
    

</li>
<li>
    <header>

</li>
<li>
      

</li>
<li>
      <h2 class="title">All news articles</h2>

</li>
<li>
    </header>

</li>
<li>
 

</li>
<li>
    

</li>
<li>
    <article class="news-article">

</li>
<li>
      

</li>
<li>
      <header>

</li>
<li>
        

</li>
<li>
        <div class="article-title">Good article</div>

</li>
<li>
        

</li>
<li>
        <small class="intro">Introduction sub-title

</li>
<li>
      </header>

</li>
<li>
 

</li>
<li>
      

</li>
<li>
      <div class="content">

</li>
<li>
        This is a good example for HTML semantics

</li>
<li>
      </div>

</li>
<li>
      

</li>
<li>
      <aside class="article-side-notes">

</li>
<li>
        I think I'm more on the side and should not receive the main credits

</li>
<li>
      </aside>

</li>
<li>
      

</li>
<li>
      <footer class="article-foot-notes">

</li>
<li>
        

</li>
<li>
        This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time>

</li>
<li>
      </footer>

</li>
<li>
    </article>

</li>
<li>
 

</li>
<li>
    

</li>
<li>
    <footer class="section-footer">

</li>
<li>
      Related sections: Events, Public holidays

</li>
<li>
    </footer>

</li>
<li>
  </section>

</li>
<li>
</main>

</li>
<li>
 

</li>
<li>


</li>
<li>
<footer class="page-footer">

</li>
<li>
  Copyright 2014

</li>
<li>
</footer>

</li>

</ol>
<h3>alt标签不为空</h3>
<code><img></code>标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。 假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：
<ul class="list-paddingleft-2">
<li>
网速太慢

</li>
<li>
src 属性中的错误

</li>
<li>
浏览器禁用图像

</li>
<li>
用户使用的是屏幕阅读器

</li>

</ul>
 
从SEO角度考虑，浏览器的爬虫爬不到图片的内容，所以我们要有文字告诉爬虫图片的内容
<h3>结构、表现、行为三者分离</h3>
尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。 在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。 建议：
<ul class="list-paddingleft-2">
<li>
不使用超过一到两张样式表

</li>
<li>
不使用超过一到两个脚本（学会用合并脚本）

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

</li>
<li>
不在元素上使用 style 属性（<code><hr ></code>）

</li>
<li>
不使用行内脚本（<code><script>alert('no good')</script></code>）

</li>
<li>
不使用表象元素（<code>i.e. , , <center>, , </code>）

</li>
<li>
不使用表象 class 名（<code>i.e. red, left, center</code>）

</li>

</ul>
<h3>HTML只关注内容</h3>
<ul class="list-paddingleft-2">
<li>
HTML只显示展示内容信息

</li>
<li>
不要引入一些特定的 HTML 结构来解决一些视觉设计问题

</li>
<li>
不要将<code>img</code>元素当做专门用来做视觉设计的元素

</li>
<li>
样式上的问题应该使用css解决

</li>

</ul>
 
不推荐：
<h6>HTML 代码:</h6>
<ol class="list-paddingleft-2">
<li>


</li>
<li>
<span class="text-box">

</li>
<li>
  <span class="square">

</li>
<li>
  See the square next to me?

</li>
<li>


</li>
<li>
css 代码:

</li>
<li>
.text-box > .square {

</li>
<li>
  display: inline-block;

</li>
<li>
  width: 1rem;

</li>
<li>
  height: 1rem;

</li>
<li>
  background-color: red;

</li>
<li>
}

</li>

</ol>
推荐
<h6>HTML 代码:</h6>
<ol class="list-paddingleft-2">
<li>


</li>
<li>
<span class="text-box">

</li>
<li>
  See the square next to me?

</li>
<li>


</li>
<li>
css 代码:

</li>
<li>
/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */

</li>
<li>
.text-box:before {

</li>
<li>
  content: "";

</li>
<li>
  display: inline-block;

</li>
<li>
  width: 1rem;

</li>
<li>
  height: 1rem;

</li>
<li>
  background-color: red;

</li>
<li>
}

</li>

</ol>
图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们呈现出了与内容相关的一些信息。
不推荐
<h6>HTML 代码:</h6>
<ol class="list-paddingleft-2">
<li>


</li>
<li>
<span class="text-box">

</li>
<li>
  <img src="square.svg" alt="Square" />

</li>
<li>
  See the square next to me?

</li>
<li>


</li>

</ol>
推荐
<h6>HTML 代码:</h6>
<ol class="list-paddingleft-2">
<li>


</li>
<li>
<span class="text-box">

</li>
<li>
  See the square next to me?

</li>
<li>


</li>
<li>
css 代码:

</li>
<li>
/* We use a :before pseudo element with a background image to solve the problem */

</li>
<li>
.text-box:before {

</li>
<li>
  content: "";

</li>
<li>
  display: inline-block;

</li>
<li>
  width: 1rem;

</li>
<li>
  height: 1rem;

</li>
<li>
  background: url(square.svg) no-repeat;

</li>
<li>
  background-size: 100%;

</li>
<li>
}

</li>

</ol>
<h2>js规范</h2>
<h3>避免全局命名空间污染</h3>
防止全局命名空间被污染，我们通常的做法是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，创建独立隔绝的定义域。也使得内存在执行完后立即释放。
IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改（i.e. 第三方库，window 引用，被覆盖的未定义的关键字等等）。 不推荐:
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
var x = 10,

</li>
<li>
    y = 100;

</li>
<li>
 

</li>
<li>
// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this

</li>
<li>
// will be stored in the window object. This is very unclean and needs to be avoided.

</li>
<li>
console.log(window.x + ' ' + window.y);

</li>

</ol>
推荐
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
// We declare a IIFE and pass parameters into the function that we will use from the global space

</li>
<li>
(function(log, w, undefined){

</li>
<li>
  'use strict';

</li>
<li>
 

</li>
<li>
  var x = 10,

</li>
<li>
      y = 100;

</li>
<li>
 

</li>
<li>
  // Will output 'true true'

</li>
<li>
  log((w.x === undefined) + ' ' + (w.y === undefined));

</li>
<li>
 

</li>
<li>
}(window.console.log, window));

</li>

</ol>
推荐的IIFE写法:
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
(function(){

</li>
<li>
  'use strict';

</li>
<li>
 

</li>
<li>
  // Code goes here

</li>
<li>
 

</li>
<li>
}());

</li>

</ol>
如果你想引用全局变量或者是外层 IIFE 的变量，可以通过下列方式传参：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
(function($, w, d){

</li>
<li>
  'use strict';

</li>
<li>
 

</li>
<li>
  $(function() {

</li>
<li>
    w.alert(d.querySelectorAll('div').length);

</li>
<li>
  });

</li>
<li>
}(jQuery, window, document));

</li>

</ol>
<h3>严格模式</h3>
ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮，运行的也更加快速。
严格模式会阻止使用在未来很可能被引入的预留关键字。
你应该在你的脚本中启用严格模式，最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式，这有可能会引发一些第三方类库的问题。
<h3>变量声明</h3>
总是使用 var 来声明变量。如不指定 var，变量将被隐式地声明为全局变量，例如
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
var a = b = 0; //b会被隐式的创建为全局变量

</li>

</ol>
所以，请总是使用 var 来声明变量，并且使用单var模式（将所有的变量在函数最前面只使用一个var定义）。例如：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
(function (){

</li>
<li>
  'use strict'

</li>
<li>
  var a = 0,

</li>
<li>
      b = 0,

</li>
<li>
      c = 0,

</li>
<li>
      i,

</li>
<li>
      j,

</li>
<li>
      myObject();

</li>
<li>
}())

</li>

</ol>
采用严格模式带来的好处是，当你手误输入错误的变量名时，它可以通过报错信息来帮助你定位错误出处。
<h3>js声明提前</h3>
javascript会自动将函数作用域内的变量和方法的定义提前（只是提前声明，赋值还是在原处） 例如：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
(function(log){

</li>
<li>
  'use strict';

</li>
<li>
 

</li>
<li>
  var a = 10;

</li>
<li>
 

</li>
<li>
  for(var i = 0; i < a; i++) {

</li>
<li>
    var b = i * i;

</li>
<li>
    log(b);

</li>
<li>
  }

</li>
<li>
 

</li>
<li>
  if(a === 10) {

</li>
<li>
    var f = function() {

</li>
<li>
      log(a);

</li>
<li>
    };

</li>
<li>
    f();

</li>
<li>
  }

</li>
<li>
 

</li>
<li>
  function x() {

</li>
<li>
    log('Mr. X!');

</li>
<li>
  }

</li>
<li>
  x();

</li>
<li>
 

</li>
<li>
}(window.console.log));

</li>

</ol>
提升后的js
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
(function(log){

</li>
<li>
  'use strict';

</li>
<li>
  // All variables used in the closure will be hoisted to the top of the function

</li>
<li>
  var a,

</li>
<li>
      i,

</li>
<li>
      b,

</li>
<li>
      f;

</li>
<li>
  // All functions in the closure will be hoisted to the top

</li>
<li>
  function x() {

</li>
<li>
    log('Mr. X!');

</li>
<li>
  }

</li>
<li>
 

</li>
<li>
  a = 10;

</li>
<li>
 

</li>
<li>
  for(i = 0; i < a; i++) {

</li>
<li>
    b = i * i;

</li>
<li>
    log(b);

</li>
<li>
  }

</li>
<li>
 

</li>
<li>
  if(a === 10) {

</li>
<li>
    // Function assignments will only result in hoisted variables but the function body will not be hoisted

</li>
<li>
    // Only by using a real function declaration the whole function will be hoisted with its body

</li>
<li>
    f = function() {

</li>
<li>
      log(a);

</li>
<li>
    };

</li>
<li>
    f();

</li>
<li>
  }

</li>
<li>
 

</li>
<li>
  x();

</li>
<li>
 

</li>
<li>
}(window.console.log));

</li>

</ol>
<h3>使用严格等</h3>
总是使用 <code>===</code> 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。例如：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
(function(log){

</li>
<li>
  'use strict';

</li>
<li>
 

</li>
<li>
  log('0' == 0); // true

</li>
<li>
  log('' == false); // true

</li>
<li>
  log('1' == true); // true

</li>
<li>
  log(null == undefined); // true

</li>
<li>
 

</li>
<li>
  var x = {

</li>
<li>
    valueOf: function() {

</li>
<li>
      return 'X';

</li>
<li>
    }

</li>
<li>
  };

</li>
<li>
 

</li>
<li>
  log(x == 'X');

</li>
<li>
 

</li>
<li>
}(window.console.log));

</li>

</ol>
<h4>等同== 和严格等===的区别</h4>
<ul class="list-paddingleft-2">
<li>
==，两边值类型不同的时候，要先进行类型转换，再比较。

</li>
<li>
===，不做类型转换，类型不同的一定不等。

</li>

</ul>
==等同操作符
<ul class="list-paddingleft-2">
<li>
如果两个值具有相同类型，会进行===比较，返回===的比较值

</li>
<li>
如果两个值不具有相同类型，也有可能返回true

</li>
<li>
如果一个值是null另一个值是undefined，返回true

</li>
<li>
如果一个值是string另个是number，会把string转换成number再进行比较

</li>
<li>
如果一个值是true，会把它转成1再比较，false会转成0

</li>

</ul>
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
console.log( false == null )      // false

</li>
<li>
console.log( false == undefined ) // false

</li>
<li>
console.log( false == 0 )         // true

</li>
<li>
console.log( false == '' )        // true

</li>
<li>
console.log( false == NaN )       // false

</li>
<li>
 

</li>
<li>
console.log( null == undefined ) // true

</li>
<li>
console.log( null == 0 )         // false

</li>
<li>
console.log( null == '' )        // false

</li>
<li>
console.log( null == NaN )       // false

</li>
<li>
 

</li>
<li>
console.log( undefined == 0)   // false

</li>
<li>
console.log( undefined == '')  // false

</li>
<li>
console.log( undefined == NaN) // false

</li>
<li>
 

</li>
<li>
console.log( 0 == '' )  // true

</li>
<li>
console.log( 0 == NaN ) // false

</li>

</ol>
总结一下==
<ul class="list-paddingleft-2">
<li>
false 除了和自身比较为 true 外，和 0，”” 比较也为 true

</li>
<li>
null 只和 undefined 比较时为 true，反过来 undefined 也仅和 null 比较为 true，没有第二个

</li>
<li>
0 除了和 false 比较为 true，还有空字符串 ”” 和空数组 []

</li>
<li>
空字符串 ” 除了和 false 比较为 true，还有一个数字 0

</li>

</ul>
<blockquote>
==, >, <, +, -, … 这些操作符所造成的隐式类型转换都是无副作用的，它不会改变变量本身保存的值。，但是，如果你覆写某个对象的 <code>valueOf/toString</code>的话，==就会产生副作用.

</blockquote>
例如：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
Array.prototype.valueOf = function() {

</li>
<li>
  this[0]++;

</li>
<li>
  return this;

</li>
<li>
}

</li>
<li>
var x = [1, 2, 3];

</li>
<li>
x == 0;

</li>
<li>
console.log(x);   // 

</li>

</ol>
===操作符：
<ul class="list-paddingleft-2">
<li>
要是两个值类型不同，返回false

</li>
<li>
要是两个值都是number类型，并且数值相同，返回true

</li>
<li>
要是两个值都是stirng，并且两个值的String内容相同，返回true

</li>
<li>
要是两个值都是true或者都是false，返回true

</li>
<li>
要是两个值都是指向相同的Object，Arraya或者function，返回true

</li>
<li>
要是两个值都是null或者都是undefined，返回true

</li>

</ul>
<h3>真假判断</h3>
<ul class="list-paddingleft-2">
<li>
js中以下内容为假：

</li>
<li>
false

</li>
<li>
null

</li>
<li>
undefined

</li>
<li>
0

</li>
<li>
” (空字符串)

</li>
<li>
NaN

</li>

</ul>
<h3>设置默认参数</h3>
辑操作符 || 和 && 也可被用来返回布尔值。如果操作对象为非布尔对象，那每个表达式将会被自左向右地做真假判断。基于此操作，最终总有一个表达式被返回回来。这在变量赋值时，是可以用来简化你的代码的。例如:如果x不存在且y不存在，x=1；如果x存在y存在，x = y
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
if(!x) {

</li>
<li>
  if(!y) {

</li>
<li>
    x = 1;

</li>
<li>
  } else {

</li>
<li>
    x = y;

</li>
<li>
  }

</li>
<li>
}

</li>

</ol>
等同于：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
x = x || y || 1;

</li>

</ol>
这一小技巧经常用来给方法设定默认的参数。
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
(function(log){

</li>
<li>
  'use strict';

</li>
<li>
 

</li>
<li>
  function multiply(a, b) {

</li>
<li>
    a = a || 1;

</li>
<li>
    b = b || 1;

</li>
<li>
 

</li>
<li>
    log('Result ' + a * b);

</li>
<li>
  }

</li>
<li>
 

</li>
<li>
  multiply(); // Result 1

</li>
<li>
  multiply(10); // Result 10

</li>
<li>
  multiply(3, NaN); // Result 3

</li>
<li>
  multiply(9, 5); // Result 45

</li>
<li>
 

</li>
<li>
}(window.console.log));

</li>

</ol>
<h3>不使用eval()函数</h3>
就如eval的字面意思来说，恶魔，使用eval()函数会带来安全隐患。 eval()函数的作用是返回任意字符串，当作js代码来处理。
<h3>this关键字</h3>
只在对象构造器、方法和在设定的闭包中使用
this 关键字。this 的语义在此有些误导。它时而指向全局对象（大多数时），时而指向调用者的定义域（在 eval 中），时而指向 DOM
树中的某一节点（当用事件处理绑定到 HTML 属性上时），时而指向一个新创建的对象（在构造器中），还时而指向其它的一些对象（如果函数被
call() 和 apply() 执行和调用时）。
正因为它是如此容易地被搞错，请限制它的使用场景：
<ul class="list-paddingleft-2">
<li>
在构造函数中

</li>
<li>
在对象的方法中（包括由此创建出的闭包内）

</li>

</ul>
<h3>首选函数式风格</h3>
函数式编程让你可以简化代码并缩减维护成本，因为它容易复用，又适当地解耦和更少的依赖。
接下来的例子中，在一组数字求和的同一问题上，比较了两种解决方案。第一个例子是经典的程序处理，而第二个例子则是采用了函数式编程和 ECMA Script 5.1 的数组方法。 不推荐
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
(function(log){

</li>
<li>
  'use strict';

</li>
<li>
 

</li>
<li>
  var arr = [10, 3, 7, 9, 100, 20],

</li>
<li>
      sum = 0,

</li>
<li>
      i;

</li>
<li>
 

</li>
<li>
 

</li>
<li>
  for(i = 0; i < arr.length; i++) {

</li>
<li>
    sum += arr[i];

</li>
<li>
  }

</li>
<li>
 

</li>
<li>
  log('The sum of array ' + arr + ' is: ' + sum)

</li>
<li>
 

</li>
<li>
}(window.console.log));

</li>

</ol>
推荐(函数式编程)：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
(function(log){

</li>
<li>
  'use strict';

</li>
<li>
 

</li>
<li>
  var arr = [10, 3, 7, 9, 100, 20];

</li>
<li>
 

</li>
<li>
  var sum = arr.reduce(function(prevValue, currentValue) {

</li>
<li>
    return prevValue + currentValue;

</li>
<li>
  }, 0);

</li>
<li>
 

</li>
<li>
  log('The sum of array ' + arr + ' is: ' + sum);

</li>
<li>
 

</li>
<li>
}(window.console.log));

</li>

</ol>
<h3>修改内建对象的原型链</h3>
修改内建的诸如 <code>Object.prototype</code> 和 <code>Array.prototype</code> 是被严厉禁止的。修改其它的内建对象比如 <code>Function.prototype</code>，虽危害没那么大，但始终还是会导致在开发过程中难以 debug 的问题，应当也要避免。
<h3>三元条件判断（if 的快捷方法）</h3>
用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。 不推荐：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
if(x === 10) {

</li>
<li>
  return 'valid';

</li>
<li>
} else {

</li>
<li>
  return 'invalid';

</li>
<li>
}

</li>

</ol>
推荐：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
return x === 10 ? 'valid' : 'invalid'

</li>

</ol>
<h2>JSHint</h2>
在js规范中，有很多规范都是样式上的规范而不是逻辑上的规范，比如尽量使用<code>===</code>而不是<code>==</code>，我们可以使用JSHint或者JSLint，Javascript代码验证工具，这种工具可以检查你的代码并提供相关的代码改进意见。我个人使用的是JSHint，所以就以这个为例
<h3>webstorm内置JSHint</h3>
对于ws爱好者来说，我没有用过其他的编译器，ws基本上能满足你的所有需求（最新的ws集成了vue）。 在Settings => language & frameworks => JavaScript => Code Quality Tolls => JSHint
 

<img src="https://mmbiz.qpic.cn/mmbiz_png/WY6GjfR9CEnLNChbnlbFMtSowDmrfKxs1LOn3bqoJWRhb8O7oa3VsFNGSEThbwrEBTNVic8c9b1jDCNa8D1L7ug/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" data-fail="0">webstorm中的jshint
 
这些规范都是什么意思呢，这里列出一些常用的，剩下的大家可以参考官方文档
<table style="width: 677px">
<thead>
<tr><th>名称</th><th>含义</th></tr>

</thead>
<tbody>
<tr>
<td>curly</td>
<td>循环或者条件语句必须使用花括号包住</td>

</tr>
<tr>
<td>eqeqeq</td>
<td>使用强制等===</td>

</tr>
<tr>
<td>newcap</td>
<td>对于首字母大写的函数（声明的类），强制使用new</td>

</tr>
<tr>
<td>noarg</td>
<td>禁用arguments.caller和arguments.callee</td>

</tr>
<tr>
<td>sub</td>
<td>对于属性使用aaa.bbb而不是aaa[‘bbb’]</td>

</tr>
<tr>
<td>undef</td>
<td>查找所有未定义的变量</td>

</tr>
<tr>
<td>boss</td>
<td>查找类似与if(a = 0)这样的代码</td>

</tr>
<tr>
<td>node</td>
<td>指定运行环境为node</td>

</tr>
<tr>
<td>strict</td>
<td>必须使用严格模式</td>

</tr>
<tr>
<td>asi</td>
<td>允许省略分号</td>

</tr>
<tr>
<td>bitwise</td>
<td>禁止使用位运算符，比如经常把&&写错& 规避此错误</td>

</tr>
<tr>
<td>jquery</td>
<td>定义全局暴露的jQuery库</td>

</tr>
<tr>
<td>evil</td>
<td>禁止使用eval</td>

</tr>
<tr>
<td>maxdepth</td>
<td>嵌套的最大深度</td>

</tr>
<tr>
<td>maxparams</td>
<td>参数的最大个数</td>

</tr>

</tbody>

</table>
<h2>css规范</h2>
<h3>id和class的命名</h3>
ID和class的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称 不推荐 :
<h6>CSS 代码:</h6>
<ol class="list-paddingleft-2">
<li>
.fw-800 {

</li>
<li>
  font-weight: 800;

</li>
<li>
}

</li>
<li>
 

</li>
<li>
.red {

</li>
<li>
  color: red;

</li>
<li>
}

</li>

</ol>
推荐 :
<h6>CSS 代码:</h6>
<ol class="list-paddingleft-2">
<li>
.heavy {

</li>
<li>
  font-weight: 800;

</li>
<li>
}

</li>
<li>
 

</li>
<li>
.important {

</li>
<li>
  color: red;

</li>
<li>
}

</li>

</ol>
<h3>合理的使用ID</h3>
一般情况下ID不应该被用于样式，并且ID的权重很高，所以不使用ID解决样式的问题，而是使用class 不推荐：
<h6>CSS 代码:</h6>
<ol class="list-paddingleft-2">
<li>
#content .title {

</li>
<li>
  font-size: 2em;

</li>
<li>
}

</li>

</ol>
推荐：
<h6>CSS 代码:</h6>
<ol class="list-paddingleft-2">
<li>
.content .title {

</li>
<li>
  font-size: 2em;

</li>
<li>
}

</li>

</ol>
<h3>css选择器中避免使用标签名</h3>
从结构、表现、行为分离的原则来看，应该尽量避免css中出现HTML标签，并且在css选择器中出现标签名会存在潜在的问题。
<h3>使用子选择器</h3>
很多前端开发人员写选择器链的时候不使用直接子选择器（注：直接子选择器和后代选择器的区别）。 有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。 然而，在任何情况下，这是一个非常不好的做法。 如果你不写很通用的，需要匹配到DOM末端的选择器，你应该总是考虑直接子选择器。 不推荐:
<h6>CSS 代码:</h6>
<ol class="list-paddingleft-2">
<li>
.content .title {

</li>
<li>
  font-size: 2rem;

</li>
<li>
}

</li>

</ol>
推荐
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
.content > .title {

</li>
<li>
  font-size: 2rem;

</li>
<li>
}

</li>

</ol>
<h3>尽量使用缩写属性</h3>
尽量使用缩写属性对于代码效率和可读性是很有用的，比如font属性。 不推荐：
<h6>CSS 代码:</h6>
<ol class="list-paddingleft-2">
<li>
border-top-style: none;

</li>
<li>
font-family: palatino, georgia, serif;

</li>
<li>
font-size: 100%;

</li>
<li>
line-height: 1.6;

</li>
<li>
padding-bottom: 2em;

</li>
<li>
padding-left: 1em;

</li>
<li>
padding-right: 1em;

</li>
<li>
padding-top: 0;

</li>

</ol>
推荐：
<h6>CSS 代码:</h6>
<ol class="list-paddingleft-2">
<li>
border-top: 0;

</li>
<li>
font: 100%/1.6 palatino, georgia, serif;

</li>
<li>
padding: 0 1em 2em;

</li>

</ol>
<h3>0后面不带单位</h3>
省略0后面的单位， 不推荐：
<h6>CSS 代码:</h6>
<ol class="list-paddingleft-2">
<li>
padding-bottom: 0px;

</li>
<li>
margin: 0em;

</li>

</ol>
推荐：
<h6>JavaScript 代码:</h6>
<ol class="list-paddingleft-2">
<li>
padding-bottom: 0;

</li>
<li>
margin: 0;

</li>

</ol>
<h3>属性格式</h3>
<ul class="list-paddingleft-2">
<li>
为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。

</li>
<li>
属性名的冒号后使用一个空格。出于一致性的原因， 属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。

</li>
<li>
每个选择器和属性声明总是使用新的一行。

</li>
<li>
属性选择器或属性值用双引号（””），而不是单引号（”）括起来。

</li>
<li>
URI值（url()）不要使用引号。

</li>

</ul>
作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：
结构性属性：
<ol class="list-paddingleft-2">
<li>
display

</li>
<li>
position, left, top, right etc.

</li>
<li>
overflow, float, clear etc.

</li>
<li>
margin, padding

</li>

</ol>
表现性属性：
<ul class="list-paddingleft-2">
<li>
background, border etc.

</li>
<li>
font, text

</li>

</ul>
不推荐：
<h6>CSS 代码:</h6>
<ol class="list-paddingleft-2">
<li>
.box {

</li>
<li>
  font-family: 'Arial', sans-serif;

</li>
<li>
  border: 3px solid #ddd;

</li>
<li>
  left: 30%;

</li>
<li>
  position: absolute;

</li>
<li>
  text-transform: uppercase;

</li>
<li>
  background-color: #eee;

</li>
<li>
  right: 30%;

</li>
<li>
  isplay: block;

</li>
<li>
  font-size: 1.5rem;

</li>
<li>
  overflow: hidden;

</li>
<li>
  padding: 1em;

</li>
<li>
  margin: 1em;

</li>
<li>
}

</li>

</ol>
推荐：
<h6>CSS 代码:</h6>
<ol class="list-paddingleft-2"><ol class="list-paddingleft-2">
<li>
.box {

</li>
<li>
  display: block;

</li>
<li>
  position: absolute;

</li>
<li>
  left: 30%;

</li>
<li>
  right: 30%;

</li>
<li>
  overflow: hidden;

</li>
<li>
  margin: 1em;

</li>
<li>
  padding: 1em;

</li>
<li>
  background-color: #eee;

</li>
<li>
  border: 3px solid #ddd;

</li>
<li>
  font-family: 'Arial', sans-serif;

</li>
<li>
  font-size: 1.5rem;

</li>
<li>
  text-transform: uppercase;

</li>
<li>
}

</li>

</ol></ol> 
来源：https://www.cnblogs.com/riverone/p/11526879.html

頁: [1]

琼殿技术论坛's Archiver

前端开发规范：命名规范、HTML 规范、CSS 规范、JavaScript 规范