作者TonyQ (沉默是金)
看板Ajax
標題Re: [心得] ajax / js template
時間Fri Jul 25 11:06:45 2008
※ 引述《TonyQ (沉默是金)》之銘言：
: 今天survey了一下各式作法
: http://www.stanlemon.net/index/articles/jquery-templates.html
: 這個作法看起來好像也蠻直覺的 （對寫EL的人來講應該很熟悉）
: 當然重點還是在於搭配JQuery 這點對原本就採jq結構的人很方便. :P
我試著把它運用在我們站上 , 不過搭配LiveQuery
目標是達到自動化製版跟自動化載入的功能 ,
(關於自動化跟原始碼的部分等如果實驗有所結果我會再post上來 ,
順便推薦 LiveQuery 這個plug-in , 對達成物件行為一致性非常的好用.)
當然原始的jquery.template.js ,
在要重複使用的註況下, 樣板要怎麼存會是個難題 ,
所以我稍微小修了一下原本的結構,作了一個樣板快取的儲放機制 .
(因為樣板如果不存起來重複使用, 會覺得有點可惜)
當然效能會是作ajax loading的人最關心的issue ,
因為還在實驗性質 , 所以目前我只用小資料測試過,
我下一個階段的樣板比較大 , 我會再測一下數據 .
目前用底下這樣的數據來測 ,每個樣板處理好到append到目標物上,約20~30ms.
JSON--------(支援陣列操作)----------------------------------
{
sid:"111",
img:'xxxx.js'
}
樣板結構----------------------------------------------------
<div class="jqTmp" title="imageFeed">
<div class="imageBox" uid="{{sid}}">
<div style="width: 75px; height: 75px">{{img}}</div>
<div id="checkedImg_{{sid}}" >
<img src="/images/icons/check.gif"/>
</div>
</div>
不過另外也考慮到如果當我不想採用template , template 結構也應該
要能夠有server side language 產生真正的html的能力.
由於是採用字串取代的方案 , 所以這點在有regex協助下應該可以輕鬆達成 .
(註:不代表ajax loading 可輕鬆轉換為 full page loading ,
這還是要靠流程設計.)
目前碰到的幾個困境
1.我踩入的部分是直接讀取 json,難免需要考慮到一些 escape word的部分,
包括樣板跟json的載入由於我是先讀到一個div載體內再處理 ,
所以都有這樣的問題, 我目前是採用 server side的 escapeHtml 來
直接避掉所有 "' 跟 id之類的特殊字員跟屬性 .
再js side再作unescapeHtml
概念上很簡單 , 不過實作上不少幽靈問題 , 還在處理中.
2.server side 對json escape 支援 .
(另外我發現jquery append data進html的時候 ,
好像也會parse掉一些js 字串 , 這部分還無暇細想.)
3.有些時候 , 比方說像是做mouseover 的tooltip body ,
當這個body很複雜的時候我也會比較希望用 template 去處理 ,
但是 mouseover 事件可能會重複觸發很多次 ,
就比不上直接存一個div再html直覺 ,
所以我目前是考慮到 , 作一個 data cache ,
傳入的資料再加一個cache id , 存到dataset .
(當然不需要做cache的data就不給cache id就好 )
4.SEO的支援度問題
關於這點 , 我在javascript irc上跟一些國外的designer聊 ,
他們一面倒的反對ajax , 因為SEO 支援度太差 .
這點我想也一直是設計者所難以顧及的地方 ,
有人願意出來探討一下這個議題的話 , 小弟非常感激.
5.這個是目前比較還無暇去考慮的問題 ,
在這點上我也跟一些js designer 有一樣的通病 orz ,
也就是寫作過程完全不考慮 js 記憶體占用量 ,
把負擔交給使用者去承擔的部分.
這部份等前面完成後 , 會回頭在來評估一下 ,不過這構想的停損點到今天 ,
如果做不出來也打算另尋方案把任務完成了.
目前所有source都還沒發出來,因為還很不成熟 ,
等我把手上發現的 bug 都發出來 , 會再跟大家分享一下. :)
Tony
---
話說目前手邊專案 jquery+ jquery.Ui.all 加一些哩哩摳摳的東西,
uncompress狀況下有一萬多行(遠目...) , 想想還真是壯觀...
也讓人會捏冷汗(抖)
--
I am a person, and I am always thinking .
Thinking in love , Thinking in life ,
Thinking in why , Thinking in worth.
I can't believe any of what ,
I am just thinking then thinking ,
but worst of all , most of mine is thinking not actioning...
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.128.219.202
※ 編輯: TonyQ 來自: 220.128.219.202 (07/25 11:07)
※ 編輯: TonyQ 來自: 220.128.219.202 (07/25 11:09)
1F：→ TonyQ:話說g老大 有空快點回啊!!!我都快沒時間繼續研究了...XD 07/25 11:11
2F：→ TonyQ:公司下一階段目標已經確定了, 我不能在技術面逗留太久 T_T 07/25 11:11
3F：推 chph:我認為這個plugin沒有使用價值, js 是拿來增強, 並非提供內容 07/25 11:18
4F：→ TonyQ:我相信chph你有你的見解 , 不過這可能要從ajax loading整個 07/25 11:19
5F：→ TonyQ:方向逆推回來才能夠討論這件事情 . 07/25 11:19
6F：→ TonyQ:我可以把這個plug-in 解讀成將內容轉換成各種形式的運用 , 07/25 11:20
7F：→ TonyQ:因為內容當然還是由server side 提供, js也沒辦法憑空生內容 07/25 11:20
8F：→ TonyQ:因為這個東西本來出發動機是要簡化ajax loading近來的量. 07/25 11:20
9F：→ TonyQ:我想等週日我可以針對你提的這個主題再開一篇專欄來闡述. 07/25 11:21
10F：→ TonyQ:現在先講到這裡就好 orz 工作要緊 07/25 11:21
11F：→ TonyQ:用另一個角度來想, 某些下拉式menu要求使用者提供js array 07/25 11:22
12F：→ TonyQ:來產生資料 , 其實就是一種很特例的樣板結構. 07/25 11:22
13F：→ TonyQ:所以其實js增強這個說法是值得另開專欄討論的. 07/25 11:22
14F：→ TonyQ:至於如果是考慮到 noscript , 或script支援較弱的使用者, 07/25 11:35
15F：→ TonyQ:這也是我為什麼要考慮到server side有能力不依賴js產生內容 07/25 11:35
16F：→ TonyQ:的理由 . 07/25 11:35
17F：→ TonyQ:願意發表意見的話 , 我很希望chph對提供內容的部分再多著墨 07/25 11:45
18F：→ TonyQ:我也可以順便檢視一下我的設計是不是還有我沒有考量到的地方 07/25 11:45
19F：→ TonyQ:萬分感謝 o(_ _)o 07/25 11:45