Re: [心得] ajax / js template

看板Ajax作者TonyQ (沉默是金)時間16年前 (2008/07/25 11:06)推噓1(1推 0噓 18→)

留言19則, 2人參與討論串4/5 (看更多)

※ 引述《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)

→