作者Fonger (MereFantasy)
看板Ajax
标题[问题] JavaScript 的非同步物件导向写法
时间Fri Nov 15 12:34:44 2013
原本的程式实在是太乱了
引用JS档前还要先指定一个Global Variable
结果现在出问题了 要同时处理多笔资料
打算全部砍掉重练 用OOP来写
不过现在遇到了一个问题
因为这个Object 有利用AJAX 去取得一些资料
所以并不能随call随用 还要指定一个callback function
因为要考虑到错误处理的方式 和 UI 的动态显示
所以可能需要两个callback function
一个是用来存资料 一个是用来更新UI
(我想把这js和网页页面完全独立开来，因此不能包在一起)
但是不知道各位前辈有什麽方法比较好去实做呢?
--
I'm not the only one,
To crash into the sun, and live to fight another day.
Like a super nova, that old life is over.
I'm here to stay. Now I'm gonna be,
Invincible.
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 140.113.244.14
1F：→ Fonger:我有想过在object init时指定一个callback function 11/15 12:35
2F：→ Fonger:然後内部的ajax的callback function开头再call init那个 11/15 12:36
3F：→ Fonger:不过总是感觉有一些缺陷 11/15 12:36
4F：推 mmis1000:多个callback可以啊？只是会依序执行 11/15 12:45
5F：→ mmis1000:等等，你是指一个ajax，两个callback? 11/15 12:46
6F：→ mmis1000:function(){a();b();} 用匿名函数转发呢？ 11/15 12:48
7F：推 mrbigmouth:不是很懂原po要的 但jQuery的deferred很好用 要几个 11/15 14:16
感谢!! 今天又学到新东西了
deffered!!!!!!!!!
感动~~ 虽然还是没解决
等等有空把全部的思路全部打上来
8F：→ mrbigmouth:callback都临时挂即可 11/15 14:16
9F：推 s540421:原PO是要说某A资料因为透过AJAX取得所以不能立刻使用？ 11/15 20:04
10F：→ s540421:我理解没错的话，把非同步处理模式改成同步处理就行了 11/15 20:05
11F：推 mrbigmouth:楼上的作法虽然方便但不建议 用Deferred物件很方便的 11/16 01:13
12F：推 s25g5d4:如果伺服器卡一秒 浏览器也会跟着卡一秒没有回应喔... 11/16 01:51
※ 编辑: Fonger 来自: 140.113.244.14 (11/16 07:43)
13F：→ s540421:重要资料的话server还没回传後续动作也都无法运作 11/16 10:58
14F：→ s540421:看重要性来决定要同步还是异步吧 11/16 10:59
15F：→ s540421:还有环境也会影响要不要选用同步，如果程式要跨多种浏览器 11/16 11:17
16F：→ s540421:使用就不建议用同步，反之若是有限环境就可以考虑 11/16 11:18
17F：→ s540421:而jQuery的ajax object有内建deferred object，可以直接 11/16 11:27
18F：→ s540421:串上想挂的callback 11/16 11:27
19F：→ s540421:像是$.ajax(...).done(function(){...}); 11/16 11:28
20F：→ s540421:不用再额外管理deffered object 11/16 11:29
21F：→ Fonger:可不可以我var a = new MyOJ(params...) 11/16 11:47
22F：→ Fonger:然後a.someMethod(xxx).done(qqq) ? 11/16 11:47
23F：→ Fonger:someMethod是a的prototype function 11/16 11:47
24F：推 mrbigmouth:可以 11/16 19:44
25F：→ mrbigmouth:你在someMethod new一个deferred object回传即可 11/16 19:44
26F：→ mrbigmouth:如果使用"同步"的方式 在等待伺服器回应的时间页面是 11/16 19:45
27F：→ mrbigmouth:完完全全动不了的状态 连卷轴都卷不动 使用者感受会 11/16 19:45
28F：→ mrbigmouth:非常糟糕 11/16 19:45
我现在遇到了一个问题
大概如下
<myscript.js>
function MyOJ(param)
{
this.predata = param
this.dataA = null // 等待ajax 取得资料
this.dataB = null //
}
MyOJ.prototype =
{
init: function()
{
this.getDataA()
}
get
DataA: function()
{
return $.post(urlB,this.get
DataB.bind(this))
},
get
DataB: function(
dataA) //ajax A的回传资料
{
this.
dataA =
dataA
return $.post(urlC,this.
initFinish.bind(this))
},
initFinish: function(
dataB) //ajax B的回传资料
{
var dtd = $.Deferred()
this.
dataB =
dataB
dtd.resolve()
return dtd
}
}
<MyHTML.html>
<script>
var a = new MyOJ(params)
a.getDataA().done( getA_Callback) //回报UI用
.fail( getA_Fail )
a.getDataB().done( getB_Callback) //回报UI用
.fail( getB_Fail)
a.initFinish.done( myInitFinish ) //模组已全部载入 可以使用了
a.init()
function myInitFinish()
{
$('#dataA').text(a.dataA) //保证有资料
$('#dataB').text(a.dataB) //保证有资料
}
</script>
意思就是
当程式呼叫 init 时, js 那边开始进入取得资料的模式
同时我可以在外部挂载一些function 能让UI知道下载的进度
不过
红字部分出了问题
因为Deferred物件要在执行後才会return
但是，我现在还没init
而且这些function, 应该是给ajax完成後在内部才执行的(同时函数内参数就是回传值)
虽然这段程式码有严重错误
但是应该可以表现出我想要达到的效果了~~
麻烦各位大大指点迷津QQ...
※ 编辑: Fonger 来自: 61.230.168.152 (11/17 08:59)
※ 编辑: Fonger 来自: 61.230.168.152 (11/17 09:00)