免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 3068 | 回复: 3
打印 上一主题 下一主题

jCT与AJAX七宗罪 [复制链接]

论坛徽章:
0
跳转到指定楼层
1 [收藏(0)] [报告]
发表于 2008-11-04 00:04 |只看该作者 |倒序浏览
jCT的更多信息请看我博客里的jCT专题,或者jCT开源主页示例里面有最简单的例子
=======================================================
jCT 3完成后。基本上jCT短期内就稳定了。
剩下的就是应用问题。
虽然使用jCT不一定要使用Ajax.
不过在我的应用当中,jCT配合Ajax是能的到最大发挥的。
不过大家都知道的AJAX的使用会有一些”罪“。”AJAX七宗罪“这词出现的比较早,我引用这个词,不过在叙述”罪“的时候从新进行了一些词汇变更,至于是七宗罪还是八宗罪只是个列表问题了。
我现在并没有完全的把握和信心在jCT与Ajax的配合上完全解决"Ajax的罪孽".
有些罪已经被”赦免"了,有些还在。先占个位置,此贴会随着思路不断更新。
首先我认同这N宗罪确实存在(不评论是否够的上罪,应该称作麻烦更好)

其次我剔除了一些明显由代码是否优良,是否会熟练使用其他工具或者根本就和ajax根本无关的
虚妄之罪:有些就不发表个人意见了
  • 编写复杂、容易出错
  • 不容易调试
  • 冗余代码更多
  • XML是个幌子
    ajax不一定要用XML,这个和ajax关系不大.
  • 破坏了Web的原有标准
    可以不破坏的,破坏不破坏有技术水平问题,有时候找不到符号标准的时候就要破坏了。其实就算不用ajax,破坏也照样进行着。
  • 世界这么大却找不到自己的家,AJAX适用于什么?能干什么?能带来什么?
    ajax不是万能的,至少目前文件上传是不支持的。这个罪明显是个问句,而大家都知道有问题不一定要有答案的。

