作者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