個人前端規範——開篇

時間 2019-11-29

標籤個人前端規範開篇欄目快樂工作简体版

原文原文鏈接

　　博客原文：https://www.jianshu.com/p/105a74443304javascript

　　個人前端規範——開篇：http://www.cnblogs.com/shcrk/p/9271561.htmlcss

　　個人前端規範——HTML篇：http://www.cnblogs.com/shcrk/p/9271613.htmlhtml

　　個人前端規範——CSS篇：http://www.cnblogs.com/shcrk/p/9271608.html前端

　　個人前端規範——JavaScript篇：http://www.cnblogs.com/shcrk/p/9271620.htmlvue

大綱

　　前言
　　一、規範的重要性
　　二、關於註釋
　　三、關於文件夾/文件java

前言

　　規範對於一個項目來講是很重要的，統一的規範對代碼的一致性、項目的質量、工做的協調都有很大的幫助，並且有時候能夠規避不少意料不到的錯誤。
　　固然，規範是死的，人是活的。我總結的前端規範是我認爲對我來講比較適合的，我又承認的，因此我能比較好的接受和使用。可是，不一樣的團隊，不一樣的項目須要遵照的規範也許就是不同的。規範的做用是讓項目的代碼看起來更有統一性，讓團隊的協做更方便，所以，根據具體的狀況制定統一的規範纔是最合理的，而這裏我給出的也只是我認爲比較符合我風格和習慣的，至於具體的規範仍是要依據具體的狀況來總結制定。
　　單獨寫成一篇的話篇幅很大，所以我會將個人總結寫成：開篇、css、html、js四篇，讓有須要的讀者可以更方便的查找到想要的知識。瀏覽器

一、規範的重要性

　　說了那麼多，也許有些讀者仍是不覺得意的認爲規範也只是一些如不是很重要的東西，那麼如下一個例子來告訴你，規範有時候起到的做用不只僅是約束你代碼的做用，他還能幫助你規避一些意想不到的bug。框架

<!--
    這段代碼對<p>的首字符樣式定義在IE6上看是沒有效果的,
    而在p:first-letter和{font-size:300%}加上空格，
    也就是p:first-letter {font-size:300%}後，顯示就正常了。 

    這個問題主要是出如今IE6瀏覽器中，並且這位朋友也說明了一些必要的觸發條件： 
        一、IE6瀏覽器 
        二、選擇符是帶有僞類的 
        三、僞類中必須是有鏈接符「-」的，例如:first-letter 
        四、是否有空格的存在
    來源： http://www.cnblogs.com/hustskyking/articles/css-bug-in-IE6.html
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="//www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
    p{font-size:12px;} 
    p:first-letter{font-size:300%}
    </style> 
</head> 

<body> 
    <p>
      對於世界而言，你是一我的；可是對於某我的，你是他的整個世界。縱然傷心，
      也不要愁雲滿面，由於你不知是誰會愛上你的笑容。
    </p> 
</body> 
</html>

二、關於註釋

　　2.一、文件註釋

一、文件註釋要標明做者、文件版本、建立/修改時間、重大版本修改記錄
二、函數描述
三、文件版本、建立或者修改時間、功能、做者
//例子
/**
 * @file Image.js
 * @description 功能詳細描述
*/
四、函數或者類等都要添加頭描述
//實例
/**
 * 簡述
 *
 * 功能詳細描述
 *
 * @param <String> arg1 參數1
 * @param <Number> arg2 參數2，默認爲0
 * @return <Boolean> 看xxx是否成功
 */
function fooFunction (arg1, arg2) {
}

　　2.二、操做註釋

一、單行註釋,寫在代碼上面
二、多行註釋
//例
/*
* 註釋操做說明
*/
for( var i = 0; i < obj.lenght; i++) {
}
三、註釋標籤參考
標籤                  描述
@addon              把一個函數標記爲另外一個函數的擴張，另外一個函數的定義不在源文件中。
@argument           用大括號中的自變量類型描述一個自變量。
@author             函數/類做者的姓名。
@base               若是類是繼承得來，定義提供的類名稱。
@class              用來給一個類提供描述，不能用於構造器的文檔中。
@constructor        描述一個類的構造器。
@deprecated         表示函數/類已被忽略。
@exception          描述函數/類產生的一個錯誤。
@extends            表示派生出當前類的另外一個類。
@fileoverview       表示文檔塊將用於描述當前文件。這個標籤應該放在其它任何標籤以前。
@final              指出函數/類。
@ignore             讓jsdoc忽視隨後的代碼。
@link               相似於@link標籤，用於鏈接許多其它頁面。
@member             定義隨後的函數爲提供的類名稱的一個成員。
@param              用大括號中的參數類型描述一個參數。
@private            表示函數/類爲私有，不該包含在生成的文檔中。
@requires           表示須要另外一個函數/類。
@return             描述一個函數的返回值。
@returns            描述一個函數的返回值。
@see                鏈接到另外一個函數/類。
@throws             描述函數/類可能產生的錯誤。
@type               指定函數/成員的返回類型。
@version            函數/類的版本號。
來源： http://www.jianshu.com/p/8d291d823cc0

三、關於文件夾/文件

　　3.一、命名規範

一、文件夾命名：
    英文單詞的駝峯法命名
    
二、文件命名：
    所有用小寫的英文單詞，單詞之間用「-」鏈接。儘可能規避數字、拼音以及可能被攔截的單詞
命名，如： ad、ads、adv、banner、sponsor、gg、guangg、guanggao。(不少瀏覽器會將
含有這些詞的做爲廣告攔截： ad、ads、adv、banner、sponsor、gg、guangg、guanggao等
頁面中儘可能避免採用以上詞彙來命名。)

　　3.二、文件分層

一、文件的分層依據：
           是以業務邏輯爲劃分基礎，在此基礎上進行文件的劃分
           
    二、這裏的分層不必定適用於全部項目，好比有些項目採用了框架(如angular\vue)，那麼
這樣的項目就不是很適合於這樣的分層結構了。
    
root
    -----js（JavaScript腳本

    -----css（樣式表

    -----img（圖片

    -----swf（flash

    -----src（源文件目錄

    -----dep（引入的第三方依賴包目錄

    -----font（引入字體目錄