前端開發(fā)規(guī)范：命名規(guī)范、html規(guī)范付翁、css規(guī)范简肴、js規(guī)范

本文首發(fā)于我的個人網(wǎng)站：http://cherryblog.site/ （背景更換了不知道大家有沒有發(fā)現(xiàn)呢，嘻嘻）

一個好的程序員肯定是要能書寫可維護的代碼百侧，而不是一次性的代碼砰识，怎么能讓團隊當(dāng)中其他人甚至一段時間時候你再看你某個時候?qū)懙拇a也能看懂呢，這就需要規(guī)范你的代碼了佣渴。
我是有一點強迫癥的人辫狼，上周我們后端給我了一個CanUsename的接口（該接口的目的是判斷輸入的目的地是否是4級目的地），我真的是崩潰的辛润。
我只是覺得這個名字不夠語義化膨处，但是讓我自己想一個名字我又想不出來，于是我就在想砂竖，如果有一套命名規(guī)范的話真椿，那么以后起名字就不用發(fā)愁了，直接按照規(guī)范來就好了~
于是端午在家就百度了一下~

命名

駝峰式命名法介紹

  • Pascal Case 大駝峰式命名法：首字母大寫乎澄。eg：StudentInfo突硝、UserInfo、ProductInfo
  • Camel Case 小駝峰式命名法：首字母小寫置济。eg：studentInfo解恰、userInfo锋八、productInfo

文件資源命名

  • 文件名不得含有空格
  • 文件名建議只使用小寫字母，不使用大寫字母护盈。( 為了醒目挟纱，某些說明文件的文件名，可以使用大寫字母腐宋，比如README紊服、LICENSE。 )
  • 文件名包含多個單詞時脏款，單詞之間建議使用半角的連詞線 ( - ) 分隔围苫。
  • 引入資源使用相對路徑，不要指定資源所帶的具體協(xié)議 ( http:,https: ) 撤师，除非這兩者協(xié)議都不可用剂府。

不推薦：

<script src="http://cdn.com/foundation.min.js"></script>

推薦

<script src="http://cdn.com/foundation.min.js"></script>

變量命名

類型 小寫字母
array a
boolean b
function fn
int i
object o
regular r
string s

命名方式 : 小駝峰式命名方法
命名規(guī)范 : 類型+對象描述的方式，如果沒有明確的類型剃盾，就可以使前綴為名詞

類型 小寫字母
array a
boolean b
function fn
int i
object o
regular r
string s

推薦

var tableTitle = "LoginTable"

不推薦

var getTitle = "LoginTable"

函數(shù)

命名方式 : 小駝峰方式 ( 構(gòu)造函數(shù)使用大駝峰命名法 )
命名規(guī)則 : 前綴為動詞

動詞 含義 返回值
can 判斷是否可執(zhí)行某個動作 ( 權(quán)限 ) 函數(shù)返回一個布爾值腺占。true：可執(zhí)行；false：不可執(zhí)行
has 判斷是否含有某個值 函數(shù)返回一個布爾值痒谴。true：含有此值衰伯；false：不含有此值
is 判斷是否為某個值 函數(shù)返回一個布爾值。true：為某個值积蔚；false：不為某個值
get 獲取某個值 函數(shù)返回一個非布爾值
set 設(shè)置某個值 無返回值意鲸、返回是否設(shè)置成功或者返回鏈式對象

推薦：

//是否可閱讀
function canRead(){
    return true;
}

//獲取姓名
function getName{
    return this.name
}

常量

命名方法 : 全部大寫
命名規(guī)范 : 使用大寫字母和下劃線來組合命名，下劃線用以分割單詞尽爆。
推薦：

 var MAX_COUNT = 10;
 var URL = 'http://www.baidu.com';

類的成員

  • 公共屬性和方法 : 同變量命名方式
  • 私有屬性和方法 : 前綴為下劃線(_)后面跟公共屬性和方法一樣的命名方式

推薦(將name換成this是不是更熟悉了呢)

function Student(name) {
    var _name = name; // 私有成員
 
    // 公共方法
    this.getName = function () {
        return _name;
    }
 
    // 公共方式
    this.setName = function (value) {
        _name = value;
    }
}
var st = new Student('tom');
st.setName('jerry');
console.log(st.getName()); // => jerry：輸出_name私有變量的值

注釋規(guī)范

