2. 程式人生 > >前端開發規範之命名規範、html規範、css規範、js規範

前端開發規範之命名規範、html規範、css規範、js規範

阿新 • • 發佈：2019-01-09

在學習程式設計的時候，每次看到那些整齊規範的程式碼，心裡頓時對這個程式設計師表示點點好感，有時，比如看到自己和朋友寫的程式碼時，那閱讀起來就是苦不堪言，所以，一些基本的開發規範是必須的，是為了自己方便閱讀程式碼，也方便他人閱讀修改程式碼。

命名

駝峰式命名法介紹

Pascal Case 大駝峰式命名法：首字母大寫。eg：StudentInfo、UserInfo、ProductInfo
Camel Case 小駝峰式命名法：首字母小寫。eg：studentInfo、userInfo、productInfo

檔案資源命名

檔名不得含有空格
檔名建議只使用小寫字母，不使用大寫字母。( 為了醒目，某些說明檔案的檔名，可以使用大寫字母，比如README、LICENSE。 )
檔名包含多個單詞時，單詞之間建議使用半形的連詞線 ( - ) 分隔。
引入資源使用相對路徑，不要指定資源所帶的具體協議 ( http:,https: ) ，除非這兩者協議都不可用。

推薦：

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

變數命名

命名方式： 小駝峰式命名方法
命名規範： 型別+物件描述的方式，如果沒有明確的型別，就可以使字首為名詞

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

函式
命名方式：小駝峰方式 ( 建構函式使用大駝峰命名法 )
命名規則：字首為動詞

動詞 含義 返回值
can 判斷是否可執行某個動作 ( 許可權 ) 函式返回一個布林值。true：可執行；false：不可執行
has 判斷是否含有某個值 函式返回一個布林值。true：含有此值；false：不含有此值
is 判斷是否為某個值 函式返回一個布林值。true：為某個值；false：不為某個值
get 獲取某個值 函式返回一個非布林值
set 設定某個值 無返回值、返回是否設定成功或者返回鏈式物件

推薦：

//是否可閱讀
function canRead(){
    return true;
}
//獲取姓名
function getName{
    return this.name
}

常量

命名方法:全部大寫
命名規範：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞

推薦：

 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私有變數的值

註釋規範

單行註釋（//）
  • 單獨一行：//(雙斜線)與註釋文字之間保留一個空格
  • 在程式碼後面添加註釋：//(雙斜線)與程式碼之間保留一個空格，並且//(雙斜線)與註釋文字之間保留一個空格。

  • 註釋程式碼：//(雙斜線)與程式碼之間保留一個空格。

    推薦：

// 呼叫了一個函式；1)單獨在一行
setTitle();
var maxCount = 10; // 設定最大量；2)在程式碼後面註釋
// setName(); // 3)註釋程式碼

