前端架構應用概念

Posted on Edited on In Views: Disqus: Symbols count in article: 2.3k Reading time ≈ 4 mins.

前端架構應用概念

這篇介紹幾個前端架構應用概念。
1.I18N物件
2.PageConfig
3.JCache

I18N物件

1
2
3
4
5
6
7
8
9
10
11
12
13
主要是處理多國語言，因為有些彈出的訊息會需要用到多國語系，這邊跟Java一樣是可以帶參數的。

I18N.setResource({
	'form.text.sun':"<%=langMessage.get("form.text.sun") %>",
	'form.text.mon':"<%=langMessage.get("form.text.mon") %>",
	'form.text.tue':"<%=langMessage.get("form.text.tue") %>",
	'form.text.wed':"<%=langMessage.get("form.text.wed") %>",
	'form.text.thu':"<%=langMessage.get("form.text.thu") %>",
	'form.text.fri':"<%=langMessage.get("form.text.fri") %>",
	'form.text.sat':"<%=langMessage.get("form.text.sat") %>",
	'form.text.today':"<%=langMessage.get("form.text.today") %>",
	'form.text.close':"<%=langMessage.get("form.text.close") %>"
});

PageConfig

1
2
3
4
5
6
7
8
主要用於一些server端的設定，讓js檔案能取得相關的資訊，如果沒有靠這個介接，會導致很多javascript會需要放到jsp。

<script type="text/javascript">
if (typeof (PageConfig) == "undefined") {
	PageConfig = {};
}
PageConfig.currencySymbol = '$';
</script>

JCache

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
如果需要重複拿某一個 dom element 來處理，記得使用 JCache 來取得 dom element，會比較有效率。
不然每 call 一次 $('#xxId') 都會搜尋整個 html document 重新把 id 為 xxId 的 dom element select 出來。
但是如果 dom element 會改變，就不能用 JCache，因為 JCache 會 cache 住舊版本的 dom element
另外, 綁定 onclick 因為只會執行一次，就可以不用 JCache。
例如 $('#search-btn').click(function() {...});

/*** JCache ***/
if (typeof (JCache) == 'undefined') {
	JCache = {};
}

(function() {
	var pool = {};
	JCache.get = function(element) {
		//Note:JCache.get('xxx')可能回傳 null
		if (element == null || element.length == 0) {
			return null;
		}
		var result = pool[element];
		if (!result) {
			try {
				result = $j(element);
				pool[element] = result;
			} catch (e) {
				console.error(e);
			}
		}
		return result;
	};
	JCache.clone = function(element) {
		var obj = JCache.get(element);
		if (obj == null) {
			return null;
		}
		return obj.clone();
	};
})();

const.js

1
這是仿照Java的enum做出的設計，讓設計上會更有彈性，大部分會跟server端的enum type做對應

JSUtil.js

1
共用的工具類別，如果之後新瀏覽器javascript版本有提供相同功能，建議使用原生的