單行注釋 ( // )

  • 單獨一行：//(雙斜線)與注釋文字之間保留一個空格
  • 在代碼后面添加注釋：//(雙斜線)與代碼之間保留一個空格怎顾，并且//(雙斜線)與注釋文字之間保留一個空格。
  • 注釋代碼：//(雙斜線)與代碼之間保留一個空格漱贱。

推薦 :

// 調(diào)用了一個函數(shù)槐雾；1)單獨在一行
setTitle();
 
var maxCount = 10; // 設(shè)置最大量；2)在代碼后面注釋
 
// setName(); // 3)注釋代碼

多行注釋 ( /* 注釋說明 */ )

  • 若開始(/*和結(jié)束(*/)都在一行幅狮，推薦采用單行注釋
  • 若至少三行注釋時募强，第一行為/*，最后行為*/崇摄，其他行以*開始擎值，并且注釋文字與*保留一個空格。

推薦 :

/*
* 代碼執(zhí)行到這里后會調(diào)用setTitle()函數(shù)
* setTitle()：設(shè)置title的值
*/
setTitle();

函數(shù) ( 方法 ) 注釋

函數(shù)(方法)注釋也是多行注釋的一種逐抑，但是包含了特殊的注釋要求幅恋，參照 javadoc(百度百科)
語法：

/** 
* 函數(shù)說明 
* @關(guān)鍵字 
*/

常用注釋關(guān)鍵字

注釋名 語法 含義 示例
@param @param 參數(shù)名 {參數(shù)類型} 描述信息 描述參數(shù)的信息 @param name {String} 傳入名稱
@return @return {返回類型} 描述信息 描述返回值的信息 @return {Boolean} true:可執(zhí)行;false:不可執(zhí)行
@author @author 作者信息 [附屬信息：如郵箱、日期] 描述此函數(shù)作者的信息 @author 張三 2015/07/21
@version @version XX.XX.XX 描述此函數(shù)的版本號 @version 1.0.3
@example @example 示例代碼 @example setTitle('測試')

推薦 :

/**
 - 合并Grid的行
 - @param grid {Ext.Grid.Panel} 需要合并的Grid
 - @param cols {Array} 需要合并列的Index(序號)數(shù)組泵肄；從0開始計數(shù)捆交，序號也包含。
 - @param isAllSome {Boolean} ：是否2個tr的cols必須完成一樣才能進行合并腐巢。true：完成一樣品追；false(默認)：不完全一樣
 - @return void
 - @author polk6 2015/07/21 
 - @example
 - _________________                             _________________
 - |  年齡 |  姓名 |                             |  年齡 |  姓名 |
 - -----------------      mergeCells(grid,[0])   -----------------
 - |  18   |  張三 |              =>             |       |  張三 |
 - -----------------                             -  18   ---------
 - |  18   |  王五 |                             |       |  王五 |
 - -----------------                             -----------------
*/
function mergeCells(grid, cols, isAllSome) {
    // Do Something
}

HTML規(guī)范

文檔規(guī)范

使用 HTML5 的文檔聲明類型 : <!DOCTYPE html>

  • DOCTYPE標簽是一種標準通用標記語言的文檔類型聲明，它的目的是要告訴標準通用標記語言解析器冯丙，它應(yīng)該使用什么樣的文檔類型定義（DTD）來解析文檔肉瓦。
  • 使用文檔聲明類型的作用是為了防止開啟瀏覽器的怪異模式。
  • 沒有DOCTYPE文檔類型聲明會開啟瀏覽器的怪異模式胃惜，瀏覽器會按照自己的解析方式渲染頁面泞莉，在不同的瀏覽器下面會有不同的樣式。
  • 如果你的頁面添加了<!DOCTYP>那么船殉，那么就等同于開啟了標準模式鲫趁。瀏覽器會按照W3C標準解析渲染頁面。

腳本加載

說到j(luò)s和css的位置利虫，大家應(yīng)該都知道js放在下面挨厚，css放在上面。
但是糠惫，如果你的項目只需要兼容ie10+或者只是在移動端訪問疫剃，那么可以使用HTML5的新屬性async，將腳本文件放在<head>內(nèi)
兼容老舊瀏覽器(IE9-)時：
腳本引用寫在 body 結(jié)束標簽之前硼讽，并帶上 async 屬性巢价。這雖然在老舊瀏覽器中不會異步加載腳本，但它只阻塞了 body 結(jié)束標簽之前的 DOM 解析固阁，這就大大降低了其阻塞影響壤躲。
而在現(xiàn)代瀏覽器中：
腳本將在 DOM 解析器發(fā)現(xiàn) body 尾部的 script 標簽才進行加載，此時加載屬于異步加載您炉，不會阻塞 CSSOM（但其執(zhí)行仍發(fā)生在 CSSOM 之后）柒爵。
綜上所述，
所有瀏覽器中推薦:

<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <!-- body goes here -->
 
    <script src="main.js" async></script>
  </body>
</html>

只兼容現(xiàn)代瀏覽器推薦:

<html>
  <head>
    <link rel="stylesheet" href="main.css">
    <script src="main.js" async></script>
  </head>
  <body>
    <!-- body goes here -->
  </body>
</html>

語義化

我們一直都在說語義化編程赚爵，語義化編程棉胀，但是在代碼中很少有人完全使用正確的元素。使用語義化標簽也是有理由SEO的冀膝。

語義化是指：根據(jù)元素其被創(chuàng)造出來時的初始意義來使用它唁奢。
意思就是用正確的標簽干正確的事，而不是只有div和span窝剖。

不推薦：

<b>My page title</b>
<div class="top-navigation">
  <div class="nav-item"><a href="#home">Home</a></div>
  <div class="nav-item"><a href="#news">News</a></div>
  <div class="nav-item"><a href="#about">About</a></div>
</div>
 
<div class="news-page">
  <div class="page-section news">
    <div class="title">All news articles</div>
    <div class="news-article">
      <h2>Bad article</h2>
      <div class="intro">Introduction sub-title</div>
      <div class="content">This is a very bad example for HTML semantics</div>
      <div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div>
      <div class="article-foot-notes">
        This article was created by David <div class="time">2014-01-01 00:00</div>
      </div>
    </div>
 
    <div class="section-footer">
      Related sections: Events, Public holidays
    </div>
  </div>
</div>
 
<div class="page-footer">
  Copyright 2014
</div>

推薦

html 代碼:
<!-- The page header should go into a header element -->
<header>
  <!-- As this title belongs to the page structure it's a heading and h1 should be used -->
  <h1>My page title</h1>
</header>
 
<!-- All navigation should go into a nav element -->
<nav class="top-navigation">
  <!-- A listing of elements should always go to UL (OL for ordered listings) -->
  <ul>
    <li class="nav-item"><a href="#home">Home</a></li>
    <li class="nav-item"><a href="#news">News</a></li>
    <li class="nav-item"><a href="#about">About</a></li>
  </ul>
</nav>
 
<!-- The main part of the page should go into a main element (also use role="main" for accessibility) -->
<main class="news-page" role="main">
  <!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. -->
  <section class="page-section news">
    <!-- A section header should go into a section element -->
    <header>
      <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) -->
      <h2 class="title">All news articles</h2>
    </header>
 
    <!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other
     re-usable module / section that can occur multiple times on a page) a article element should be used -->
    <article class="news-article">
      <!-- An article can contain a header that contains the summary / introduction information of the article -->
      <header>
        <!-- As a article title does not belong to the overall page structure there should not be any heading tag! -->
        <div class="article-title">Good article</div>
        <!-- Small can optionally be used to reduce importance -->
        <small class="intro">Introduction sub-title</small>
      </header>
 
      <!-- For the main content in a section or article there is no semantic element -->
      <div class="content">
        <p>This is a good example for HTML semantics</p>
      </div>
      <!-- For content that is represented as side note or less important information in a given context use aside -->
      <aside class="article-side-notes">
        <p>I think I'm more on the side and should not receive the main credits</p>
      </aside>
      <!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element -->
      <footer class="article-foot-notes">
        <!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time
         while the actual text in the time element can also be more human readable / relative -->
        <p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p>
      </footer>
    </article>
 
    <!-- In a section, footnotes or similar information can also go into a footer element -->
    <footer class="section-footer">
      <p>Related sections: Events, Public holidays</p>
    </footer>
  </section>
