soon-tw / javascriptcodingstyle Goto Github PK

<tr>
 <td>2013.08.08</td> 
 <td>1.1</td>
 <td>
     * 1.7.5 新增物件屬性風格說明<br/> 
     * 1.7.6 新增陣列元素風格說明<br/> 
     * 增加4.3函式參數風格說明<br/>
 </td>
 <td>Hank Kuo</td>
</tr>

<tr>
 <td>2013.07.11</td> 
 <td>1.0</td>
 <td>
     * 1.3改為'建議' <br/> 
     * 增加1.6.3 全域變數說明 <br/> 
     * 1.7.2增加perseInt()使用規則說明<br/> 
     * 1.7.3增加簡易檢測變數與參數說明<br/>* 修改2.1多行注解規則<br/> 
     * 修改3.4 assign變數風格(=前後需空一格) <br/> 
     * 修改4.1變數宣告風格(每個變數都要有var) <br/> 
     * 新增4.1.1變數宣告位置說明<br/> * 4.2函式宣告新增匿名函式說明
 </td>
 <td>Hank Kuo</td>
</tr>

<tr>
 <td>2013.07.03</td> 
 <td>1.0 beta2</td>
 <td>
     * 文件改用markdown撰寫, 增加變數, 函式, 運算符, 錯誤處理, 類型檢測等風格
 </td>
 <td>Hank Kuo</td>
</tr>

<tr>
 <td>2012.12.06</td> 
 <td>1.0 beta1</td>
 <td>
     * 建立文件, 基本程式風格建立
 </td>
 <td>Mars Peng</td>
</tr>

// 原始程式碼
function getData() {
	return
	{
		title: 'Hiiir JavaScript Coding Style',
		author: 'Mars, Hank'
	}
}

// 分析器會轉譯成
function getData() {
	return;
	{
		title: 'Hiiir JavaScript Coding Style',
		author: Mars, Hank'
	};
}

callMyFunction(this, window, 'this is a string', 'another string', 123,
               myObject);

// ASI機制會在某些條件下在行結束的位置插入分號, 因此總是將一個運算符號置於行尾, 可避免ASI插入錯誤的分號
if (isYear && isDate && day == 30 && isOldYear && 
	isNoPlans) {
	
	doSomething();
}

var result = someValue + anotherValue + myValue + hisValue + herValue + 
             defaultValue;

function doSomething() {
    var myArr,
        anotherVal;
    
    if (myArr.length > 0) {
	
	    for (var i, len=myArr.length; i < len; i++) {
		
		    // 單行注解
	
		    /*
		     *多行注解
		     */
		
		    var logicSection = 10;
		    logicSection1 = logicSection + i;
		
		    logicSection2 = logicSection + i * 100;
	    }
    }
}

function doAnotherThing() {
	// doAnotherThing
}

var myData = 10;

function getPlusVal(val) {
	return val + val;
}

// const
var MAX_COUNT = 10;

if (count < MAX_COUNT) {
	doSomething();
}

// global
var g_myVariable = 100;

function Person(name) {
	this.name = name;
}

Person.prototype.sayName = function() {
	alert(this.name);
}

var me = new Person('Hank');

var myString = 'This is my long string,' +
               'it is just a example.'  
               
// 不好的做法: 使用建構函式
var myString = new String('Hank');
			  

// 好的寫法
var num = 10;

// 不好的寫法: 使用8進位寫法
var num = 010; 

// 不好的寫法: 使用建構函式
var num = new Number(10);

// 好的寫法,有加上基數參數,這行代表將字串'10'轉成10進位整數
var num = parseInt('10', 10);

// 不好的寫法,沒有加上基數參數
var num = parseInt('10');

// 整數
var count = 10;

// 浮點數
var price = 20.0;
var price = 20.00;

// 不好的做法: 使用建構函式
var price = new Number(20);

// 不好的做法: 浮點數沒有小數部分
var price = 20.;

// 不好的做法: 浮點數沒有整數部分
var price = .5;

// 布林値
var isBool = true;

// 不好的做法: 布林値字元有大寫
var isBool = True;

// 不好的做法: 使用建構函式
var isBool = new Boolean(true);

function doSomething(object) {
	...
}

// 好的寫法:當做一個未來可能成為物件的變數的初始值
var person = null;

// 好的寫法:當函式的期望參數是物件時, 可當作參數傳入
doSomething(null);

// 好的寫法:當函式的期望回傳值為物件時, 可當作回傳值傳出
function getPerson() {

	if (condition) {
		return new Person('hank');
	} 
	else {
		return null;
	}
}

// 不好的寫法: 用 null 來檢測是否傳入了某個參數
function doSomething(arg1, arg2) {

	if (arg2 !== null) {
		doSomething();
	}
}

// 不好的寫法: 用 null 來檢測未初始化的變數
var person;

if (person !== null) {
	doSomething();
}

var person;
var personNull = null;
var personZero = 0;

if (person) { // false
	doSomething();
}

if (personNull) { // false
	doSomething();
}

if (personZero) {	// false
	doSomething();
}

// 使用foo會有錯誤, 因為foo尚未聲明
var person;
alert(typeof person); // "undefined" 
alert(typeof foo);    // "undefined"

// 請用null作為可能成為物件的變數的初始值, 不要用undefined
var person = null;

// 不好的寫法
var person2 = undefined;

// null跟undefined的typeof回傳值不同, 這樣兩者就可以區分開了
alert(typeof person);  // "object"
alert(typeof person2); // "undefined"

// 好的寫法: 物件實字寫法
var person = {
	name: 'hank',
	age: 28,
	skills: 'php, javascript'
};

// 不好的寫法: 物件屬性冒號後沒空一格
var person = {
	name:'hank',
	age:28,
};

// 不好的寫法: 使用Object()
var person = new Object();
person.name = 'hank';
person.age = '28';
person.skills = 'php, javascript';

// 好的寫法: 使用陣列實字建立陣列
var colors = ['red', 'blue', 'yellow', 'green'];

// 不好的寫法: 使用Array()建立陣列
var colors = new Array('red', 'blue', 'yellow', 'green');

// 不好的寫法: 陣列各元素逗號後面沒空一格
var colors = ['red','blue','yellow','green'];

if (condition) {
	
	// 獨佔一行的注解, 在注解之前要有一個空行, 並跟下一行程式碼對齊
	doSomething();
}

if (condition) {
	doSomething(); // 在程式碼尾部的注解, 需和程式碼之間空一格(space)
}

