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