</main>
 
<!-- Your page footer should go into a global footer element -->
<footer class="page-footer">
  Copyright 2014
</footer>

alt標簽不為空

<img>標簽的 alt 屬性指定了替代文本麻掸，用于在圖像無法顯示或者用戶禁用圖像顯示時，代替圖像顯示在瀏覽器中的內(nèi)容赐纱。
假設(shè)由于下列原因用戶無法查看圖像脊奋，alt 屬性可以為圖像提供替代的信息：

  • 網(wǎng)速太慢
  • src 屬性中的錯誤
  • 瀏覽器禁用圖像
  • 用戶使用的是屏幕閱讀器

從SEO角度考慮熬北，瀏覽器的爬蟲爬不到圖片的內(nèi)容，所以我們要有文字告訴爬蟲圖片的內(nèi)容

結(jié)構(gòu)诚隙、表現(xiàn)讶隐、行為三者分離

盡量在文檔和模板中只包含結(jié)構(gòu)性的 HTML；而將所有表現(xiàn)代碼久又，移入樣式表中巫延；將所有動作行為，移入腳本之中地消。
在此之外炉峰，為使得它們之間的聯(lián)系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件脉执。
建議：

  • 不使用超過一到兩張樣式表
  • 不使用超過一到兩個腳本（學(xué)會用合并腳本）
  • 不使用行內(nèi)樣式（<style>.no-good {}</style>）
  • 不在元素上使用 style 屬性（<hr style="border-top: 5px solid black">）
  • 不使用行內(nèi)腳本（<script>alert('no good')</script>）
  • 不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>）
  • 不使用表象 class 名（i.e. red, left, center）

