iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

邁向 JavaScript 核心之路 系列 第 11

[Day 11] JavaScript 寫作風格

  • 分享至 

  • xImage
  •  

今天來讓我們講講寫作風格吧,什麼叫做寫作風格呢?

指的是我們在撰寫程式時的樣式規則,也就是所謂的寫作習慣,每個人當然都會有自己的習慣,但當多人協作時,好的寫作習慣絕對是有益於團隊合作的,尤其對於 JavaScript 這樣自由度很高的程式語言,能使用程式清晰易讀、減少出錯、可以清楚表達你的意圖的風格,尤其重要。

今天會針對這幾點來做介紹

  • 大括號排版
  • 空格
  • 分號
  • 等號
  • 變數宣吿
  • 全域變數
  • 命名方式
  • 自增和自減

就讓我們開始吧!

大括號排版

大括號建議不要另起新的一行,因為 JavaScript 會在 return 後自動加上分號

    // Good
    
    function run() {
        return {
            abc: 123
        }
    }
    console.log(run()); // {abc: 123}
    
    // Bad
    
    function run() {
        return 
        {
            abc: 123
        }
    }
    console.log(run()); // undefined

空格

對於空格並沒有特別的規範,所以依照各團隊習慣為主,在此建議函式與括號都不使用空格,其餘空一格,閱讀上會較為舒適。

    // Good
    
    var a = 0;
    if(a === 0) {}
    function foo(b) {
        return (a + b);
    }
    (function(x) {
        foo(x);
    })();
    
    // Bad 
    
    var a=0;
    if(a===0){}
    function foo(b){
        return (a+b);
    }
    (function (x) {
        foo (x);
    })();
    

分號

若下一行的第一個字元是 (、[、/、+、- ,則不會自動加上分號,所以請不要省略分號。


    // Good 
    
    var a = 1;
    (function() {
        return "xxx";
    })();
    
    // Bad ( 1 is not a function ) 
    
    var a = 1
    (function () {
        return "xxx"
    })()
    

等號

如果可以,盡量不要使用兩個等號的判斷 ==,因為在進行比較時會自動轉換型別,應該使用較為嚴謹的三等號 ===,避免因為自動轉型造成判斷上的不明確。


    // Good
    
    console.log(0 === ""); // false
    console.log(1 === true); // false
    console.log(2 === true); // false
    console.log(0 === "0"); // false
    console.log(false === "false"); // false
    console.log(false === "0"); // false
    
    // Bad
    
    console.log(0 == ""); // true
    console.log(1 == true); // true
    console.log(2 == true); // false
    console.log(0 == "0"); // true
    console.log(false == "false"); // false
    console.log(false == "0"); // true
    

使用 == 判斷時,等號兩邊的值會先自動轉型,再進行比較。

變數宣告

變數的宣告一律都放在函式的最前方,可以避免 Hoisting 問題。

    // Good 
    
    var o;
    if(!o) {
        o = {};
    }
    
    // Bad
    
    if (!o) {
        var o = {};
    }

全域變數

盡量變免全域變數的使用,改使用立即函式,若真的無法避免,在變數名稱前加上底線來作為區隔。


    // Good
    
    (function() {
        var _upperCase;
    })();
    

命名方式

避免忘記 new,建構函式的命名字首應該大寫。


    // Good
    
    function MyObject() {
        this.x = 100;
    }
    
    var q = new MyObject();
    
    // Bad 
    
    function myObject() {
        this.x = 100;
    }
    
    var q = myObject();
    

變數中唯二能使用的符號為底線 _ 和 錢字號 $,其餘都必須是字母或者數字,這邊要記得一點,無法使用數字作為開頭命名,保留字的部分也無法做使用。ex. switch、if、else 等等

以下提供命名的規則供大家參考

  • 變數使用駝峰式命名 ( Camel Case )
    第一個單字字首小寫,第二個單字字首大寫,ex. object、myObject。
  • 類別使用巴斯卡命名 ( Pascal Case )
    每個單字字首皆為大寫,ex. Server、MyObject。
  • 常數使用全大寫
    每個單字使用底線作為連接, ex. PI = 3.14、MAX_WIDTH = 1024。
  • 私有變數使用底線作為開頭
    不公開做使用的變數通常前方會加上 _, ex. _width、_user
  • 系統內部使用前後雙底線
    ex: __ proto __

自增與自減

i++ 為先顯示變數再做累加, ++i 則為先進行累加再做顯示。


    var i = 0;
    console.log(i++); //0
    console.log(i); // 1
    
    var a = 0;
    console.log(++a); //1
    console.log(a); // 1
    

最近天氣變得好冷,好容易想睡覺啊 ...

參考資料:

Tommy - 深入 JavaScript 核心課程
阮一峰 - Javascript 編程風格
型別判斷結果


上一篇
[Day 10] JavaScript 語法特性 - 嚴格模式
下一篇
[Day 12] JavaScript 物件導向- 基本介紹
系列文
邁向 JavaScript 核心之路 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言