PC站點開發規範

時間 2019-11-16

標籤站點開發規範简体版

原文原文鏈接

最佳方式

堅持制定好的代碼規範。
不管團隊人數多少，代碼應該同出一門。
若是想要爲這個規範作貢獻或以爲有不合理的地方，進行討論。

命名規則

項目命名（project）

所有采用小寫方式，如下劃線分隔。例：my_project_name

目錄命名

參照項目命名規則，有複數結構的，要採用複數命名法。例：scripts, styles, images

HTML 文件命名

參照項目命名規則。例：error_***.html

JS 文件命名

參照項目命名規則。例：account_**.js

HTML5頁面規範

DOCTYPE啓用網頁標準模式，每一個頁面規範原則上使用一套模板。
每一個頁面編碼使用」UTF-8」，包括文件編碼也使用」UTF-8」。
根據HTML5規範，一般在引入CSS和JS時不須要指明type,由於 text/css 和 text/javascript 分別是他們的默認值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="format-detection" content="telphone=no, email=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>title</title>
    <meta name="Keywords" content="***,**">
    <meta name="Description" content="**,****">
    <link rel="stylesheet" href="css/index.min.css">
</head>
<body>
</body>
</html>

複製代碼

屬性順序

儘量屬性順序一致,保證易讀性。javascript

class
id
name
data-*
src,for,type,href value,max-length,max,pattern
placeholder,title,alt
required,readonly,disabled
複製代碼

JavaScript

不要混用tab和space。
對上下文this的引用只能使用‘_this’,’that’,’self’ 其中一個來命名。

變量命名

標準變量採用駝峯式命名。
‘ID’在變量名中全大寫。
‘URL’在變量名中全大寫。
‘Android’ 在變量名中大寫第一個字母。
*‘iOS’在變量名中小寫第一個，大寫後兩個字母。
- 常量全大寫，用下劃線連接。
- 構造函數，大寫第一個字母。
- jQuery 對象必須以‘$’ 開頭命名。

/* 例如： */
var thisIsMyName;
var goodID;
var reportURL;
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) {
    this.name = name;
}
// good
var $body = $('body');

複製代碼

引號

最外層統一使用單引號。css

var a = 'foo',
    z = '<div id="test"></div>'
複製代碼

文檔註釋

儘可能按這種註釋進行抒寫。html

/**
 * @func
 * @desc 一個帶參數的函數
 * @param {string} a - 參數a
 * @param {number} b=1 - 參數b默認值爲1
 * @param {string} c=1 - 參數c有兩種支持的取值</br>1—表示x</br>2—表示xx
 * @param {object} d - 參數d爲一個對象
 * @param {string} d.e - 參數d的e屬性
 * @param {string} d.f - 參數d的f屬性
 * @param {object[]} g - 參數g爲一個對象數組
 * @param {string} g.h - 參數g數組中一項的h屬性
 * @param {string} g.i - 參數g數組中一項的i屬性
 * @param {string} [j] - 參數j是一個可選參數
 */
function foo(a, b, c, d, g, j) {
    ...
}

複製代碼

通用的文本和字體樣式

一、標題java

要給 h1-h6 標題 -- 包括做爲連接的標題 -- 定義缺省樣式。在你的CSS文檔頂部定義它們，在必要時修改它們以保持整個站點的一致性。
標題必須有層次，能代表從大到小不一樣級別的重要性，h1具備最大的字體大小。
SEO：要大體地瞭解頁面的層次組織和閱讀效果，在開發者工具裏關閉CSS效果，你會看到一個基於文字的視圖，包括全部的 h1-h6, strong, em 等標籤。

二、連接程序員