if (condition) {

	/*
	 * 多行注解之前要有一個空行,並跟下一行程式碼對齊,
	 * 程式碼尾部的注解,不要用多行注解
	 */
	doSomething();
	
	
/* 
 * 可用來`注解掉大段程式碼`, 
 * 或用來寫`程式碼說明`
 */
 
 /*
 if (condition) {
 	doSomething();
 }
 */

// 改這個值, 系統就爆炸了(注解提供額外訊息)
var count = 10;

// 當程式碼難以理解時
/*
 * 當兩個時間差小於1小時, 就顯示差了分鐘,
 * 當兩個時間差小於1天, 就顯示差了幾小時,
 * 當兩個時間差小於1週, 就顯示差了幾天,
 * 如果這些條件都不成立, 就直接顯示日期
 */
if (diff < ONE_HOUR) {
  output = Math.floor(diff / ONE_MIN) + ' m';
} 
else if (diff < ONE_DAY) {
   output = Math.floor(diff / ONE_HOUR) + ' hr';
} 
else if (diff < ONE_WEEK) {
   output = Math.floor(diff / ONE_DAY) + ' day';
} 
else {
   output = dateSplit[0][0] + '-' + dateSplit[0][1] + '-' + dateSplit[0][2];
}

// 當程式碼可能被誤認為是錯誤時
while (element && (element = element[axis])) { // 這邊是賦値操作無誤
	
	if ((all || element[TAG_NAME]) && (!fn || fn(element)) {
		return element;
	}
}

// TODO: 區域函式add尚未完成,請實作
var myToolKit = {
	add: function(val1, val2) {
	
	}
};

/*
 * HACK: 這邊有針對IE8做特別處理,不然會破版
 * 計劃等IE8淘汰過後移除該部分
 */
function myFunc() {
	// 程式碼
} 

// XXX: 這個函式根本是壞的!
function myFunc() {
	// 程式碼
}

// FIXME: 如果輸入null會回傳錯誤,請修復
function myFunc() {
	// 程式碼
}

// REVIEW: 我覺得應該有更好的做法
function myFunc() {
	// 程式碼
}

if (codition) {
	doSomething();
} else if(condition) {
	doSomethingElse();
} else { 
	doSomethingElseElse();
}

switch (condition) {
	case 1:
		doSomething();
		break;
		
	case 2:
	case 3:
		doSomething();
		break;
		
	case 4:
		doSomething();
		/* fall through */
		
	case 5: {
		let myVar = 'hello';
		doSomething(myVar);
		break;
	}
		
	default:
		break;
}

var values = [1, 2, 3, 4, 5, 6, 7];
var	i;
var	len;
	
for (i = 0, len = values.length; i < len; i++) {
	
	if (i != 2) {
		doSomething(i);
	}
}

// 同等於

for (i = 0; len = values.length; i < len; i++) {
	
	if (i == 2) {
		continue;
	}
	doSomething(i);
}

var person = {
		name: 'hank',
		age: 28	
	},
	prop;

// 總是使用 `hasOwnProperty()` 來為 for-in 過濾出物件屬性, 除非想查找原型(protoype)屬性
for (prop in person) {
	
	if (person.hasOwnProperty(prop)) {
		alert('Property name is ' + prop);
		alert('Property value is ' + person[prop]);
	}
}

// 若要查找原型(prototype)屬性, 必需要加上注解說明
for (prop in person) { // 包含對prototype的遍歷
	alert('Property name is ' + prop);
	alert('Property value is ' + person[prop]);
}

// 禁止使用 for-in 來遍歷陣列(Array)
var values = [1, 2, 3, 4, 5];
var	i;
	
for (i in values) {
	doSomething(i);
} 

var g_someValue = 100;

function doSomething() {
	var values = [1, 2, 3, 4, 5, 6, 7];
	var baseValue = 10;
	var result = value + value;
	var i;
	var len;
		
	for (i = 0, len = values.length; i < len; i++) {
		result += i;
	}
}

function doSomething() {

	// 變數可給程式碼區塊 1, 2, 3 使用
	var myVar1 = 1;
	var myVar2 = 2;
	var sum1;
	
	// 程式碼區塊 1
	sum1 = myVar1 + myVar2;
	
	
	// 變數可給程式碼區塊 2, 3 使用
	var myVar3 = 3;
	var myVar4 = 4;
	var sum2;

	// 程式碼區塊 2
	sum2 = myVar1 + myVar2 + myVar3;
	
	
	// 變數可給程式碼區塊 3 使用
	var myVar5 = 5;
	var myVar6 = 6;
	var sum3;
	
	// 程式碼區塊 3
	sum3 = myVar1 + myVar3 + myVar5 + myVar6;
}

// 函式宣告
function doSomething(arr, someVal, isFunc) {
	var value = 10,
	var	i;
	var	len;

	// 局部函式要緊接著變數宣告之後宣告, 並且使用函式表達式
	var doSomethingElse = function(obj) {
		
		// 程式碼邏輯
	}
	
	for (i = 0, len = arr.length; i < len; i++) {
		doSomethingElse(arr[i]);
	}
}

// 函式表達式
var doSomething = function(arr, someVal, isFunc) {
	// 程式碼邏輯	
}

// 立即函式宣告
var value = (function(value) {
	return inputValue + 10;
}(inputValue));

// 匿名函式
setTimeout(function() {
	doSomething();
}, 100);

// 匿名立即函式(宣告並立即執行)
(function(value) {
	doSomething();
}(inputValue));

// 不好的寫法: 函數名稱與左括號之間有空格
var myFunc = function() {
	doSomething();
}

// 不好的寫法: 不要在條件判斷語句中宣告函式
if (condition) {
	function doSomething() {
		alert('hello');
	}
} 
else {
	function doSomething() {
		alert('Yeh!');
	}
}

// 好的寫法: callback function 放在參數列的最後面
myFunc(val1, val2, function() {
	doSomething();
});

// 好的寫法: 參數有兩個以上callback function, 使用函式表達式
var callback1 = function() {
	doSomething1();
}
var callback2 = function() {
	doSomething2();
}
myFunc(val1, val2, callback1, callback2);

// 好的寫法: 若有大量參數需傳遞給函式, 或是參數數量可能會有多次變動, 使用物件封裝參數
var myFunc = function(profile) {
	alert(profile.name);
	alert(profile.gender);
	alert(profile.phone);
	alert(profile.age);
	alert(profile.job);
}

myFunc({
	name: 'hank',
	gender: 'male',
	phone: '0227119900'
	age: 28,
	job: engineer
});

// 不好的寫法: callback function 沒放在參數列的最後面
myFunc(function() {
	doSomething();
}, val1, val2);

// 不好的寫法: 參數有兩個以上 callback function, 使用匿名函式
myFunc(val1, val2, function() {
	doSomething1();
}, function() {
	doSomething2();
}); 

// 不好的寫法, 大量參數沒用物件封裝
var myFunc = function(name, gender, phone, age, job) {
	doSomething();
}

// 好的寫法
setInterval(function(){
	alert('Hello');
}, 500);

// 不好的寫法: 內容使用字串
setTimeout('alert("Hello");', 500);

// 不好的寫法: 使用建構式
var func = new Function('alert("Hello!");');

// 好的寫法
function doSomething() {
	'use strict'
	// 程式碼邏輯
}

// 好的寫法
(function() {
	'use strict'
	function doSomething() {
		// 程式碼邏輯
	}
	
	function doSomethingElse() {
		// 程式碼邏輯
	}
}());

// 不好的寫法 
'use strict'
function doSomething() {
	// 程式碼邏輯
}

// 好的寫法
var flag = (i < count);

// 不好的寫法
var flag = i < count;

var checkValue = 2;
var myValue = '2';

// 使用==或!=會自動將字串'2'轉為數字2
if (checkValue == myValue) { // true
	...
}

if (checkValue === myValue) { // false
	...
}

// 好的寫法
var value = condition ? value1 : value2;

// 不好的寫法
condition ? myFun1() : myFun2();

new eval(); // EvalError,FireFox 4+和IE8會拋出TypeError

var items = Array(-100); // RangeError

var obj = myObj; // ReferenceError

eval('a ++ b'); // SyntaxError

var a = new '1234'; // TypeError
alert('name' in true); //TypeError
Function.prototype.toString.call('name') //TypeError

function CustomError(message) {
	this.name = 'myCustomError';
	this.message = message;
}
CustomError.prototype = new Error();


function doSomething(obj) {
	
	if (obj === null) {
		throw new CustomError('Oops!');
	}
}

try {
	doSomething(null);
} 
catch(error) {
	alert(error.name + ' ' + error.message); // myCustomError Oops!
}

// 好的寫法
throw new Error('Something went wrong!');

// 不好的寫法
throw new 'Something went wrong!';
throw true;
throw 123;
throw new Date();

// 好的寫法
try {
	doSomething();
} 
catch(error) {
	handleError(ex);
}

// 好的寫法
try {
	// 程式碼
} 
catch(error) {
	// 捕捉錯誤
} 
finally {
	// 無論try區塊有無錯誤發生,finally區塊總是會被執行
}

// 不好的寫法: catch區塊留空
try {
	doSomething();
} 
catch(error) {

}

// try-catch, throw應用範例
function getLastElement(array) {
	
	if (array.length > 0) {
		return array[array.length - 1];
	} 
	else {
		throw new Error('Cannot not take the last element of an empty array.');
	}
}

try {
	getLastElement([]);
} 
catch(error) {
	alert(error.message);
}

var myString = 'hello world!';
var	myNumber = 10;
var	myBoolean = true;
var	myNull = null;

// String	
if (typeof myString === 'string') {
	doSomething();
}

// Number
if (typeof myNumber === 'number') {
	doSomething();
}

// Boolean
if (typeof myBoolean === 'boolean' && myBoolean) {
	doSomething();
}

// undefined
if (typeof myUndefined === 'undefined') {
	doSomething();
}

// null
if (myNull === null) {
	doSomething();
}

var myDate = new Date();
var myError = new Error('help!');
var	myPerson = new Person('Hank');
	
function Person(name) {
	this.name = name;
}

// 好的做法
if (myDate instanceof Date) { // true
	doSomething();
}

// 好的做法
if (myError instanceof Error) { // true
	doSomething();
}

// 好的做法
if (myPerson instanceof Person) { // true
	doSomething();
}

// 不好的做法: 用 Object 檢測物件
if (myPerson instanceof Object) { // true

}

function myFunc() {
	// 程式碼
}

if (typeof myFunc === 'function') { // true
	doSomething();
}

// IE8以下瀏覽器DOM函式檢測方法
if ('getElementById' in document) {
	doSomething();
}

var myArr = [1, 2, 3, 4, 5];

// Kangax 解決方案
function isArray(value) {
	return Object.prototype.toString.call(value) === '[object Array]';
}

if (isArray[myArr]) {
	doSomething();
}

var person = {
	name: 'hank',
	age: 28
};

// 用 in 來檢測
if ('name' in person) {
	doSomething();
}

// 對於非 DOM 物件的屬性檢測方法
if (person.hasOwnProperty('name')) {
	doSomething();
}

// 如果不確定是否為 DOM 物件
if ('hasOwnProperty' in person && person.hasOwnProperty('name')) {
	doSomething();
}

// 在'use strict'以下的所有程式碼都會套用 Strict 模式
'use strict';
function testFunction(){
    var testvar = 4;
    return testvar;
}

// ReferenceError: assignment to undeclared variable testvar
testvar = 5;

/* 
  只有 testFunction 內的程式碼才會套用 Strict 模式. 
  函式以外的變數宣告不會導致語法錯誤, 但是函式中的宣告則會.
*/
function testFunction(){
    'use strict';
    
    // ReferenceError: assignment to undeclared variable testvar
    testvar = 4;
    return testvar;
}
testvar = 5;

'use strict';

// ReferenceError: assignment to undeclared variable testvar
testvar = 4;

'use strict';

var testObj = Object.defineProperties({}, {
    prop1: {
        value: 10,
        writable: false // by default
    },
    prop2: {
        get: function () {
        }
    }
});

// TypeError: "prop1" is read-only
testObj.prop1 = 20; 
testObj.prop2 = 30;

'use strict';

var testObj = new Object();

Object.preventExtensions(testObj);

// TypeError: ({}) is not extensible
testObj.name = "Bob";

var testvar = 15;
function testFunc() {};

// SyntaxError: applying the 'delete' operator to an unqualified name is deprecated
delete testvar;
delete testFunc;

Object.defineProperty(testObj, "testvar", {
    value: 10,
	configurable: false
});

// TypeError: property "testvar" is non-configurable and can't be deleted
delete testObj.testvar;

'use strict';

// SyntaxError: property name prop1 appears more than once in object literal
var testObj = {
    prop1: 10,
    prop2: 15,
    prop1: 20
};

'use strict';

// SyntaxError: duplicate formal argument param1
function testFunc(param1, param1) {
    return 1;
};

'use strict';

// SyntaxError: implements is a reserved identifier
var implements = 10;

'use strict';

// SyntaxError: octal literals and octal escape sequences are deprecated
var testoctal = 010;

// SyntaxError: illegal character
var testescape = \010;

'use strict';

function testFunc() {
    return this;
}
var testvar = testFunc();

alert(testvar); // undefined, 若非嚴格模式在瀏覽器執行則是[object Window])

'use strict';

// SyntaxError: redefining eval is deprecated
var eval = 10;

'use strict';

// ReferenceError: assignment to undeclared variable testvar
eval("var testvar = 10");
testvar = 15;

'use strict';

var arr = [1, 2, 3, 4, 5];
var index = null;

for (index in arr) {

	// SyntaxError: in strict mode code, functions may be declared only at top level or 
	   immediately within another function
    function myFunc() {};
}

'use strict';

// SyntaxError: redefining arguments is deprecated
var arguments = 10;

'use strict';

function test(testInt) {
    
    if (testInt-- == 0) {
        return;
    }
    
    // TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on 
       strict mode functions or the arguments objects for calls to them
    arguments.callee(testInt--);
}

'use strict';

// SyntaxError: strict mode code may not contain 'with' statements
with (Math) {
    x = cos(3);
    y = tan(7);
}