多行註釋（ / 註釋說明 /）

  • 若開始(/和結束(/)都在一行，推薦採用單行註釋
  • 若至少三行註釋時，第一行為/，最後行為/，其他行以開始，並且註釋文字與保留一個空格。

推薦：

/*
* 程式碼執行到這裡後會呼叫setTitle()函式
* setTitle()：設定title的值
*/
setTitle();

函式（方法）註釋

函式(方法)註釋也是多行註釋的一種，但是包含了特殊的註釋要求，參照 javadoc(百度百科)
語法：

/** 
* 函式說明 
* @關鍵字 
*/

常用註釋關鍵字

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

推薦：

/**
 - 合併Grid的行
 - @param grid {Ext.Grid.Panel} 需要合併的Grid
 - @param cols {Array} 需要合併列的Index(序號)陣列；從0開始計數，序號也包含。
 - @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規範

文件規範

HTML5的文件型別宣告：<!DOCTYPE html>

  • DOCTYPE標籤是一種標準通用標記語言的文件型別宣告，它的目的是要告訴標準通用標記語言解析器，它應該使用什麼樣的文件型別定義（DTD）來解析文件。
  • 使用文件宣告型別的作用是為了防止開啟瀏覽器的怪異模式。
  • 沒有DOCTYPE文件型別宣告會開啟瀏覽器的怪異模式，瀏覽器會按照自己的解析方式渲染頁面，在不同的瀏覽器下面會有不同的樣式。
  • 如果你的頁面添加了

指令碼載入

推薦：

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

    <script src="main.js" async></script>
  </body>
</html>

只相容現代瀏覽器推薦：

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

語義化

語義化是指：根據元素其被創造出來時的初始意義來使用它。
意思就是用正確的標籤幹正確的事，而不是隻有div和span。

推薦：

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標籤不為空

標籤的 alt 屬性指定了替代文字，用於在影象無法顯示或者使用者禁用影象顯示時，代替影象顯示在瀏覽器中的內容。
假設由於下列原因使用者無法檢視影象，alt 屬性可以為影象提供替代的資訊：

  • 網速太慢
  • src屬性中的錯誤
  • 瀏覽器禁用影象
  • 使用者使用的是螢幕閱讀器

結構、表現、行為三者分離

儘量在文件和模板中只包含結構性的 HTML；而將所有表現程式碼，移入樣式表中；將所有動作行為，移入指令碼之中。
在此之外，為使得它們之間的聯絡儘可能的小，在文件和模板中也儘量少地引入樣式和指令碼檔案。
建議：

  • 不使用超過一到兩張樣式表
  • 不使用超過一到兩個指令碼（學會用合併指令碼）
  • 不使用行內樣式（）
  • 不在元素上使用 style 屬性（）
  • 不使用行內指令碼（）
  • 不使用表象元素（i.e. , ,
    , , ）
  • 不使用表象 class 名（i.e. red, left, center）

HTML只關注內容

  • HTML只顯示展示內容資訊
  • 不要引入一些特定的 HTML 結構來解決一些視覺設計問題
  • 不要將img元素當做專門用來做視覺設計的元素
  • 樣式上的問題應該使用css解決

推薦：

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 中的唯一理由是它們呈現出了與內容相關的一些資訊。
推薦：

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

避免全域性名稱空間汙染

防止全域性名稱空間被汙染，我們通常的做法是將程式碼包裹成一個 IIFE(Immediately-Invoked Function Expression)，建立獨立隔絕的定義域。也使得記憶體在執行完後立即釋放。
IIFE 還可確保你的程式碼不會輕易被其它全域性名稱空間裡的程式碼所修改（i.e. 第三方庫，window 引用，被覆蓋的未定義的關鍵字等等）。
推薦：

// 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 嚴格模式可在整個指令碼或獨個方法內被啟用。它對應不同的 javascript 語境會做更加嚴格的錯誤檢查。嚴格模式也確保了 javascript 程式碼更加的健壯，執行的也更加快速。

嚴格模式會阻止使用在未來很可能被引入的預留關鍵字。

你應該在你的指令碼中啟用嚴格模式，最好是在獨立的 IIFE 中應用它。避免在你的指令碼第一行使用它而導致你的所有指令碼都啟動了嚴格模式，這有可能會引發一些第三方類庫的問題。

變數宣告

總是使用 var 來宣告變數，並且使用單var模式（將所有的變數在函式最前面只使用一個var定義）。例如：

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

js宣告提前

javascript會自動將函式作用域內的變數和方法的定義提前（只是提前宣告，賦值還是在原處）
例如：

(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 的強制型別轉換所造成的困擾。例如：

(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));

等同== 和嚴格等===的區別

  • ==， 兩邊值型別不同的時候，要先進行型別轉換，再比較。
  • ===，不做型別轉換，型別不同的一定不等。

==等同操作符

  • 如果兩個值具有相同型別，會進行===比較，返回===的比較值
  • 如果兩個值不具有相同型別，也有可能返回true
  • 如果一個值是null另一個值是undefined，返回true
  • 如果一個值是string另個是number，會把string轉換成number再進行比較
  • 如果一個值是true，會把它轉成1再比較，false會轉成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

總結：

  • false 除了和自身比較為 true 外，和 0，”” 比較也為 true
  • null 只和 undefined 比較時為 true， 反過來 undefined 也僅和 null 比較為 true，沒有第二個
  • 0 除了和 false 比較為 true，還有空字串 ”” 和空陣列 []
  • 空字串 ” 除了和 false 比較為 true，還有一個數字 0

==, >, <, +, -, … 這些操作符所造成的隱式型別轉換都是無副作用的，它不會改變變數本身儲存的值。，但是，如果你覆寫某個物件的 valueOf/toString的話，==就會產生副作用.
例如：

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

===操作符：

  • 要是兩個值型別不同，返回false
  • 要是兩個值都是number型別，並且數值相同，返回true
  • 要是兩個值都是stirng，並且兩個值的String內容相同，返回true
  • 要是兩個值都是true或者都是false，返回true
  • 要是兩個值都是指向相同的Object，Arraya或者function，返回true
  • 要是兩個值都是null或者都是undefined，返回true

真假判斷

js中以下內容為假：

  • false
  • null
  • undefined
  • 0
  • ’ ‘(空字串)
  • NaN

設定預設引數

邏輯操作符 || 和 && 也可被用來返回布林值。如果操作物件為非布林物件，那每個表示式將會被自左向右地做真假判斷。基於此操作，最終總有一個表示式被返回回來。這在變數賦值時，是可以用來簡化你的程式碼的。例如:如果x不存在且y不存在，x=1；如果x存在y存在，x = y

不適用eval()函式

如eval的字面意思來說，惡魔，使用eval()函式會帶來安全隱患。
eval()函式的作用是返回任意字串，當作js程式碼來處理。

this關鍵字

只在物件構造器、方法和在設定的閉包中使用 this 關鍵字。this 的語義在此有些誤導。它時而指向全域性物件（大多數時），時而指向呼叫者的定義域（在 eval 中），時而指向 DOM 樹中的某一節點（當用事件處理繫結到 HTML 屬性上時），時而指向一個新建立的物件（在構造器中），還時而指向其它的一些物件（如果函式被 call() 和 apply() 執行和呼叫時）。
正因為它是如此容易地被搞錯，請限制它的使用場景：

  • 在建構函式中
  • 在物件的方法中（包括由此創建出的閉包內）

首選函式式風格

函數語言程式設計讓你可以簡化程式碼並縮減維護成本，因為它容易複用，又適當地解耦和更少的依賴。
接下來的例子中，在一組數字求和的同一問題上，比較了兩種解決方案。第一個例子是經典的程式處理，而第二個例子則是採用了函數語言程式設計和 ECMA Script 5.1 的陣列方法。
不推薦:

(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));

推薦（函數語言程式設計）：

(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));

修改內建物件原型鏈

修改內建的諸如 Object.prototype 和 Array.prototype 是被嚴厲禁止的。修改其它的內建物件比如 Function.prototype，雖危害沒那麼大，但始終還是會導致在開發過程中難以 debug 的問題，應當也要避免。

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

用三元操作符分配或返回語句。在比較簡單的情況下使用，避免在複雜的情況下使用。沒人願意用 10 行三元操作符把自己的腦子繞暈。
不推薦：

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

推薦：

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

JSHint

在js規範中，有很多規範都是樣式上的規範而不是邏輯上的規範，比如儘量使用===而不是==，我們可以使用JSHint或者JSLint，Javascript程式碼驗證工具，這種工具可以檢查你的程式碼並提供相關的程式碼改進意見。我個人使用的是JSHint，所以就以這個為例.

webstorm內建JSHint

對於ws愛好者來說，我沒有用過其他的編譯器，ws基本上能滿足你的所有需求（最新的ws集成了vue）。
在Settings => language & frameworks => JavaScript => Code Quality Tolls => JSHint
這裡寫圖片描述
其餘規範參考官方文件：http://jshint.com/docs/

CSS規範

id和class的命名

ID和class的名稱總是使用可以反應元素目的和用途的名稱，或其他通用的名稱，代替表象和晦澀難懂的名稱。
不推薦：

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

.red {
  color: red;
}

推薦：

.heavy {
  font-weight: 800;
}

.important {
  color: red;
}

合理的使用ID

一般情況下ID不應該被用於樣式，並且ID的權重很高，所以不使用ID解決樣式的問題，而是使用class
不推薦：

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

推薦：

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

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

從結構、表現、行為分離的原則來看，應該儘量避免css中出現HTML標籤，並且在css選擇器中出現標籤名會存在潛在的問題。

使用子選擇器

很多前端開發人員寫選擇器鏈的時候不使用 直接子選擇器（注：直接子選擇器和後代選擇器的區別）。
有時，這可能會導致疼痛的設計問題並且有時候可能會很耗效能。
然而，在任何情況下，這是一個非常不好的做法。
如果你不寫很通用的，需要匹配到DOM末端的選擇器， 你應該總是考慮直接子選擇器。
不推薦:

.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: 0;
margin: 0;

屬性格式

  • 為了保證一致性和可擴充套件性，每個宣告應該用分號結束，每個宣告換行。
  • 屬性名的冒號後使用一個空格。出於一致性的原因，屬性和值（但屬性和冒號之間沒有空格）的之間始終使用一個空格。
  • 每個選擇器和屬性宣告總是使用新的一行。
  • 屬性選擇器或屬性值用雙引號（””），而不是單引號（”）括起來。
  • URl值（url()）不要使用引號。

作為實踐，遵循以下順序：
結構型屬性：

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

表現型屬性：

  1. background,border,etc
  2. 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;
}

原文地址：

原文作者：sunshine小小倩

相關推薦

前端開發規範之命名規範、html規範、css規範、js規範

在學習程式設計的時候，每次看到那些整齊規範的程式碼，心裡頓時對這個程式設計師表示點點好感，有時，比如看到自己和朋友寫的程式碼時，那閱讀起來就是苦不堪言，所以，一些基本的開發規範是必須的，是為了自己方便閱讀程式碼，也方便他人閱讀修改程式碼。 命名

前端開發規範之命名規範

HTML: 1.單標記標籤統一加/結尾 2.所有跟資料有關的按鈕都用input 3.定位屬性要寫全，為0不省略 4.給有事件的元素統一加類 5.單獨模組用section包起來,class是模組名 6.導航，footer單獨之外，其餘的儘量用一個大的容

2.我使用的C/C++編寫規範之命名約定

test imu dir use 規範 意義 BE 常見 單詞 自用的規範，參考自Google、華為與微軟。? 最重要的一致性規則是命名管理,命名風格直接可以直接確定命名實體是:類型、變量、函數、常量、宏等等，無需查找實體聲明,我們大腦中的模式匹配引擎依賴於這些命名規則。

編碼規範之命名

1.命名 命名是一個看似簡單卻值得深究的一個過程。變數、函式、檔案等等命名有一些內在的要求：見名知義。一個好的名字可以讓人一眼就知道它是做什麼的，它往往是一個事物的高度概括。如果一個名字取得不好，那麼可能會其他人帶來閱讀上的困難，甚至引起歧義。變數名和檔名一般採用名詞，而函式名一般採用動賓結構。

C++程式碼規範之命名規則

一、命名的兩個基本原則1、含義清晰，不易混淆； 2、不和其它模組、系統API的名稱空間相沖突。二、命名通則1、在所有命名中，都應使用標準的英文單詞或縮寫；不得使用拼音或拼音縮寫，除非該名字描述的是文 特有的內容（如半形、全形、聲母、韻母等）；除非必要，不要用數字或較奇怪的字元來定義識別符號。 2、所有命名都應

PHP標準規範之-composer 自帶autoload使用【最簡單、最底層的用法】

文章目錄 一、手冊、參考檔案 二、composer下載、安裝、初始化、下載composer自帶autoload 三、如何使用這個autoload 重點： 注意：

前端開發利器之靜態服務器

環境 oca 配置 pos 服務 path pytho onf dex 在進行前端頁面開發時，為了調試方便，需要在本地啟動一個靜態文件服務器，而不需要與後端api服務一起部署。 常用靜態文件服務器 01. anywhere 使用簡單，需要nodejs環境。安裝：npm in

前端開發知識之前端移動端適配總結

演示 等於 不同 無效 這也 sta 一個 name 物理 meta標簽到底做了什麽事情 做過移動端適配的小夥伴一定有遇到過這行代碼： <meta name="viewport" content="width=device-width, initial-scale=1

前端開發總結之gulp

                                          &nb

前端開發IDE之webstorm IDE新增Plugins----新增vue外掛

webstorm IDE新增Plugins----新增vue外掛 webstorm IDE很強大了,擴充套件性很強,語法校驗很強大,不過有時候一些特殊的外掛  還是需要自己新增到IDE的 下面以新增VUE Plugins 為例: File--Setting--Plugins[點

前端開發IDE之用WebStorm進行Angularjs 2開發

WebStorm是進行JS和前端開發的不二之選的IDE工具，雖然目前版本已經更新了，但是由於Angular 2的成熟度還沒那麼高，所以用WebStorm進行Angular 2的工程建立，還是沒有其他語言的方便。自己嘗試用WebStorm搭建Angular 2的工程，搭建過程特別是在Windows上磕

前端開發IDE之webstorm簡單介紹

webstorm簡單介紹   欲先善其事，必先利其器，如題。 我們可以理解 IDE 就是集成了很多你想要的功能，或者你不想要的功能。換句話說就是裝了很多外掛的 editor ，所以到目前為止，我還覺得沒必要給它裝什麼外掛。 那麼接下來開始介紹webstrom的特色功能：

web前端開發技術之淺談對HTML5 智能表單的理解

提示 goods 表單 加載完成 空格 日期和時間 url 顯示 指向 Html5新增input的form屬性，用於指向特定form表單的id，實現input無需放在form標簽之中，即可通過表單進行提交。 <FORM id=xinzeng> … </FO

前端開發技能之CSS3

錨偽類：a:link{}(未被訪問狀態);a:visited{}(已訪問狀態);a:hover{}(滑鼠懸停狀態);a:active{}(滑鼠點中啟用連結那一下)；注意a:hover必須在a:link,a:visited之後才是有效的；a:active必須放在a:hover之後才是有效的。 大致有這些：:r

前端開發日記之點選懸浮框之外的地方隱藏懸浮框

本次遇見的問題是：在拒絕訂單時，頁面彈出了一個懸浮框用於輸入拒絕理由。需要我做的是：彈出懸浮框時，點選頁面其它位置時會將懸浮框隱藏。 在此處貼出程式碼：//拒絕彈出框在點選彈出框其它位置時，隱藏彈出框

《編寫高質量程式碼--web前端開發修煉之道》筆記-CSS

此篇為本筆記的第二篇 標準模式與怪異模式（模擬老式瀏覽器的行為） 如果漏寫了DTD宣告，Firefox仍然會按照標準模式來解析網頁，但在IE中（包括IE6，IE7，IE8）就會觸發怪異模式 IE盒模型的解析 標準模式：網頁元素的寬度有padding，bo

前端開發【第1篇：HTML】

HTML初識 1、什麼是HTML HTML是英文Hyper Text Mark-up Language(超文字標記語言)的縮寫，他是一種製作全球資訊網頁面標準語言（標記）。相當於定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。 你可能早已經注意到了這點，

構建前端開發環境之----使用express處理POST跨域請求

回顧 在上次的 文章中，實現了 開發環境的簡單的jsonp 處理，但是隻能處理 GET 請求，不支援 POST 請求。為了讓 模擬的效果更好一點，還要能處理 POST 跨域請求。 使用 CORS 處理跨域 在 express 中實現 CORS 的方法

編寫高質量程式碼:Web前端開發修煉之道（三）

第五章:高質量的Javascript 這章的內容我看的最久,這是跟我js基礎沒打好有著莫大的關係，但是還是耐著性子看完了， 不懂的東西都是百度上搜索，理解後再繼續。下面是記錄下來的筆記。 1）如何避免JS衝突 A:匿名函式 在多人合作一個網站時，每個人都會寫自己的

前端開發技能之HTML5

一.新新增元素和移除元素 新增的結構元素： section元素：定義文件中的節 article元素：定義文件內的文章 aside元素：定義頁面內容之外的內容 header元素 footer元素 nav元素：定義文件內導航連結 main元素：定義文件的主內容 新