HTML只關(guān)注內(nèi)容

  • HTML只顯示展示內(nèi)容信息
  • 不要引入一些特定的 HTML 結(jié)構(gòu)來解決一些視覺設(shè)計問題
  • 不要將img元素當(dāng)做專門用來做視覺設(shè)計的元素
  • 樣式上的問題應(yīng)該使用css解決

不推薦：

<!-- We should not introduce an additional element just to solve a design problem  -->
<span class="text-box">
  <span class="square"></span>
  See the square next to me?
</span>
css 代碼:
.text-box > .square {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

推薦

html 代碼:
<!-- That's clean markup! -->
<span class="text-box">
  See the square next to me?
</span>
css 代碼:
/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

圖片和 SVG 圖形能被引入到 HTML 中的唯一理由是它們呈現(xiàn)出了與內(nèi)容相關(guān)的一些信息疼阔。

不推薦

html 代碼:
<!-- Content images should never be used for design elements!  -->
<span class="text-box">
  ![](square.svg)
  See the square next to me?
</span>

推薦

html 代碼:
<!-- That's clean markup! -->
<span class="text-box">
  See the square next to me?
</span>
css 代碼:
/* We use a :before pseudo element with a background image to solve the problem */
.text-box:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(square.svg) no-repeat;
  background-size: 100%;
}

js規(guī)范

避免全局命名空間污染

防止全局命名空間被污染，我們通常的做法是將代碼包裹成一個 IIFE(Immediately-Invoked Function Expression)适瓦，創(chuàng)建獨立隔絕的定義域竿开。也使得內(nèi)存在執(zhí)行完后立即釋放。

IIFE 還可確保你的代碼不會輕易被其它全局命名空間里的代碼所修改（i.e. 第三方庫玻熙，window 引用否彩，被覆蓋的未定義的關(guān)鍵字等等）。
不推薦:

var x = 10,
    y = 100;
 
// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
// will be stored in the window object. This is very unclean and needs to be avoided.
console.log(window.x + ' ' + window.y);

推薦

// We declare a IIFE and pass parameters into the function that we will use from the global space
(function(log, w, undefined){
  'use strict';
 
  var x = 10,
      y = 100;
 
  // Will output 'true true'
  log((w.x === undefined) + ' ' + (w.y === undefined));
 
}(window.console.log, window));

推薦的IIFE寫法:

(function(){
  'use strict';
 
  // Code goes here
 
}());

如果你想引用全局變量或者是外層 IIFE 的變量嗦随，可以通過下列方式傳參：

(function($, w, d){
  'use strict';
 
  $(function() {
    w.alert(d.querySelectorAll('div').length);
  });
}(jQuery, window, document));

嚴格模式

ECMAScript 5 嚴格模式可在整個腳本或獨個方法內(nèi)被激活列荔。它對應(yīng)不同的 javascript 語境會做更加嚴格的錯誤檢查。嚴格模式也確保了 javascript 代碼更加的健壯枚尼，運行的也更加快速贴浙。

嚴格模式會阻止使用在未來很可能被引入的預(yù)留關(guān)鍵字。

