前端經典程式碼
1、首次給變數賦值是切記使用var關鍵字(閒談:清楚的記得有次去面試前端,一個專案經理同時面我和另外一個人,面試官開始就是要我們倆手寫一個數組去重函式,嘩嘩的一下寫完交了,面試官看來下之後直接給了一旁的競爭對手,叫她給我指出我程式碼的錯誤,才知道剛才忘記寫var宣告變數,瞬間臉紅走了)=。=~~
迴歸正題:變數沒有宣告直接賦值的話,預設會作為一個全域性變數(一切無主的都是window的),要儘量避免全域性變數。
注意:在嚴格模式下(use strict)不宣告將會報錯。
2、使用“===”代替"==",即全等代替等等。
原因:==和=!操作符存在隱式轉換,導致”==“速度要慢,儘量能用全等就用全等。
面試題:console.log([] == false);輸出什麼。輸出true,兩邊隱式轉換轉成了(0==0);
console.log([]===false)輸出false
3.underfined、null、0、false、NaN、" "(控制字串)的邏輯結果均為false。
可以利用這一特性減少程式碼如:if(data!=0){console.log(data)};
可以直接寫成if(data){console.log(data)};
有些童鞋可能精簡成 data&&console.log(data);
效果都一樣,只是程式碼量減少一些,不過還是要注意些程式碼風格,有些公司是有要求的。。
(好的程式碼像詩,壞的程式碼像屎)、、咳咳~~
4、行尾使用分號。
實踐中最好還是使用分號,忘記寫也沒事,大部分情況下JavaScript直譯器都會自動新增。
影響:
return
{a=1}
如果不加“;”,js解析器會給你變成
return;
{a=1};
這時你就只能哭了。。
建議:保持良好的編碼習慣,可以使用WebStorm這樣強大的帶檢錯的編輯器;
5、使用物件構造器
[javascript] view plain copy- function person(firstName,lastName){
- this.firstName = firstName;
- this.lastName = lastName;
- }
- var saad = new person('susan','bigDou');
6、小心使用typeof、instanceof、contructor
typeof:Javascript一元操作符,用於以字串的形式返回變數的原始型別,注意,typeof null,大多數的物件型別(陣列Array,時間Date等)都返回object,檢測是不是陣列請看:
contructor:內部原型屬性
instanceof:JavaScript操作符,會在原型中的構造器中搜索,找到則返回true,否則返回false
[javascript] view plain copy- var arr = ["a", "b", "c"];
- typeof arr; // 返回 "object"
- arr instanceof Array // true
- arr.constructor(); //[]
函式在建立之後直接自動執行,同化成那個稱之為自調匿名函式,或者直接呼叫函式表示式。程式碼如下:
[javascript] view plain copy- (function(){
- // 置於此處的程式碼將自動執行
- })();
- (function(a,b){
- var result = a+b;
- return result;
- })(10,20)
- var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
- var randomItem = items[Math.floor(Math.random() * items.length)];
這個功能在生成測試用的假資料時特別有數,比如介與指定範圍內的工資數。
[javascript] view plain copy- var x = Math.floor(Math.random() * (max - min + 1)) + min;
10、生成從0到指定值得數字陣列
[javascript] view plain copy- var numbersArray = [] , max = 100;
- for( var i=1; numbersArray.push(i++) < max;); // numbers = [1,2,3 ... 100]
11、生成隨機的字母數字字串
[javascript] view plain copy- function generateRandomAlphaNum(len) {
- var rdmString = "";
- for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
- return rdmString.substr(0, len);
- }
- var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
- numbers = numbers.sort(function(){ return Math.random() - 0.5});
- /* numbers 陣列將類似於 [120, 5, 228, -215, 400, 458, -85411, 122205] */
13、字串去空格
Java、C#和PHP等語言都實現了專門的字串去空格函式,但JavaScript中是沒有的,可以通過下面的程式碼來為String物件函式一個trim函式:
- String.prototype.trim = function(){returnthis.replace(/^\s+|\s+$/g,"");};
14、陣列之間的追加
[javascript] view plain copy- var array1 = [12 , "foo" , {name "Joe"} , -2458];
- var array2 = ["Doe" , 555 , 100];
- Array.prototype.push.apply(array1, array2);
- /* array1 值為 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */
- var argArray = Array.prototype.slice.call(arguments);
- function isNumber(n){
- return !isNaN(parseFloat(n)) && isFinite(n);
- }
- function isArray(obj){
- return Object.prototype.toString.call(obj) === '[object Array]' ;
- }
- var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
- var maxInNumbers = Math.max.apply(Math, numbers);
- var minInNumbers = Math.min.apply(Math, numbers);
19、清空陣列[javascript] view plain copy
- var myArray = [12 , 222 , 1000 ];
- myArray.length = 0; // myArray will be equal to [].
如果對陣列元素直接使用delete,其實並沒有刪除,只是將元素置為了undefined。陣列元素刪除應使用splice。
切忌:
- var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
- items.length; // return 11
- delete items[3]; // return true
- items.length; // return 11
- /* items 結果為 [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
- var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
- items.length; // return 11
- items.splice(3,1) ;
- items.length; // return 10
- /* items 結果為 [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]
21、使用length屬性截斷陣列
前面的例子中用length屬性清空陣列,同樣還可用它來截斷陣列:
[javascript] view plain copy- var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];
- myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].
- myArray.length = 10; // the new array length is 10
- myArray[myArray.length - 1] ; // undefined
- var foo = 10;
- foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething();
- foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();
- function doSomething(arg1){
- arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
- }
- var squares = [1,2,3,4].map(function (val) {
- return val * val;
- });
- // squares will be equal to [1, 4, 9, 16]
- var num =2.443242342;
- num = num.toFixed(4); // num will be equal to 2.4432
25、浮點計算問題[javascript] view plain copy
- 0.1 + 0.2 === 0.3 // is false
- 9007199254740992 + 1 // is equal to 9007199254740992
- 9007199254740992 + 2 // is equal to 9007199254740994
碼的.
可以通過使用toFixed()和toPrecision()來解決這個問題。
26、通過for-in迴圈檢查物件的屬性
下面這樣的用法,可以防止迭代的時候進入到物件的原型屬性中。
[javascript] view plain copy- for (var name in object) {
- if (object.hasOwnProperty(name)) {
- // do something with name
- }
- }
- var a = 0;
- var b = ( a++, 99 );
- console.log(a); // a will be equal to 1
- console.log(b); // b is equal to 99
28、臨時儲存用於計算和查詢的變數
在jQuery選擇器中,可以臨時儲存整個DOM元素。
- var navright = document.querySelector('#right');
- var navleft = document.querySelector('#left');
- var navup = document.querySelector('#up');
- var navdown = document.querySelector('#down');
isFinite (number)是JavaScript內建函式,用於判斷number物件是否可以轉換成一個有限的數字
- isFinite(0/0) ; // false
- isFinite("foo"); // false
- isFinite("10"); // true
- isFinite(10); // true
- isFinite(undefined); // false
- isFinite(); // false
- isFinite(null); // true,這點當特別注意
- var numbersArray = [1,2,3,4,5];
- var from = numbersArray.indexOf("foo") ; // from is equal to -1
- numbersArray.splice(from,2); // will return [5]
31、用JSON來序列化與反序列化
- var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
- var stringFromPerson = JSON.stringify(person);
- /* stringFromPerson 結果為 "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
- var personFromString = JSON.parse(stringFromPerson);
- /* personFromString 的值與 person 物件相同 */
eval()和函式構造器(Function consturctor)的開銷較大,每次呼叫,JavaScript引擎都要將原始碼轉換為可執行的程式碼。
[javascript] view plain copy- var func1 = new Function(functionCode);
- var func2 = eval(functionCode);
使用with()可以把變數加入到全域性作用域中,因此,如果有其它的同名變數,一來容易混淆,二來值也會被覆蓋。
34、不要對陣列使用for-in
避免:
[javascript] view plain copy- var sum = 0;
- for (var i in arrayNumbers) {
- sum += arrayNumbers[i];
- }
- var sum = 0;
- for (var i = 0, <span style="color:#cc0000;">len = arrayNumbers.length; i < len</span>; i++) {
- sum += arrayNumbers[i];
- }
[javascript] view plain copy
- for (var i = 0; i < arrayNumbers.length; i++)
如果傳給setTimeout()和setInterval()一個字串,他們將會用類似於eval方式進行轉換,這肯定會要慢些,因此不要使用:
- setInterval('doSomethingPeriodically()', 1000);
- setTimeout('doSomethingAfterFiveSeconds()', 5000);
- setInterval(doSomethingPeriodically, 1000);
- setTimeout(doSomethingAfterFiveSeconds, 5000);
當判斷有超過兩個分支的時候使用switch/case要更快一些,而且也更優雅,更利於程式碼的組織,當然,如果有超過10個分支,就不要使用switch/case了。
37、在switch/case中使用數字區間
其實,switch/case中的case條件,還可以這樣寫:
[javascript] view plain copy- function getCategory(age) {
- var category = "";
- switch (true) {
- case isNaN(age):
- category = "not an age";
- break;
- case (age >= 50):
- category = "Old";
- break;
- case (age <= 20):
- category = "Baby";
- break;
- default:
- category = "Young";
- break;
- };
- return category;
- }
- getCategory(5); // 將返回 "Baby"
下面這樣,便可以給定物件作為引數,來建立以此為原型的新物件:
[javascript] view plain copy- function clone(object) {
- function OneShotConstructor(){};
- OneShotConstructor.prototype = object;
- returnnew OneShotConstructor();
- }
- clone(Array).prototype ; // []
- function escapeHTML(text) {
- var replacements= {"<": "<", ">": ">","&": "&", "\"": """};
- return text.replace(/[<>&"]/g, function(character) {
- return replacements[character];
- });
- }
try-catch-finally中catch部分在執行時會將異常賦給一個變數,這個變數會被構建成一個執行時作用域內的新的變數。
切忌:
[javascript] view plain copy- var object = ['foo', 'bar'], i;
- for (i = 0, len = object.length; i <len; i++) {
- try {
- // do something that throws an exception
- }
- catch (e) {
- // handle exception
- }
- }
- var object = ['foo', 'bar'], i;
- try {
- for (i = 0, len = object.length; i <len; i++) {
- // do something that throws an exception
- }
- }
- catch (e) {
- // handle exception
- }
XMLHttpRequests在執行時,當長時間沒有響應(如出現網路問題等)時,應該中止掉連線,可以通過setTimeout()來完成這個工作:
- var xhr = new XMLHttpRequest ();
- xhr.onreadystatechange = function () {
- if (this.readyState == 4) {
- clearTimeout(timeout);
- // do something with response data
- }
- }
- var timeout = setTimeout( function () {
- xhr.abort(); // call error callback
- }, 60*1000 /* timeout after a minute */ );
- xhr.open('GET', url, true);
- xhr.send();
42、處理WebSocket的超時
通常情況下,WebSocket連線建立後,如果30秒內沒有任何活動,伺服器端會對連線進行超時處理,防火牆也可以對單位週期沒有活動的連線進行超時處理。
為了防止這種情況的發生,可以每隔一定時間,往伺服器傳送一條空的訊息。可以通過下面這兩個函式來實現這個需求,一個用於使連線保持活動狀態,另一個專門用於結束這個狀態。
- var timerID = 0;
- function keepAlive() {
- var timeout = 15000;
- if (webSocket.readyState == webSocket.OPEN) {
- webSocket.send('');
- }
- timerId = setTimeout(keepAlive, timeout);
- }
- function cancelKeepAlive() {
- if (timerId) {
- cancelTimeout(timerId);
- }
- }
keepAlive()函式可以放在WebSocket連線的onOpen()方法的最後面,cancelKeepAlive()放在onClose()方法的最末尾。
43、時刻注意原始操作符比函式呼叫快,使用VanillaJS
比如,一般不要這樣:
[javascript] view plain copy- var min = Math.min(a,b);
- A.push(v);
[javascript] view plain copy
- var min = a < b ? a : b;
- A[A.length] = v;
不多,測試環境chrome,大家也可以自己測試下
44、開發時注意程式碼結構,上線前檢查並壓縮JavaScript程式碼
可以使用JSLint或JSMin等工具來檢查並壓縮程式碼。
45、JavaScript博大精深,這裡有些不錯的學習資源
Code Academy資源:http://www.codecademy.com/tracks/javascript
Marjin Haverbekex編寫的Eloquent JavaScript:http://eloquentjavascript.net/
John Resig編寫的Advanced JavaScript:http://ejohn.org/apps/learn/