2014年2月19日 星期三

js小抄_動態的變數名稱[使用eval()方法]

有時候會有一個需求,想在某種情況代入變數Value_A,某些時候代入變數Value_B,那可能會寫:
var output = ''; if (status=='A'){ output = Value_A } if else(status=='B'){ output = Value_B } alert(output);
但若是情況有100種,豈不是要寫100個判斷式處理;這時,可以使用eval()方法來處理:
var output = eval('Value_' + status); alert(output);
上述方式,將可在status為A時,取到Value_A的值,status為GG時,取到Value_GG的值,大大使程式碼更加靈活。

eval()也就是將函式內的內容組合完成後,以JavaScript執行,所以能夠產生許多巧妙的變化,常被舉的例子是:
var n=2; var b=3,c=4; eval('a'+n+'=b*c');
上式會得出a2變數為12。

2014年2月14日 星期五

jQuery_動態載入js與html

最近為了重拾JavaScript,灌了VS2013,被強制升級為IE11,才知道原來IE11執行js的效能不錯,錯誤"似乎"也變少許多,但我想絕大部分的使用者短期內都不可能升級吧!  :D


JavaScript實在是太不熟悉,也不知道用什麼架構可以建置一個稍具規模的專案,在看不太懂網路上各大大的模組化後,決定亂建一個方式,總是有一個起頭,先記錄一下關鍵。

1. 使用jQuery動態載入HTML(官網)
$("#div1").load("widgets/function/functionPage1.html", function () { console.log("Load functionPage1.html OK."); }); 使用jQuery可以相當簡便的將functionPage1.html插入名為div1的容器中,達到頁面分離效果。


2. 使用jQuery動態載入js(官網)
$.getScript("function/jfunction1.js", function (data, textStatus, jqxhr) { console.log(data); // Data returned console.log(textStatus); // Success console.log(jqxhr.status); // 200 console.log("Load jfunction1 was performed."); }); 利用getScript方法,將jfunction1.js動態讀取到頁面中,當完成時會觸發後面的function,可以做為init之用。


有了這兩個方法,接著就是試圖把html與js分門別類的抽出,再於適當的時機讀取(要使用前),看到主頁清爽的感覺就是爽! :D