你應(yīng)該在你的腳本中啟用嚴格模式署恍，最好是在獨立的 IIFE 中應(yīng)用它崎溃。避免在你的腳本第一行使用它而導(dǎo)致你的所有腳本都啟動了嚴格模式，這有可能會引發(fā)一些第三方類庫的問題盯质。

變量聲明

總是使用 var 來聲明變量袁串。如不指定 var，變量將被隱式地聲明為全局變量呼巷，例如

var a = b = 0; //b會被隱式的創(chuàng)建為全局變量

所以囱修，請總是使用 var 來聲明變量，并且使用單var模式（將所有的變量在函數(shù)最前面只使用一個var定義）王悍。例如：

(function (){
  'use strict'
  var a = 0,
      b = 0,
      c = 0,
      i,
      j,
      myObject();
}())

采用嚴格模式帶來的好處是破镰，當(dāng)你手誤輸入錯誤的變量名時，它可以通過報錯信息來幫助你定位錯誤出處。

js聲明提前

javascript會自動將函數(shù)作用域內(nèi)的變量和方法的定義提前（只是提前聲明鲜漩，賦值還是在原處）
例如：

(function(log){
  'use strict';
 
  var a = 10;
 
  for(var i = 0; i < a; i++) {
    var b = i * i;
    log(b);
  }
 
  if(a === 10) {
    var f = function() {
      log(a);
    };
    f();
  }
 
  function x() {
    log('Mr. X!');
  }
  x();
 
}(window.console.log));

提升后的js

(function(log){
  'use strict';
  // All variables used in the closure will be hoisted to the top of the function
  var a,
      i,
      b,
      f;
  // All functions in the closure will be hoisted to the top
  function x() {
    log('Mr. X!');
  }
 
  a = 10;
 
  for(i = 0; i < a; i++) {
    b = i * i;
    log(b);
  }
 
  if(a === 10) {
    // Function assignments will only result in hoisted variables but the function body will not be hoisted
    // Only by using a real function declaration the whole function will be hoisted with its body
    f = function() {
      log(a);
    };
    f();
  }
 
  x();
 
}(window.console.log));

使用嚴格等

總是使用 === 精確的比較操作符源譬，避免在判斷的過程中，由 JavaScript 的強制類型轉(zhuǎn)換所造成的困擾孕似。例如：

(function(log){
  'use strict';
 
  log('0' == 0); // true
  log('' == false); // true
  log('1' == true); // true
  log(null == undefined); // true
 
  var x = {
    valueOf: function() {
      return 'X';
    }
  };
 
  log(x == 'X');
 
}(window.console.log));

等同== 和嚴格等===的區(qū)別

  • ==瓶佳， 兩邊值類型不同的時候，要先進行類型轉(zhuǎn)換鳞青，再比較。
  • ===为朋，不做類型轉(zhuǎn)換臂拓，類型不同的一定不等。

==等同操作符

  • 如果兩個值具有相同類型习寸，會進行===比較胶惰，返回===的比較值
  • 如果兩個值不具有相同類型，也有可能返回true
  • 如果一個值是null另一個值是undefined霞溪，返回true
  • 如果一個值是string另個是number孵滞，會把string轉(zhuǎn)換成number再進行比較
  • 如果一個值是true，會把它轉(zhuǎn)成1再比較鸯匹，false會轉(zhuǎn)成0
console.log( false == null )      // false
console.log( false == undefined ) // false
console.log( false == 0 )         // true
console.log( false == '' )        // true
console.log( false == NaN )       // false
 
console.log( null == undefined ) // true
console.log( null == 0 )         // false
console.log( null == '' )        // false
console.log( null == NaN )       // false
 
console.log( undefined == 0)   // false
console.log( undefined == '')  // false
console.log( undefined == NaN) // false
 
console.log( 0 == '' )  // true
console.log( 0 == NaN ) // false

總結(jié)一下==

  • false 除了和自身比較為 true 外坊饶，和 0，"" 比較也為 true
  • null 只和 undefined 比較時為 true殴蓬， 反過來 undefined 也僅和 null 比較為 true匿级，沒有第二個
  • 0 除了和 false 比較為 true，還有空字符串 ''" 和空數(shù)組 []
  • 空字符串 '' 除了和 false 比較為 true染厅，還有一個數(shù)字 0

