2014年7月16日 星期三

【javascript】var 與 不var的差別

先前看到有人在一個論壇上po了這個問題


請問:有var跟沒var應用上的差別?謝謝
菜鳥提問:
一.
var one = function () {
    return "one";
};


二.
function one () {
    return "one";
};


請問使用上一跟二,會有什麼差別呢
菜鳥再此感謝


------------------------------------------

心寫來潮寫了這篇文章



從他的提問,結果上來說是沒有分別的,但實際上還是有分別:

先簡單說一下javascript的預編譯。
當瀏覽器載入js之後,會先對js的程式做一下預編譯
當你程式是這樣:
if("a" in window){
    var a = 123;
}
alert(a);


你猜猜結果會是什麼?


結果會alert 123 出來,這是寫程式邏輯與編譯邏輯有稍微的不同
js引擘會將變數預先宣告在函數的開頭
上列的範例會變成:
var a;//這行實際意味:window.a = undefined; 與null不同

if("a" in window){ //a存在於window,true
    a = 123;//window.a = 123;
}
alert(a);//window.alert( window.a );
好這跟問題有什麼關係? 有一點點的關係。 當使用
function a(){
}
無疑的是宣告 a這個函數,但預編譯的情況下,會直接將 a 賦值 簡單範例一下:
alert(a());
function a(){
     return 1;
}
結果會alert 1
實際的情況:
var a;
a = function a(){return 1;}
alert(a());
那來複雜的
a();
var a = function(){alert("1")}
function a(){alert("2")}
a();
結果是會是:先出現2 再出現1

分析實際情況:
var a;
a = function a(){alert("2")}
a();
a =  function(){alert("1")}
a();

最後回到問題:
一.
var one = function () {
    return "one";
};
二.
function one () { 
    return "one";
};
請問使用上一跟二,會有什麼差別呢

這個答案具體要看情況



PS:補充一點
var one = function(){}
這個是暱名函數
function one(){}
這個是具名函數

這兩者的不同我就不在這邊說明了
但你可以用.toString() 來看看他們有什麼不同的地方

2014年4月10日 星期四

2014年1月19日 星期日

【Javascript】Array.sort() 自訂排序規則

今天使用 native 的函數 sort() 來排序用戶輸入的資料

在數值的部份我就有點納悶

[1, 6, 4, 10, 20, 2]

這幾個數字由小排到大居然會是

[1, 10, 2, 20, 4, 6]

猜想應該是統一使用 toString() 採 ascii 碼來排序

這個時候就要自訂如何去排序啦

根據 w3c 的文件

Array.sort() 內可以傳入一個函數

參數值會有 a跟b 兩個

而sort函數會依照傳入的函數所回傳的結果來決定a 與 b 是否要交換位置

先看我改後的js (ascending):
var myArr = new Array(1, 6, 4, 10, 20, 2);

myArr.sort(function (A, B) {
    return A - B;
});

console.log(myArr); //[1, 2, 4, 6, 10, 20] 

依據回傳結果

小於0的話A在前面
等於0的話不變
大於0的話A在後面

如果是要由大排到小的話 (descending)
就改為:
myArr.sort(function (A, B) {
    return B - A;
});

【CSS】 A標籤在手機上觸發不到的問題

剛剛測試手機版 Web App 的時候發現一個問題

怎麼某些按鈕點了沒有反應

明明js都是套一樣的

仔細檢查後發現,原來樣式中被加入了

text-indent: -9999px;

由於這一行的關係

在電腦上模擬都是非常正常,只有手機上有觸碰不到的問題

要按在按鈕的最左方,大概剩1px的反應區

所以變得非常難按到



雖然只花了幾分鐘就解決了,但覺得蠻神奇的