在實際工作中，我們應該經常會看到一些功能上沒有問題，但編碼風格和規範卻十分糟糕的代碼，這往往會讓人不敢再往下閱讀，甚至會影響閱讀者一天的心情。本文的目的在於幫助那些沒有養成良好的編碼風格，缺乏相應編碼規範意識的JavaScript學習者們改善他們的編碼形象。
前言
在實際工作中，我們應該經常看到一些功能上沒有問題，但編碼風格和規範卻十分糟糕的程式碼，這往往會讓人不敢再往下閱讀，甚至會影響閱讀者一天的心情。這些程式碼不但不容易閱讀，而且難以維護，它們通常會出自剛入門的程式新手，也會出自工作了好幾年的老程式設計師手下。因此本文的目的在於幫助那些沒有養成良好的編碼風格，缺乏相應編碼規範意識的JavaScript學習者們改善他們的編碼形象。
編碼形象
以上我提出了編碼形象的概念，我個人認為：
編碼形象= 編碼風格+ 編碼規範
一個良好的編碼形象就等於一個穿著得體的青年，對於程式設計師來說這是同行了解你優秀能力的最直接和最簡單的方式。
我們來看一段糟糕的編碼形象：
//打个招呼
function func(){
var age=18,sex='man';
var greeting='hello';
if(age<=18&&sex=='man'){
console.log(greeting+'little boy')
}
...
}
func()登入後複製
上方代碼整體縮在了一起，缺乏規範意識，閱讀體驗很差，不忍直視。
再來看一段好的程式碼形象：
// 打个招呼
function greetFn() {
var age = 18,
sex = 'man',
greeting = 'hello';
if (age <= 18 && sex === 'man') {
console.log(greeting + 'little boy');
}
...
};
greetFn();登入後複製
上方的程式碼是不是感覺舒服多了？
由此可見養成一個好的程式碼形像是至關重要的，而本文主要講解的是基於JavaScript的程式設計形象，也就是基於JavaScript的程式設計風格和程式設計規格。
那麼什麼是編碼風格，什麼是編碼規範，兩者的差異又是什麼？
編碼風格
首先編碼風格既然是風格，就沒有對錯。就好比每個人的穿著打扮不同，有的人穿的比較得體，有的人穿的比較隨意而已。
而在JavaScript編碼風格中，也有一套比較得體的風格，尤其在團隊開發中，我們不能隨意的書寫屬於自己的風格。
以下就列舉幾種隨意的程式設計風格，並將其與良好的程式設計風格進行對比。
1.合理註解
#
// 不推荐的写法
var name = '劳卜';//代码和注释之间没有间隔
if (name) {
/*
*注释之前无空行
*星号后面无空格
*/
}登入後複製
// 推荐的写法
var name = '劳卜'; // 代码和注释之间有间隔
if (name) {
/*
* 注释之前有空行
* 星号后面有空格
*/
}登入後複製
2.合理間隔
// 不推荐的写法
var name='劳卜'; // 等号和两侧之间没有间隔
// if块级语句间没有间隔
if(name){
console.log('hello');
}登入後複製
// 推荐的写法
var name = '劳卜'; // 等号和两侧之间有间隔
// if块级语句间有间隔
if (name) {
console.log('hello');
}登入後複製
3.合理縮排
#
// 不推荐的写法：没有合理缩进
function getName() {
console.log('劳卜');
}登入後複製
// 推荐的写法：合理缩进
function getName() {
console.log('劳卜');
}登入後複製
4.合理空行
#
// 不推荐的写法: 代码功能块之间没有空行
function getName() {
var name = '劳卜';
if (name) {
console.log('hello');
}
}登入後複製
// 推荐的写法：代码功能块之间有空行
function getName() {
var name = '劳卜';
if (name) {
console.log('hello');
}
}登入後複製
#5.合理地命名
// 不推荐的写法
var getName = '劳卜'; // 变量命名前缀为动词
// 函数命名前缀为名词
function name() {
console.log('hello');
}登入後複製
// 推荐的写法
var name = '劳卜'; // 变量命名前缀为名词
// 函数命名前缀为动词
function getName() {
console.log('hello');
}登入後複製
6.合理聲明
// 不推荐的写法：函数在声明之前使用
getName();
function getName() {
console.log('hello');
}登入後複製
// 推荐的写法：函数在声明之后使用
function getName() {
console.log('hello');
}
getName();登入後複製
7.合理結尾
// 不推荐的写法：没有使用分号结尾
var name = '劳卜'
var getName = function() {
console.log('hello')
}登入後複製
// 推荐的写法：使用分号结尾
var name = '劳卜';
var getName = function() {
console.log('hello');
};登入後複製
以上主要列舉了7個比較常見的編碼風格的例子進行了比較，在推薦的寫法和不推薦的寫法中兩者並沒有對錯之分，只是建議的寫法相比較而言更容易閱讀和維護，更適用於團隊開發，也是良好編碼形象的體現。
編碼規範
對於編碼規範，既然是規範，那我們就應該按照一定的規則來寫。隨意編寫違反編碼規範的程式碼，可能會導致程式的出錯和潛在的bug，因此其相對於編碼風格來說應該更加嚴謹，也有人會把編碼風格包含在編碼規範之中。
下面就列舉幾個常見的實例程式碼：
1.比較參數
// 不推荐的写法：==和!=比较时会进行类型转换，应尽量避免使用
var num = 123;
if (num == '123') {
console.log(num);
} else if (num != '321') {
console.log('321');
}登入後複製
// 推荐的写法：使用===和!==来进行比较
var num = 123;
if (num === '123') {
console.log(num);
} else if (num !== '321') {
console.log('321');
}登入後複製
2.包裹if語句
// 不推荐的写法：if语句不用大话号包裹会出现潜在bug
var num = 123;
if (num === '123')
console.log(num);
登入後複製
// 推荐的写法：if语句用大话号包裹
var num = 123;
if (num === '123') {
console.log(num);
}登入後複製
3.慎用eval
// 不推荐的写法：应避免使用eval，不安全，非常耗性能（一次解析成js语句，一次执行）
var json = '{"name": "劳卜", "func": alert("hello")}';
eval('(' + json + ')'); // 弹出“hello”登入後複製
// 推荐的写法
var json = '{"name": "劳卜", "func": alert("hello")}';
JSON.parse(json); // 校验报错登入後複製
#4 .判斷類型
// 不推荐的写法：用typeof来判断构造函数创建的对象
var str = new String('劳卜');
console.log(typeof str); // 'object'
登入後複製
// 推荐的写法：用instanceof来判断构造函数创建的对象
var str = new String('劳卜');
console.log(str instanceof String); // true
登入後複製
5.偵測屬性
// 不推荐的写法：使用undefined和null来检测一个属性是否存在
if (obj['name'] !== undefined) {
console.log('name属性存在'); // 若obj.name为undefined时则会导致判断出错
}
if (obj['name'] !== null) {
console.log('name属性存在'); // 若obj.name为null时则会导致判断出错
}登入後複製
// 推荐的写法：使用in运算符来检测对象属性是否存在，使用hasOwnProperty方法来检测不包含原型链上的对象属性是否存在
if ('name' in obj) {
console.log('name属性存在');
}
if (obj.hasOwnProperty('name')) {
console.log('name属性存在');
}登入後複製
以上主要列舉了5個常見的編碼規範的例子，合理地規範自己的程式碼能夠很大程度上減少不必要的維護成本和潛在的bug風險，對於JavaScript學習者來說應該銘記於心。
結語
「程式是寫給人讀的，只是偶爾讓電腦執行一下。」我們不能為了貪圖一時的方便而親手毀了自己的程式碼形象，這會給他人和整個專案帶來不必要的麻煩。
以上是讓你的JavaScript編碼更規範的詳細內容。更多資訊請關注PHP中文網其他相關文章！