==, >, <, +, -, ... 這些操作符所造成的隱式類型轉(zhuǎn)換都是無副作用的痘绎，它不會改變變量本身保存的值。肖粮，但是孤页，如果你覆寫某個對象的 valueOf/toString的話，==就會產(chǎn)生副作用.

例如：

Array.prototype.valueOf = function() {
  this[0]++;
  return this;
}
var x = [1, 2, 3];
x == 0;
console.log(x);   // [2, 2, 3]

===操作符：

  • 要是兩個值類型不同涩馆，返回false
  • 要是兩個值都是number類型行施，并且數(shù)值相同，返回true
  • 要是兩個值都是stirng凌净，并且兩個值的String內(nèi)容相同悲龟，返回true
  • 要是兩個值都是true或者都是false，返回true
  • 要是兩個值都是指向相同的Object冰寻，Arraya或者function须教，返回true
  • 要是兩個值都是null或者都是undefined，返回true

真假判斷

  • js中以下內(nèi)容為假：
  • false
  • null
  • undefined
  • 0
  • '' (空字符串)
  • NaN

設(shè)置默認參數(shù)

輯操作符 || 和 && 也可被用來返回布爾值。如果操作對象為非布爾對象轻腺，那每個表達式將會被自左向右地做真假判斷乐疆。基于此操作贬养，最終總有一個表達式被返回回來挤土。這在變量賦值時，是可以用來簡化你的代碼的误算。例如:如果x不存在且y不存在仰美，x=1；如果x存在y存在儿礼，x = y

if(!x) {
  if(!y) {
    x = 1;
  } else {
    x = y;
  }
}

等同于：

x = x || y || 1;

這一小技巧經(jīng)常用來給方法設(shè)定默認的參數(shù)咖杂。

(function(log){
  'use strict';
 
  function multiply(a, b) {
    a = a || 1;
    b = b || 1;
 
    log('Result ' + a * b);
  }
 
  multiply(); // Result 1
  multiply(10); // Result 10
  multiply(3, NaN); // Result 3
  multiply(9, 5); // Result 45
 
}(window.console.log));

不使用eval()函數(shù)

就如eval的字面意思來說，惡魔蚊夫，使用eval()函數(shù)會帶來安全隱患诉字。
eval()函數(shù)的作用是返回任意字符串，當(dāng)作js代碼來處理知纷。

this關(guān)鍵字

只在對象構(gòu)造器壤圃、方法和在設(shè)定的閉包中使用 this 關(guān)鍵字。this 的語義在此有些誤導(dǎo)琅轧。它時而指向全局對象（大多數(shù)時）伍绳，時而指向調(diào)用者的定義域（在 eval 中），時而指向 DOM 樹中的某一節(jié)點（當(dāng)用事件處理綁定到 HTML 屬性上時）鹰晨，時而指向一個新創(chuàng)建的對象（在構(gòu)造器中）墨叛，還時而指向其它的一些對象（如果函數(shù)被 call() 和 apply() 執(zhí)行和調(diào)用時）。

正因為它是如此容易地被搞錯模蜡，請限制它的使用場景：

  • 在構(gòu)造函數(shù)中
  • 在對象的方法中（包括由此創(chuàng)建出的閉包內(nèi)）

首選函數(shù)式風(fēng)格

函數(shù)式編程讓你可以簡化代碼并縮減維護成本漠趁，因為它容易復(fù)用，又適當(dāng)?shù)亟怦詈透俚囊蕾嚒?/p>

接下來的例子中忍疾，在一組數(shù)字求和的同一問題上闯传，比較了兩種解決方案。第一個例子是經(jīng)典的程序處理卤妒，而第二個例子則是采用了函數(shù)式編程和 ECMA Script 5.1 的數(shù)組方法甥绿。
不推薦

