JavaScript 代碼規范

所有的 JavaScript 項目適用同一種規范。

JavaScript 代碼規范

代碼規范通常包括以下幾個方面:

變量和函數的命名規則
空格，縮進，注釋的使用規則。
其他常用規范……

規范的代碼可以更易于閱讀與維護。

代碼規范一般在開發前規定，可以跟你的團隊成員來協商設置。

變量名

變量名推薦使用駝峰法來命名(camelCase):

firstName="John";

lastName="Doe";

price=19.90;

tax=0.20;

fullPrice=price + (price * tax);

空格與運算符

通常運算符 (=+ - * / ) 前后需要添加空格:

實例:

var x=y + z;

var values=["Volvo", "Saab", "Fiat"];

代碼縮進

通常使用 4 個空格符號來縮進代碼塊：

函數:

function toCelsius(fahrenheit) {

return (5 / 9) * (fahrenheit - 32);

}

	不推薦使用 TAB 鍵來縮進，因為不同編輯器 TAB 鍵的解析不一樣。

語句規則

簡單語句的通用規則:

一條語句通常以符號作為結束符。

實例:

var values=["Volvo", "Saab", "Fiat"];

var person={

firstName: "John",

lastName: "Doe",

age: 50,

eyeColor: "blue"

};

復雜語句的通用規則:

將左花括號放在第一行的結尾。
左花括號前添加一空格。
將右花括號獨立放在一行。
不要以分號結束一個復雜的聲明。

函數:

function toCelsius(fahrenheit) {

return (5 / 9) * (fahrenheit - 32);

}

循環:

for (i=0; i < 5; i++) {

x +=i;

}

條件語句:

if (time < 20) {

greeting="Good day";

} else {

greeting="Good evening";

}

對象規則

對象定義的規則:

將左花括號與類名放在同一行。
冒號與屬性值間有個空格。
字符串使用雙引號，數字不需要。
最后一個屬性-值對后面不要添加逗號。
將右花括號獨立放在一行，并以符號作為結束符號。

實例:

var person={

firstName: "John",

lastName: "Doe",

age: 50,

eyeColor: "blue"

};

短的對象代碼可以直接寫成一行:

實例:

var person={firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

每行代碼字符小于 80

為了便于閱讀每行字符建議小于數 80 個。

如果一個 JavaScript 語句超過了 80 個字符，建議在運算符或者逗號后換行。

實例:

document.getElementById("demo").innerHTML=

"Hello Runoob.";

命名規則

一般很多代碼語言的命名規則都是類似的，例如:

變量和函數為駝峰法（ camelCase）
全局變量為大寫 (UPPERCASE )
常量 (如 PI) 為大寫 (UPPERCASE )

變量命名你是否使用這幾種規則： hyp-hens, camelCase, 或 under_scores ?

HTML 和 CSS 的橫桿(-)字符:

HTML5 屬性可以以 data- (如：data-quantity, data-price) 作為前綴。

CSS 使用 - 來連接屬性名 (font-size)。

	- 通常在 JavaScript 中被認為是減法，所以不允許使用。

下劃線:

很多程序員比較喜歡使用下劃線(如：date_of_birth), 特別是在 SQL 數據庫中。

PHP 語言通常都使用下劃線。

帕斯卡拼寫法(PascalCase):

帕斯卡拼寫法(PascalCase) 在 C 語言中語言較多。

駝峰法：

JavaScript 中通常推薦使用駝峰法，jQuery 及其他 JavaScript 庫都使用駝峰法。

	變量名不要以 $ 作為開始標記，會與很多 JavaScript 庫沖突。

HTML 載入外部 JavaScript 文件

使用簡潔的格式載入 JavaScript 文件 ( type 屬性不是必須的):

使用 JavaScript 訪問 HTML 元素

一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

以下兩個 JavaScript 語句會輸出不同結果:

實例

var obj=getElementById("Demo")

var obj=getElementById("demo")

HTML 與 JavaScript 盡量使用相同的命名規則。

訪問 HTML(5) 代碼規范。

文件擴展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

使用小寫文件名

大多 Web 服務器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。

其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

你必須保持統一的風格，我們建議統一使用小寫的文件名。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

. PSR是什么？

PSR是一套代碼編寫規范，用于約束代碼風格。以前沒有規范的時候大家都是按照自己的習慣來書寫代碼，但每個人風格不一樣，你的代碼在別人看來就是很不爽。而且會導致許多問題：
function 函數名是否駝峰命名，
花括號{}是否換行寫，
是該寫注釋呢還是不寫
變量名是大寫還是小寫，
一個php文件中是一個類好還是允許有多個
所以PSR-[0-4]規范就應運而生，大家都共同遵守，就沒有風格差異了。
PSR是由PHP-FIG這個組織發明的，FIG 是 Framework Interoperability Group（框架可互用性小組）的縮寫。PSR是Proposing a Standards Recommendation（提出標準建議）的縮寫。截止到目前為止，總共有5套PSR規范，分別是：

PSR-0 (Autoloading Standard) 自動加載標準
PSR-1 (Basic Coding Standard) 基礎編碼標準
PSR-2 (Coding Style Guide) 編碼風格向導
PSR-3 (Logger Interface) 日志接口
PSR-4 (Improved Autoloading) 自動加載的增強版，可以替換掉PSR-0了。

2. 規范的使用和定義

1. PSR-0規范

PSR-0是第一套規范，主要用于規范自動加載，不過現在已經過時了，被PSR-4規范替代了。
PSR-0強制性要求幾點：

1. 一個完全合格的namespace和class必須符合這樣的結構：“\< Vendor Name>(< Namespace>)*< Class Name>”
2. 每個namespace必須有一個頂層的namespace（"Vendor Name"提供者名字）
3. 每個namespace可以有多個子namespace
4. 當從文件系統中加載時，每個namespace的分隔符(\)要轉換成 DIRECTORY_SEPARATOR(操作系統路徑分隔符)
5. 在類名中，每個下劃線(_)符號要轉換成DIRECTORY_SEPARATOR(操作系統路徑分隔符)。在namespace中，下劃線(_)符號是沒有（特殊）意義的。
6. 當從文件系統中載入時，合格的namespace和class一定是以 .php 結尾的
7. verdor name,namespaces,class名可以由大小寫字母組合而成（大小寫敏感的）

第一條：一個完全合格的namespace和class必須符合這樣的結構：“\< Vendor Name>(< Namespace>)*< Class Name>”

假如我的文件路徑為Lib/Driver/Config.php,那么我的namespace的申明和使用為：

申明：namespace \Lib\Driver;
使用：use \Lib\Driver\Config;

第二三條：每個namespace必須有一個頂層的namespace（”Vendor Name”提供者名字），每個namespace可以有多個子namespace

namespace \Lib\Driver\Config->/path/to/vender/Lib/Driver/Config.php

Lib就是頂層namespace，Driver就是子namespace/

第四條：當從文件系統中加載時，每個namespace的分隔符()要轉換成 DIRECTORY_SEPARATOR(操作系統路徑分隔符)

new \Lib\Driver\Config->轉換的目錄為/Lib/Driver/Config.php,替換反斜杠為目錄分隔符

第五條：在類名中，每個下劃線(_)符號要轉換成DIRECTORY_SEPARATOR(操作系統路徑分隔符)。在namespace中，下劃線(_)符號是沒有（特殊）意義的

\Lib\Driver\Class_Name->轉換為目錄為/Lib/Driver/Class/Name.php
\Lib\Package_Name\Class_Name->轉換為目錄為/Lib/Package_Name/Class/Name.php

目錄中的_就是下劃線，classname中的下劃線實際上會轉為成路徑分隔符。

但這個規定在PSR-4中已經取消了，不再需要轉換了。

第六條：當從文件系統中載入時，合格的namespace和class一定是以 .php 結尾的

加載的文件必須是.php結尾，既然使用php當然是.php結尾了。不再像以前那樣有什么php3,php5

第七條：verdor name,namespaces,class名可以由大小寫字母組合而成（大小寫敏感的）

由于Liunx是區分大小寫的，而windows是不區分大小寫的，所以如果不注意大小寫在win下正常開發，但是到了服務器上可能就無法正常執行了。

2. PSR-1規范

要求：

1. PHP源文件必須只使用 <?php 和 <?=這兩種標簽。
2. 源文件中php代碼的編碼格式必須是不帶字節順序標記(BOM)的UTF-8。
3. 一個源文件建議只用來做聲明（類(class)，函數(function)，常量(constant)等）或者只用來做一些引起副作用的操作（例如：輸出信息，修改.ini配置等）,但不建議同時做這兩件事。
4. 命名空間(namespace)和類(class) 必須遵守PSR-0標準。
5. 類名(class name) 必須使用駱駝式(StudlyCaps)寫法 (注：駝峰式(cameCase)的一種變種，后文將直接用StudlyCaps表示)。
6. 類(class)中的常量必須只由大寫字母和下劃線(_)組成。
7. 方法名(method name) 必須使用駝峰式(cameCase)寫法。

第一條： PHP源文件必須只使用 <?php 和 <?=這兩種標簽

因為php有4種標簽形式，所以這里規定了使用哪一種，統一規范。

第二條：源文件中php代碼的編碼格式必須是不帶字節順序標記(BOM)的UTF-8

windows筆記本默認是會在文件頭部加入BOM頭的，會導致在服務器上輸出得很奇怪。
國內的中文編碼是GBK，UTF-8是國際通用編碼，不統一的話也會導致亂碼。

第三條：一個源文件建議只用來做聲明（類(class)，函數(function)，常量(constant)等）或者只用來做一些引起副作用的操作（例如：輸出信息，修改.ini配置等）,但不建議同時做這兩件事。

不要在一個文件中又是定義函數又是修改系統配置的，一個文件只做一件事。

// 副作用：修改了ini配置
ini_set('error_reporting', E_ALL);
// 副作用：載入了文件
include "file.php";
// 副作用：產生了輸出
echo "<html>\n";
// 聲明 function
function foo()
{
    // 函數體
}

分開寫

// 聲明 function
function foo()
{
    // 函數體
}

// 副作用：修改了ini配置
ini_set('error_reporting', E_ALL);

// 副作用：載入了文件
include "file.php";

這樣就很整齊。

第四條：命名空間(namespace)和類(class) 必須遵守PSR-0標準

參見PSR-0標準

第五條：類名(class name) 必須使用駱駝式(StudlyCaps)寫法 (注：駝峰式(cameCase)的一種變種，后文將直接用StudlyCaps表示)。

類名必須使用駝峰命名，大駝峰小駝峰都可以。

<?php
class BigHouse{
}

第六條：類(class)中的常量必須只由大寫字母和下劃線(_)組成。

<?php
class Test{
    const USER_INFO='xx';
    const NAME='xx';
}

第七條：方法名(method name) 必須使用駝峰式(cameCase)寫法。

<?php
class Test{
    public function getUserInfo(){}
}

總結：雖然規范里沒有規定使用大駝峰還是小駝峰，不過我的開發習慣是class name大駝峰，method name小駝峰

3. PSR-2 規范

PSR-2用于約束代碼風格,代碼必須遵循PSR-1 中列出的所有規則。

1. 源文件

文件末尾必須空一行。
必須使用Unix LF(換行)作為行結束符。
純PHP代碼源文件的關閉標簽?>必須省略。

2. 行

行長不得有硬性限制。
行長度的軟限制必須是 120 個字符；自動樣式檢查器必須警告但不能在軟限制處出錯。
行不應超過 80 個字符；超過此長度的行應拆分為多行，每行不超過 80 個字符。
非空行的末尾不得有尾隨空格。
可以添加空行以提高可讀性并指示相關的代碼塊。
每行不得超過一個語句。

3. 縮進

代碼必須使用 4 個空格的縮進，并且不得使用制表符進行縮進。現代編輯器都可以設置。

注意：僅使用空格，而不是將空格與制表符混合使用，有助于避免差異、補丁、歷史記錄和注釋方面的問題。空格的使用還可以輕松插入細粒度的子縮進以進行行間對齊。

4. 關鍵字和 True/False/Null

PHP關鍵字必須小寫。
PHP 常量true、false和null必須小寫。

5. 命名空間的使用和聲明

命名空間(namespace)的聲明后面必須有一行空行。
所有的導入(use)聲明必須放在命名空間(namespace)聲明的下面。
一句聲明中，必須只有一個導入(use)關鍵字。
在導入(use)聲明代碼塊后面必須有一行空行。

<?php
namespace Vendor\Package;//下面必須空一行

use FooClass;//use放在namespace下面
use BarClass as Bar;
use OtherVendor\OtherPackage\BazClass;//use下面也要空一行

// ... additional PHP code ...

6. 類、屬性和方法

繼承(extends) 和實現(implement) 必須和 class name 寫在一行，切花括號要換行寫。

<?php
namespace Vendor\Package;

use FooClass;
use BarClass as Bar;
use OtherVendor\OtherPackage\BazClass;

//寫在一行
class ClassName extends ParentClass implements \ArrayAccess, \Countable
{//花括號換行寫
    // constants, properties, methods
}

implements有多個時可以寫成多行，但要保證第一個必須在下一行。每行只能寫一個接口，每行都要縮進。

<?php
namespace Vendor\Package;

use FooClass;
use BarClass as Bar;
use OtherVendor\OtherPackage\BazClass;

class ClassName extends ParentClass implements
    \ArrayAccess,//第一個接口就要寫在下一行，注意縮進
    \Countable,
    \Serializable
{
    // constants, properties, methods
}

屬性必須聲明可見性，public還是private還是protected，不能省略。也不能使用var, var是php老版本中的什么方式，等用于public。屬性名稱不應以單個下劃線為前綴來表示受保護或私有可見性。每個語句不能聲明多個屬性。

<?php
namespace Vendor\Package;

class ClassName
{
    public $foo=null;
}

方法(method) ,必須聲明其可見性，到底是 public 還是protected還是 private，不能省略。并且，花括號{必須換行寫。如果有多個參數，第一個參數后緊接, 再加個空格，如果參數有默認值，也要用左右空格分開。

<?php
namespace Vendor\Package;

class ClassName
{
    public function fooBarBaz($arg1, &$arg2, $arg3=[])
    {
        // method body
    }
}

參數列表可以分成多行，和接口多行一樣需要縮進。參數多行時做花括號不用換行寫，但是要在右括號后空一格。如下：

<?php
namespace Vendor\Package;

class ClassName
{
    public function aVeryLongMethodName(
        ClassTypeHint $arg1,
        &$arg2,
        array $arg3=[]
    ) {
        // method body
    }
}

當用到抽象(abstract)和終結(final)來做類聲明時，它們必須放在可見性聲明（public 還是protected還是 private）的前面。而當用到靜態(static)來做類聲明時，則必須放在可見性聲明的后面。

<?php
namespace Vendor\Package;

abstract class ClassName
{
    protected static $foo; //static修飾符放到可見性聲明后面

    abstract protected function zim();//abstract 放到前面

    final public static function bar()//final放到前面
    {
        // method body
    }
}

函數調用時，函數名稱與左括號之間不得有空格，左括號后不得有空格，右括號前不得有空格。在參數列表中，每個逗號前不得有空格，每個逗號后必須有一個空格。參數列表可以分成多行，其中每個后續行縮進一次。這樣做時，列表中的第一項必須在下一行，并且每行必須只有一個參數。

<?php
bar();
$foo->bar($arg1);
Foo::bar($arg2, $arg3);
$foo->bar(
    $longArgument,
    $longerArgument,
    $muchLongerArgument
);

7. 控制結構

控制結構就是if,switch這種流程控制。一般規則如下：
控制結構關鍵字后必須有一個空格
左括號后不能有空格
右括號前不能有空格
右括號和左大括號之間必須有一個空格
結構體必須縮進一次
右大括號必須在正文之后的下一行

1. if，elseif，else寫法：

<?php
if ($expr1) {
    // if body
} elseif ($expr2) {
    // elseif body
} else {
    // else body;
}

elseif應該連著寫不要寫成else if,要看著像一個單詞。

2. switch,case寫法：

<?php
switch ($expr) {//括號前后都要有空格
    case 0:
        echo 'First case, with a break';
        break;//break要和上一行對齊
    case 1:
        echo 'Second case, which falls through';
        //沒有break語句的要寫注釋no break
        // no break
    case 2:
    case 3:
    case 4:
        echo 'Third case, return instead of break';
        return;
    default:
        echo 'Default case';
        break;
}

3. while,do while

<?php
while ($expr) {
    // structure body
}

do {
    // structure body;
} while ($expr);

4. for,foreach

<?php
for ($i=0; $i < 10; $i++) {
    // for body
}

foreach ($iterable as $key=> $value) {
    // foreach body
}

5. try,catch

<?php
try {
    // try body
} catch (FirstExceptionType $e) {
    // catch body
} catch (OtherExceptionType $e) {
    // catch body
}

8.閉包

閉包必須在function關鍵字后用空格聲明，關鍵字前后用空格聲明use
左大括號必須在同一行上，右大括號必須在正文之后的下一行。
參數列表或變量列表的左括號后不得有空格，參數列表或變量列表的右括號前不得有空格。
在參數列表和變量列表中，每個逗號前不能有一個空格，每個逗號后必須有一個空格。
具有默認值的閉包參數必須放在參數列表的末尾。
參數列表和變量列表可以分成多行，其中每個后續行縮進一次。這樣做時，列表中的第一項必須在下一行，并且每行必須只有一個參數或變量
當輸入的參數列表（無論是參數還是use的變量）被分成多行時，右括號和左括號必須放在它們自己的一行上，它們之間有一個空格。
請注意，當該函數或方法直接將閉包用作參數時，格式化規則也適用。

<?php
$closureWithArgs=function ($arg1, $arg2) {
    // body
};

$closureWithArgsAndVars=function ($arg1, $arg2) use ($var1, $var2) {
    // body
};


//參數列表格式化
$longArgs_noVars=function (
    $longArgument,
    $longerArgument,
    $muchLongerArgument
) {
    // body
};

$noArgs_longVars=function () use (
    $longVar1,
    $longerVar2,
    $muchLongerVar3
) {
    // body
};

$longArgs_longVars=function (
    $longArgument,
    $longerArgument,
    $muchLongerArgument
) use (
    $longVar1,
    $longerVar2,
    $muchLongerVar3
) {
    // body
};

$longArgs_shortVars=function (
    $longArgument,
    $longerArgument,
    $muchLongerArgument
) use ($var1) {
    // body
};

$shortArgs_longVars=function ($arg) use (
    $longVar1,
    $longerVar2,
    $muchLongerVar3
) {
    // body
};

//閉包作為參數傳入
$foo->bar(
    $arg1,
    function ($arg2) use ($var1) {
        // body
    },
    $arg3
);

4. PSR-3規范

PSR-3規范是日志庫的通用接口，一般框架都幫我們做好了，了解即可。官網文檔

5. PSR-4規范

PSR-4也是自動加載規范，用來取代PSR-0的。

廢除了PSR-0中就是目錄分割符的寫法，下劃線在完全限定類名中是沒有特殊含義了。
類文件名要以 .php 結尾。
類名必須要和對應的文件名要一模一樣，大小寫也要一模一樣。

總結：

psr-0,psr-4是自動加載規范，psr-1,psr-2是代碼風格規范，psr-3是日志庫接口。
平常工作中盡量使用psr-1,psr-2規范來規范我們的代碼風格。

頁制作概述

HTML是WEB頁面的描述性語言
CSS則是為HTML制定樣式的機制
JavaScript是具有交互性Web設計最佳選擇
CSS和JavaScript 是都可以獨立編寫的文本文件，還有PHP都可以嵌入在HTML中應用

HTML基礎

HTML（Hypertext Marked Language）
文件的后綴名.html 或 .htm
Hypertext可以在文件中標識圖片、鏈接、表格、文本等。
Marked <或>以及字符串組成 <img>
是一種編程語言
瀏覽器解釋的語言

CSS基礎

CSS （Cascading style sheets）
是一種用來表現HTML樣式的語言
它不能獨立使用，沒有HTML就沒有CSS
定義網頁的外觀和布局（字體、背景、文本、位置、邊緣、列表及其它）
也是用瀏覽器解釋的語言

HTML語法

元素:是一整體，是一對象
<標記名> </標記名> 成對的標記，也稱為容器
標記中可以嵌套其它的標記
<hr />
<a href=“www.xsphp”>地址</a>
使用標記來描述元素的
HTML文檔就是由元素和標記組成的文件

HTML語法(二)

HTML標簽屬性
<tag> content</tag>
<tag><tag2>content</tag2></tag>
<tag />
<tag pro=“value” pro2=“value2”>
content
</tag>
屬性：在標記中使用［屬性=屬性值］
多個屬性使用空格分開
屬性的值（不管什么類型）可以使用單引號、雙引號、不加引號（使用雙引號）
屬性是對標記功能的擴展或形為的修飾，每個屬性幾乎都是可選。

HTML語法(三)

HTML標記和屬性名都是不區分大小寫的
HTML文檔注釋
在注釋中不能再有注釋
在注釋掉的標記之后，要保證還是一個結構完好的文檔

HTML語法(四)

HTML的代碼格式
任何回車或空格在源代碼中都不起作用
使用回車或空格進行代碼排版

HTML語法(五)

HTML字符實體
三部分:
以&開頭
一個實體名或是使用#號和一個體編號
以分號;結束
< < <
> > >

HTML語法(六)

HTML顏色的設置
設置顏色時可以是一個關鍵字或RGB的數字格式
White black blue ,gray green, red yellow
#FF (0-255)
#FF00BB(rgb) red green blue

在線咨詢

上一篇：一招搞定HTML中連續字母或數字不換行的問題
下一篇：這個網絡爬蟲代碼，拿到數據之后如何存到csv文件中去

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商