Vue-動態數據綁定
阿新 • • 發佈:2018-05-05
pre 數據綁定 data code reat 基礎上 一次 應用 console
任務2.3 考慮傳遞回調函數。在實際應用中,當特定數據發生改變的時候,我們是希望做一些特定的事情的,而不是每一次都只能打印出一些信息。所以,我們需要支持傳入回調函數的功能。舉個例子。
1 let app1 = new Observer({ 2 name: ‘youngwind‘, 3 age: 25 4 }); 5 6 // 你需要實現 $watch 這個 API 7 app1.$watch(‘age‘, function(age) { 8 console.log(`我的年紀變了,現在已經是:${age}歲了`) 9}); 10 11 app1.data.age = 100; // 輸出:‘我的年紀變了,現在已經是100歲了‘
想法:執行的時候動態綁定處理函數 handler ,那麽就要在 $watch 函數裏面重新設置 app1.__ptoto__.convert() 裏面的 set() ;但是怎麽在保留舊的代碼的基礎上,加上新的函數,不懂。看了看IFE給的參考資料:發布訂閱模式是靠自定義事件實現的,我的思路錯了。。
自定義事件:
1 var fireEvent = function(element,event){ 2 if (document.createEventObject){3 // IE瀏覽器支持fireEvent方法 4 var evt = document.createEventObject(); 5 return element.fireEvent(‘on‘+event,evt) 6 } 7 else{ 8 // 其他標準瀏覽器使用dispatchEvent方法 9 var evt = document.createEvent( ‘HTMLEvents‘ ); 10 evt.initEvent(event, true, true); 11 return !element.dispatchEvent(evt); 12 } 13 };
Vue-動態數據綁定