(function(log){
  'use strict';
 
  var arr = [10, 3, 7, 9, 100, 20],
      sum = 0,
      i;
 
 
  for(i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
 
  log('The sum of array ' + arr + ' is: ' + sum)
 
}(window.console.log));

推薦(函數(shù)式編程)：

(function(log){
  'use strict';
 
  var arr = [10, 3, 7, 9, 100, 20];
 
  var sum = arr.reduce(function(prevValue, currentValue) {
    return prevValue + currentValue;
  }, 0);
 
  log('The sum of array ' + arr + ' is: ' + sum);
 
}(window.console.log));

修改內(nèi)建對象的原型鏈

修改內(nèi)建的諸如 Object.prototype 和 Array.prototype 是被嚴厲禁止的。修改其它的內(nèi)建對象比如 Function.prototype则披，雖危害沒那么大共缕，但始終還是會導(dǎo)致在開發(fā)過程中難以 debug 的問題，應(yīng)當(dāng)也要避免士复。

三元條件判斷（if 的快捷方法）

用三元操作符分配或返回語句图谷。在比較簡單的情況下使用翩活，避免在復(fù)雜的情況下使用。沒人愿意用 10 行三元操作符把自己的腦子繞暈便贵。
不推薦：

if(x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

推薦：

return x === 10 ? 'valid' : 'invalid'

JSHint

在js規(guī)范中菠镇，有很多規(guī)范都是樣式上的規(guī)范而不是邏輯上的規(guī)范，比如盡量使用===而不是==承璃，我們可以使用JSHint或者JSLint利耍，Javascript代碼驗證工具，這種工具可以檢查你的代碼并提供相關(guān)的代碼改進意見盔粹。我個人使用的是JSHint隘梨，所以就以這個為例

webstorm內(nèi)置JSHint

對于ws愛好者來說，我沒有用過其他的編譯器舷嗡，ws基本上能滿足你的所有需求（最新的ws集成了vue）出嘹。
在Settings => language & frameworks => JavaScript => Code Quality Tolls => JSHint

webstorm中的jshint
這些規(guī)范都是什么意思呢，這里列出一些常用的咬崔，剩下的大家可以參考官方文檔

名稱 含義
curly 循環(huán)或者條件語句必須使用花括號包住
eqeqeq 使用強制等===
newcap 對于首字母大寫的函數(shù)（聲明的類），強制使用new
noarg 禁用arguments.caller和arguments.callee
sub 對于屬性使用aaa.bbb而不是aaa['bbb']
undef 查找所有未定義的變量
boss 查找類似與if(a = 0)這樣的代碼
node 指定運行環(huán)境為node
strict 必須使用嚴格模式
asi 允許省略分號
bitwise 禁止使用位運算符烦秩，比如經(jīng)常把&&寫錯& 規(guī)避此錯誤
jquery 定義全局暴露的jQuery庫
evil 禁止使用eval
maxdepth 嵌套的最大深度
maxparams 參數(shù)的最大個數(shù)

css規(guī)范

id和class的命名

ID和class的名稱總是使用可以反應(yīng)元素目的和用途的名稱垮斯，或其他通用的名稱，代替表象和晦澀難懂的名稱
不推薦 :

.fw-800 {
  font-weight: 800;
}
 
.red {
  color: red;
}

推薦 :

.heavy {
  font-weight: 800;
}
 
.important {
  color: red;
}

合理的使用ID

一般情況下ID不應(yīng)該被用于樣式只祠，并且ID的權(quán)重很高兜蠕，所以不使用ID解決樣式的問題，而是使用class
不推薦：

#content .title {
  font-size: 2em;
}

推薦：

.content .title {
  font-size: 2em;
}

css選擇器中避免使用標簽名

從結(jié)構(gòu)抛寝、表現(xiàn)熊杨、行為分離的原則來看，應(yīng)該盡量避免css中出現(xiàn)HTML標簽盗舰，并且在css選擇器中出現(xiàn)標簽名會存在潛在的問題晶府。

使用子選擇器

很多前端開發(fā)人員寫選擇器鏈的時候不使用 直接子選擇器（注：直接子選擇器和后代選擇器的區(qū)別）。
有時钻趋，這可能會導(dǎo)致疼痛的設(shè)計問題并且有時候可能會很耗性能川陆。
然而，在任何情況下蛮位，這是一個非常不好的做法较沪。
如果你不寫很通用的，需要匹配到DOM末端的選擇器失仁， 你應(yīng)該總是考慮直接子選擇器尸曼。
不推薦:

.content .title {
  font-size: 2rem;
}

推薦

.content > .title {
  font-size: 2rem;
}

盡量使用縮寫屬性

盡量使用縮寫屬性對于代碼效率和可讀性是很有用的，比如font屬性萄焦。
不推薦：

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推薦：

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0后面不帶單位

省略0后面的單位控轿，
不推薦：

padding-bottom: 0px;
margin: 0em;

推薦：

padding-bottom: 0;
margin: 0;

屬性格式

  • 為了保證一致性和可擴展性，每個聲明應(yīng)該用分號結(jié)束，每個聲明換行解幽。
  • 屬性名的冒號后使用一個空格贴见。出于一致性的原因，
    屬性和值（但屬性和冒號之間沒有空格）的之間始終使用一個空格躲株。
  • 每個選擇器和屬性聲明總是使用新的一行片部。
  • 屬性選擇器或?qū)傩灾涤秒p引號（””），而不是單引號（”）括起來霜定。
  • URI值（url()）不要使用引號档悠。

