
平臺(tái) 論壇博客文庫

› 論壇 › 程序設(shè)計(jì) › Web開發(fā) › jCT與AJAX七宗罪

jCT與AJAX七宗罪 [復(fù)制鏈接]

achun.shx

稍有積蓄

論壇徽章:: 0

電梯直達(dá)

1樓 [收藏(0)] [報(bào)告]

發(fā)表于 2008-11-04 00:04 |只看該作者 |倒序?yàn)g覽

jCT的更多信息請(qǐng)看我博客里的jCT專題，或者jCT開源主頁示例里面有最簡單的例子
=======================================================
jCT 3完成后�；旧蟡CT短期內(nèi)就穩(wěn)定了。
剩下的就是應(yīng)用問題。
雖然使用jCT不一定要使用Ajax.
不過在我的應(yīng)用當(dāng)中，jCT配合Ajax是能的到最大發(fā)揮的。
不過大家都知道的AJAX的使用會(huì)有一些”罪“�！�AJAX的七宗罪“這詞出現(xiàn)的比較早，我引用這個(gè)詞，不過在敘述”罪“的時(shí)候從新進(jìn)行了一些詞匯變更，至于是七宗罪還是八宗罪只是個(gè)列表問題了。
我現(xiàn)在并沒有完全的把握和信心在jCT與Ajax的配合上完全解決"Ajax的罪孽".
有些罪已經(jīng)被”赦免"了，有些還在。先占個(gè)位置，此貼會(huì)隨著思路不斷更新。
首先我認(rèn)同這N宗罪確實(shí)存在（不評(píng)論是否夠的上罪，應(yīng)該稱作麻煩更好）
其次我剔除了一些明顯由代碼是否優(yōu)良，是否會(huì)熟練使用其他工具或者根本就和ajax根本無關(guān)的
虛妄之罪：有些就不發(fā)表個(gè)人意見了

編寫復(fù)雜、容易出錯(cuò)
不容易調(diào)試
冗余代碼更多
XML是個(gè)幌子
ajax不一定要用XML，這個(gè)和ajax關(guān)系不大.
破壞了Web的原有標(biāo)準(zhǔn)
可以不破壞的，破壞不破壞有技術(shù)水平問題，有時(shí)候找不到符號(hào)標(biāo)準(zhǔn)的時(shí)候就要破壞了。其實(shí)就算不用ajax,破壞也照樣進(jìn)行著。
世界這么大卻找不到自己的家，AJAX適用于什么？能干什么？能帶來什么？
ajax不是萬能的，至少目前文件上傳是不支持的。這個(gè)罪明顯是個(gè)問句，而大家都知道有問題不一定要有答案的。

"罪孽"列表：

對(duì)搜索引擎的支持不好
(2008.10.18注:此方法已經(jīng)通過了實(shí)踐的驗(yàn)證)
這個(gè)是兩個(gè)問題，首先是要讓SE搜的到，其次是能正確鏈接過來，并且得到的結(jié)構(gòu)要好SE的內(nèi)容相符合
搜的到首先要解決的是數(shù)據(jù)SE優(yōu)化的問題，這個(gè)超出了我們的話題了，
要搜的到其實(shí)很簡單，初始頁面上輸出的body里面是有內(nèi)容的，這些內(nèi)容就是讓SE看的，然后ajax刷新頁面掉入讓瀏覽器看的頁面就行了。
能正確鏈接過來比較麻煩，根本還是要對(duì)給SE的body里面的A的href的url參數(shù)進(jìn)行合理的設(shè)計(jì)，這個(gè)要看業(yè)務(wù)邏輯了。
重點(diǎn)：如果采用唯一入口的ajax方式的話，那就有了解決的基礎(chǔ)，SE看到的鏈接永遠(yuǎn)都是來自與這個(gè)唯一入口地址的，僅僅是參數(shù)不同而已，
那剩下的就是要在瀏覽器上從新分析這個(gè)url參數(shù)使之調(diào)出相應(yīng)的數(shù)據(jù)了.
原理基本如此，實(shí)作還要看業(yè)務(wù)邏輯，我的應(yīng)用目前還沒有動(dòng)手做這個(gè)，不過很快就會(huì)開始的。希望我能解決
今天(2008.9.28上午)終于有時(shí)間做搜索引擎的輸出了.很容易的僅僅用了兩個(gè)小時(shí)就完成了,道理很簡單.只要瀏覽器打開網(wǎng)站,最第一頁中始終都有一個(gè)沒有樣式的輸出結(jié)果,但是由于這個(gè)結(jié)果會(huì)在js執(zhí)行的時(shí)候被替換掉,所以可能瀏覽器上根本沒有來得及看到結(jié)果,但是如果你把js屏蔽掉就看到了,這就是給搜索引擎看的東西.
現(xiàn)在就可以屏蔽掉js看看www.xxx.xxx(很遺憾，由于人事變動(dòng)，我不再參與這個(gè)項(xiàng)目了，項(xiàng)目負(fù)責(zé)人回到了古老的編程方法，回頭有新的站我再給出新的地址吧)輸出吧.其實(shí)對(duì)于搜索引擎的輸出很多東西都不必要顯示的,所以在xxx這個(gè)站上僅僅需要輸出類表和詳細(xì)信息兩種行為就行了.剩下的就是如何把由搜索引擎過來的地址轉(zhuǎn)換到正確的頁面就行了.因?yàn)樵趚xx的設(shè)計(jì)中所有參數(shù)的名稱和結(jié)構(gòu),ajax的方法和對(duì)搜索引擎輸出的方法完全一致因此做起來相對(duì)容易,就算不一致也只不過的費(fèi)點(diǎn)代碼翻譯一下就OK了.這個(gè)工作就留到下午做吧
沒有back和history
這個(gè)也有解決方案的搜一下'Ajax 前進(jìn)后退',這個(gè)用的是iframe的方法
還有dhtmlhistory.js這個(gè)開源的庫
不過這些方法我都不想照搬，綜合一下和jCT配套的方案:
寫了一個(gè)hisStory的對(duì)象,專門用來管理hisstory,先看代碼
Js代碼
1. //ajax歷史控制
2. var hisStory={
3. init:function(){//初始化iframe對(duì)象通過更改iframe的src中的參數(shù),也就是說主要技術(shù)還是用iframe的方法
4. var id='#hisStoryFrame';
5. $(id).remove();
6. this.at=0;
7. this.his=[];
8. $('body').append('<iframe id="hisStoryFrame" src="/hisstory.html?0" height="0px" frameborder="no"></iframe>');
9. this.elm=$(id);
10. },
11. same:function(argsn,his){//判斷是否是同一個(gè)刷新,同一個(gè)刷新不加歷史
12. var args=his||[];
13. var arg=argsn[2]||[];
14. var argi=args[2]||[];
15. var same=true;
16. if(argsn[0]==args[0] && argsn[1]==args[1] && arg.length==argi.length)
17. for (var i=0;i<arg.length ;i++) {
18. if(arg[i]!=argi[i]){
19. same=false;
20. break;
21. }
22. }
23. else
24. same=false;
25. return same;
26. },
27. add:function(){//增加歷史,其參數(shù)是第一參數(shù)是要回調(diào)的函數(shù)的this,第二參數(shù)是要回調(diào)的函數(shù),第三參數(shù)是要回調(diào)的參數(shù)數(shù)組,
28. if(this.same(arguments,this.his[this.at])) return;
29. this.his=this.his.slice(0,this.at+1);
30. this.at=this.his.length;
31. this.his.push(arguments);
32. this.elm.attr('src','/hisstory.html?'+(this.at));
33. },
34. go:function(url){//前進(jìn)或后退
35. var pos=url.indexOf('?');
36. this.at=parseInt(url.slice(pos+1));
37. if(!this.his[this.at]) return;
40. var p=this.his[this.at][0];
41. var fun=this.his[this.at][1];
42. var arg=this.his[this.at][2]||[];
43. if(typeof fun=='function') fun.apply(p,arg);
44. },
45. his:[]//歷史記錄數(shù)組
46. }
復(fù)制代碼
相應(yīng)的hisstory.html
Html代碼
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5. <meta http-equiv="Content-Language" content="zh-CN" />
6. <script>
7. var url=window.location.href;
8. if(parent && parent.hisStory) parent.hisStory.go(url);
9. </script>
10. </head>
11. <body></body></html>
復(fù)制代碼
這種方法的原理就是:雖然ajax的頁面是無刷新的,但是如果里面有嵌入的iframe,而iframe所指定的url變化的話,瀏覽器的歷史后退前進(jìn)就會(huì)生效,并且直接對(duì)應(yīng)
iframe里的變化.hisstory.html里的javascript就是調(diào)用上級(jí)頁面里hisStory對(duì)象的go方法進(jìn)行對(duì)應(yīng)的處理.
關(guān)鍵在于使用時(shí),再什么時(shí)候調(diào)用hisStory.add方法?這個(gè)要看應(yīng)用和業(yè)務(wù)邏輯了.
hisStory.init的調(diào)用就簡單了,當(dāng)頁面上的body被更新后就調(diào)用,而且要保證以后iframe不會(huì)被覆蓋掉,這是個(gè)簡單DOM組織問題了.
用戶刷新當(dāng)前頁面，如何保證刷新后的頁面與刷新前保持一致
找到了思路，現(xiàn)在還沒有實(shí)現(xiàn)，這個(gè)方法就是利用window.name屬性具有長生命周期的特點(diǎn)�？戳诉@個(gè)屬性還應(yīng)該有很多的其他可利用價(jià)值，比如說當(dāng)數(shù)據(jù)緩存用。要好好考慮一下
任由內(nèi)存溢出
這個(gè)雖然根源來自javascript實(shí)現(xiàn)，不過確實(shí)不容易解決，這應(yīng)該是個(gè)專題
多個(gè)異步XHR完成不同的任務(wù)，如何保證當(dāng)前context中的數(shù)據(jù)的獨(dú)占或者lock
引用JE上的回答：
醒來寫道
包含業(yè)務(wù)邏輯，自然是要自己編程解決。

dlee 寫道
對(duì)每個(gè)需要保護(hù)的內(nèi)容，設(shè)置一個(gè) flag，實(shí)現(xiàn)排它鎖的機(jī)制。
對(duì)于我來說也有一個(gè)解決辦法就是降低前后臺(tái)業(yè)務(wù)邏輯上的耦合度,前后臺(tái)細(xì)粒度數(shù)據(jù)通訊的方法