PTT數位生活區 / Ajax

[問題] JavaScript 的非同步物件導向寫法

看板Ajax作者 (MereFantasy)時間12年前 (2013/11/15 12:34), 編輯推噓6(6推 0噓 22→)
留言28則, 5人參與, 最新討論串1/2 (看更多)
原本的程式實在是太亂了 引用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
→
11/15 12:35, , 1F
我有想過在object init時指定一個callback function
11/15 12:35, 1F
→
11/15 12:36, , 2F
然後內部的ajax的callback function開頭再call init那個
11/15 12:36, 2F
→
11/15 12:36, , 3F
不過總是感覺有一些缺陷
11/15 12:36, 3F
推
11/15 12:45, , 4F
多個callback可以啊？只是會依序執行
11/15 12:45, 4F
→
11/15 12:46, , 5F
等等，你是指一個ajax，兩個callback?
11/15 12:46, 5F
→
11/15 12:48, , 6F
function(){a();b();} 用匿名函數轉發呢？
11/15 12:48, 6F
推
11/15 14:16, , 7F
不是很懂原po要的 但jQuery的deferred很好用 要幾個
11/15 14:16, 7F
感謝!! 今天又學到新東西了 deffered!!!!!!!!! 感動~~ 雖然還是沒解決 等等有空把全部的思路全部打上來
→
11/15 14:16, , 8F
callback都臨時掛即可
11/15 14:16, 8F
推
11/15 20:04, , 9F
原PO是要說某A資料因為透過AJAX取得所以不能立刻使用？
11/15 20:04, 9F
→
11/15 20:05, , 10F
我理解沒錯的話，把非同步處理模式改成同步處理就行了
11/15 20:05, 10F
推
11/16 01:13, , 11F
樓上的作法雖然方便但不建議 用Deferred物件很方便的
11/16 01:13, 11F
推
11/16 01:51, , 12F
如果伺服器卡一秒 瀏覽器也會跟著卡一秒沒有回應喔...
11/16 01:51, 12F
※ 編輯: Fonger 來自: 140.113.244.14 (11/16 07:43)
→
11/16 10:58, , 13F
重要資料的話server還沒回傳後續動作也都無法運作
11/16 10:58, 13F
→
11/16 10:59, , 14F
看重要性來決定要同步還是異步吧
11/16 10:59, 14F
→
11/16 11:17, , 15F
還有環境也會影響要不要選用同步，如果程式要跨多種瀏覽器
11/16 11:17, 15F
→
11/16 11:18, , 16F
使用就不建議用同步，反之若是有限環境就可以考慮
11/16 11:18, 16F
→
11/16 11:27, , 17F
而jQuery的ajax object有內建deferred object，可以直接
11/16 11:27, 17F
→
11/16 11:27, , 18F
串上想掛的callback
11/16 11:27, 18F
→
11/16 11:28, , 19F
像是$.ajax(...).done(function(){...});
11/16 11:28, 19F
→
11/16 11:29, , 20F
不用再額外管理deffered object
11/16 11:29, 20F
→
11/16 11:47, , 21F
可不可以我var a = new MyOJ(params...)
11/16 11:47, 21F
→
11/16 11:47, , 22F
然後a.someMethod(xxx).done(qqq) ?
11/16 11:47, 22F
→
11/16 11:47, , 23F
someMethod是a的prototype function
11/16 11:47, 23F
推
11/16 19:44, , 24F
可以
11/16 19:44, 24F
→
11/16 19:44, , 25F
你在someMethod new一個deferred object回傳即可
11/16 19:44, 25F
→
11/16 19:45, , 26F
如果使用"同步"的方式 在等待伺服器回應的時間頁面是
11/16 19:45, 26F
→
11/16 19:45, , 27F
完完全全動不了的狀態 連卷軸都捲不動 使用者感受會
11/16 19:45, 27F
→
11/16 19:45, , 28F
非常糟糕
11/16 19:45, 28F
我現在遇到了一個問題 大概如下 <myscript.js> function MyOJ(param) { this.predata = param this.dataA = null // 等待ajax 取得資料 this.dataB = null // } MyOJ.prototype = { init: function() { this.getDataA() } getDataA: function() { return $.post(urlB,this.getDataB.bind(this)) }, getDataB: 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)
‣ 更多 Fonger 的文章
文章代碼(AID): #1IXQHfEY (Ajax)
Ajax 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 Fonger 的文章
文章代碼(AID): #1IXQHfEY (Ajax)