作為最佳實踐，我們應(yīng)該遵循以下順序（應(yīng)該按照下表的順序）：

結(jié)構(gòu)性屬性：

  1. display
  2. position, left, top, right etc.
  3. overflow, float, clear etc.
  4. margin, padding

表現(xiàn)性屬性：

  • background, border etc.
  • font, text

不推薦：

 .box {
  font-family: 'Arial', sans-serif;
  border: 3px solid #ddd;
  left: 30%;
  position: absolute;
  text-transform: uppercase;
  background-color: #eee;
  right: 30%;
  isplay: block;
  font-size: 1.5rem;
  overflow: hidden;
  padding: 1em;
  margin: 1em;
}

推薦：

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

相關(guān)文章：

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末辖所，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子磨德，更是在濱河造成了極大的恐慌缘回，老刑警劉巖，帶你破解...
    沈念sama閱讀 216,591評論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件典挑，死亡現(xiàn)場離奇詭異酥宴，居然都是意外死亡，警方通過查閱死者的電腦和手機您觉，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門拙寡，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人琳水，你說我怎么就攤上這事肆糕。” “怎么了在孝？”我有些...
    開封第一講書人閱讀 162,823評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵诚啃，是天一觀的道長。 經(jīng)常有香客問我私沮，道長绍申，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,204評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任顾彰，我火速辦了婚禮知染，結(jié)果婚禮上耙替，老公的妹妹穿的比我還像新娘拿霉。我一直安慰自己同云，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 67,228評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布厕隧。 她就那樣靜靜地躺著奔脐，像睡著了一般俄周。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上髓迎，一...
    開封第一講書人閱讀 51,190評論 1贊 299
  • 城市分裂傳說
    那天峦朗，我揣著相機與錄音，去河邊找鬼排龄。 笑死波势，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的橄维。 我是一名探鬼主播尺铣，決...
    沈念sama閱讀 40,078評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼争舞！你這毒婦竟也來了凛忿？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 38,923評論 0贊 274
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤竞川，失蹤者是張志新（化名）和其女友劉穎店溢，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體委乌，經(jīng)...
    沈念sama閱讀 45,334評論 1贊 310
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡逞怨，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2贊 333
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了福澡。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,727評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡驹马，死狀恐怖革砸，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情糯累，我是刑警寧澤算利，帶...
    沈念sama閱讀 35,428評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站泳姐，受9級特大地震影響效拭，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜胖秒，卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3贊 326
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一缎患、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧阎肝，春花似錦挤渔、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0贊 22
  • 一樁弒父案判导，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽嫉父。三九已至，卻和暖如春眼刃，著一層夾襖步出監(jiān)牢的瞬間绕辖，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工擂红， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留仪际，地道東北人。 一個月前我還...
    沈念sama閱讀 47,734評論 2贊 368
  • 代替公主和親
    正文 我出身青樓篮条，卻偏偏與公主長得像弟头，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子涉茧，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,619評論 2贊 354

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理赴恨，服務(wù)發(fā)現(xiàn)，斷路器伴栓，智...
    卡卡羅2017閱讀 134,652評論 18贊 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,078評論 25贊 707
  • JavaScript編碼規(guī)范 1 前言 [2 代碼風(fēng)格] [2.1 文件] [2.2 結(jié)構(gòu)] [2.2.1 縮進]...
    憶飛閱讀 1,157評論 1贊 2
  • 曾經(jīng)按照《記事本圓夢計劃》做了自己15年的規(guī)劃伦连，當(dāng)初做這件事情時就非常的痛苦，需要進行取舍钳垮，更要量化可衡量惑淳。設(shè)置的...
    肆姑閱讀 475評論 0贊 49
  • [摘錄]大腦是我們重要的工具，要正確利用這個工具饺窿，唯一的途徑就是去了解它歧焦，尤其是了解它的弱點。與很多多人的直覺相反...
    山娃_閱讀 327評論 1贊 1