"罪孽"列表
  • 对搜索引擎的支持不好
    (2008.10.18注:此方法已经通过了实践的验证)
    这个是两个问题,首先是要让SE搜的到,其次是能正确链接过来,并且得到的结构要好SE的内容相符合
    搜的到首先要解决的是数据SE优化的问题,这个超出了我们的话题了,
    要搜的到其实很简单,初始页面上输出的body里面是有内容的,这些内容就是让SE看的,然后ajax刷新页面掉入让浏览器看的页面就行了。
    能正确链接过来比较麻烦,根本还是要对给SE的body里面的A的href的url参数进行合理的设计,这个要看业务逻辑了。
    重点:如果采用唯一入口的ajax方式的话,那就有了解决的基础,SE看到的链接永远都是来自与这个唯一入口地址的,仅仅是参数不同而已,
    那剩下的就是要在浏览器上从新分析这个url参数使之调出相应的数据了.
    原理基本如此,实作还要看业务逻辑,我的应用目前还没有动手做这个,不过很快就会开始的。希望我能解决
    今天(2008.9.28上午)终于有时间做搜索引擎的输出了.很容易的仅仅用了两个小时就完成了,道理很简单.只要浏览器打开网站,最第一页中始终都有一个没有样式的输出结果,但是由于这个结果会在js执行的时候被替换掉,所以可能浏览器上根本没有来得及看到结果,但是如果你把js屏蔽掉就看到了,这就是给搜索引擎看的东西.
    现在就可以屏蔽掉js看看www.xxx.xxx(很遗憾,由于人事变动,我不再参与这个项目了,项目负责人回到了古老的编程方法,回头有新的站我再给出新的地址吧)输出吧.其实对于搜索引擎的输出很多东西都不必要显示的,所以在xxx这个站上仅仅需要输出类表和详细信息两种行为就行了.剩下的就是如何把由搜索引擎过来的地址转换到正确的页面就行了.因为在xxx的设计中所有参数的名称和结构,ajax的方法和对搜索引擎输出的方法完全一致因此做起来相对容易,就算不一致也只不过的费点代码翻译一下就OK了.这个工作就留到下午做吧
  • 没有back和history
    这个也有解决方案的搜一下'Ajax 前进后退',这个用的是iframe的方法
    还有dhtmlhistory.js这个开源的库
    不过这些方法我都不想照搬,综合一下和jCT配套的方案:
    写了一个hisStory的对象,专门用来管理hisstory,先看代码
    Js代码
    1. //ajax历史控制  
    2. var hisStory={  
    3.     init:function(){//初始化iframe对象通过更改iframe的src中的参数,也就是说主要技术还是用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){//判断是否是同一个刷新,同一个刷新不加历史  
    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(){//增加历史,其参数是第一参数是要回调的函数的this,第二参数是要回调的函数,第三参数是要回调的参数数组,  
    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){//前进或后退  
    35.         var pos=url.indexOf('?');  
    36.         this.at=parseInt(url.slice(pos+1));  
    37.         if(!this.his[this.at]) return;  
    38.   
    39.   
    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:[]//历史记录数组  
    46. }  
    复制代码
    相应的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>
    复制代码
    这种方法的原理就是:虽然ajax的页面是无刷新的,但是如果里面有嵌入的iframe,而iframe所指定的url变化的话,浏览器的历史后退前进就会生效,并且直接对应
    iframe里的变化.hisstory.html里的javascript就是调用上级页面里hisStory对象的go方法进行对应的处理.
    关键在于使用时,再什么时候调用hisStory.add方法?这个要看应用和业务逻辑了.
    hisStory.init的调用就简单了,当页面上的body被更新后就调用,而且要保证以后iframe不会被覆盖掉,这是个简单DOM组织问题了.
  • 用户刷新当前页面,如何保证刷新后的页面与刷新前保持一致
    找到了思路,现在还没有实现,这个方法就是利用window.name属性具有长生命周期的特点。看了这个属性还应该有很多的其他可利用价值,比如说当数据缓存用。要好好考虑一下
  • 任由内存溢出
    这个虽然根源来自javascript实现,不过确实不容易解决,这应该是个专题
  • 多个异步XHR完成不同的任务,如何保证当前context中的数据的独占或者lock
    引用JE上的回答
    醒来 写道
    包含业务逻辑,自然是要自己编程解决。

    dlee 写道
    对每个需要保护的内容,设置一个 flag,实现排它锁的机制。
    对于我来说也有一个解决办法就是降低前后台业务逻辑上的耦合度,前后台细粒度数据通讯的方法


[ 本帖最后由 achun.shx 于 2008-11-4 00:33 编辑 ]

论坛徽章:
0
2 [报告]
发表于 2008-11-04 10:10 |只看该作者
仁者见仁,智者见智吧,看需求了

论坛徽章:
52
码神
日期:2017-03-28 10:27:10综合交流区版块每日发帖之星
日期:2015-10-11 06:20:00综合交流区版块每日发帖之星
日期:2015-09-28 06:20:00综合交流区版块每日发帖之星
日期:2015-09-22 06:20:00每日论坛发贴之星
日期:2015-09-12 06:20:00综合交流区版块每日发帖之星
日期:2015-09-12 06:20:00综合交流区版块每日发帖之星
日期:2015-09-08 06:20:00综合交流区版块每日发帖之星
日期:2015-09-05 06:20:00综合交流区版块每日发帖之星
日期:2015-09-04 06:20:002015亚冠之德黑兰石油
日期:2015-09-01 10:41:53每日论坛发贴之星
日期:2015-10-11 06:20:00综合交流区版块每日发帖之星
日期:2015-10-12 06:20:00
3 [报告]
发表于 2008-11-07 12:26 |只看该作者

回复 #1 achun.shx 的帖子

我倒,还有这么起名的?

论坛徽章:
0
4 [报告]
发表于 2008-11-07 19:10 |只看该作者
原帖由 mz198424 于 2008-11-7 12:26 发表
我倒,还有这么起名的?

呵呵,
虽然用jCT不一定要有ajax,
不过jCT和ajax搭配使用确实是绝配.至少我的所有项目都是这么干的,但是ajax的"罪孽深重 ",
虽然这些问题不是jCT造成的.但这些问题必须解决,所以这个名字并不是标题党.是很实在的,
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP