摘要:作為一個應該具有經常總結反思的習慣如果不能及時總結可能就會忘記自己踩過的很多坑然后會導致同一個坑踩很多次所以我打算把這些都記錄下來以方便是對自己的重復記憶避免無效的另一方面可以希望可以給遇到相似問題的同僚們一些收獲手動觸發臟檢查在開發過程中
作為一個coder,應該具有經常總結反思的習慣,如果不能及時總結,可能就會忘記自己踩過的很多坑,然后會導致同一個坑踩很多次,所以我打算把這些都記錄下來,以方便是對自己的重復記憶,避免無效的coding,另一方面可以希望可以給遇到相似問題的同僚們一些收獲.
1.手動觸發臟檢查在開發過程中,我們可能經常會通過js來手動更改綁定的相關數據,而不是通過dom操作來改變綁定的相關數據,這樣也很多情況下會導致綁定數據的視圖不能夠及時更新,這個時候就需要我們手動觸發一下臟檢查,下面我就介紹一下三種手動觸發臟檢查的方法.
(1) $apply() 方法
在需要手動觸發的地方調用 $scope.$apply(),使用該方法會觸發angular從rootScope的作用域下開始進行綁定變量值的輪詢,相比較$digest()方法比較費時.
但是這個有時這個方法會報錯.
(2) $digest() 方法
在需要手動觸發的地方調用 $scope.$digest(),使用該方法會觸發angular從scope的作用域下開始進行綁定變量值的輪詢,相比較$aplly()更合理.
(3) $timeout()方法
將操作綁定數據的邏輯寫在$timeout()方法中.
找到一種更完美的解決動態添加數據導致頁面不能及時渲染的方法,迫不及待地來分享給大家~~~
可以定義一個全局的方法.這個方法就是經過處理過的apply函數,大家都叫它safeApply.上代碼了:
$rootScope.safeApply = function(fn) { var phase = this.$root.$$phase; if(phase == "$apply" || phase == "$digest") { if(fn && (typeof(fn) === "function")) { fn(); } else { this.$apply(fn); } } }
然后在需要動態添加吧的地方調用$rootScope.safeApply()即可,或者把需要動態添加的代碼作為寫進$rootScope.safeApply方法的fn參數里.
2.ng-model-options 指令這個指令在表單校驗的時候非常有用,我們可以設置什么時候出發試圖更新,這樣你就可以設置dom元素失去焦點改變后調用監聽,從而顯示校驗的提示. ,
//使用示例
//可配置參數
{updateOn: "event"}規則指定事件發生后綁定數據
{debounce : 1000} 規定等待多少毫秒后綁定數據
{allowInvalid : true|false} 規定是否需要驗證后綁定數據
{getterSetter : true|false} 規定是否作為 getters/setters 綁定到模型
{timezone : "0100"} 規則是否使用時區
我們都知道,當頁面還未加載完畢的時候會出現{{ xxx }}這種尷尬的情況,通過使用ng-bind-template指令,就可以避免尷尬情況的出現.
//使用示例4.解決ng-if,ng-show,ng-hide偶然出現的閃現的問題
(1) 將html片段抽出,通過指令引入ng-include,ng-bind-html
(2) 通過ng-cloak指令
(1)路由傳參
//傳遞 $state.go(path, {name:"dfdd"}) ui-sref="path({name:"dfdd"})" //獲取 $scope.$stateParams.name
(2)通過廣播
通過子元素傳遞給父元素,然后父元素再廣播給其他子元素,注意這個廣播是很快就完成的,所以很有可能出現子頁面還未加載完父元素的廣播就已經完成了,為了避免這種情況,需要父元素的廣播延遲執行.
(這種情況有一個弊端,當進入子頁面后再次刷新頁面,這次的廣播已經沒有了,就會導致這個子頁面的數據獲取失敗了.)
(3)定義全局變量(window)
將多個控制器都需要通訊的變量定義為全局的.這樣每個控制器都可以訪問到和改寫.
(4) 緩存
sessionStorage, localStorage, cookie,瀏覽器的各種數據庫
以上方法個人比較推薦路由傳參的方式
6.$destroy的使用是必要的(1)頁面離開時清除頁面的定時器
(2)頁面離開時清除頁面的監聽器
(3)頁面離開時清除頁面的modal,popover之類的遮罩層.
var destroyWatcher = $scope.$watch(...); //示例代碼 //$watch方法會返回一個函數,這個函數用來銷毀監聽器,我們用一個變量承接這個函數,然后再destory的時候調用這個函數就可以銷毀不必要的監聽器了. $scope.$on("$destroy", function() { if (timer) { $timeout.cancel(timer); } $scope.popover.remove(); destroyWatcher(); }
就先寫到這兒了,后面會持續更新...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92033.html
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
摘要:下面圍繞的這樣的目的,即左右知乎網頁上屏幕截圖功能的實現前端掘金背景最近注意到知乎的屏幕截圖反饋功能,感覺非常不錯。正如你期望的,文中的闖關記之垃圾回收和內存管理前端掘金題圖來源,授權基于協議。 微信小程序實戰學習 起手式 DEMO 仿肯德基 - 前端 - 掘金小程序?大場景? 微信小程序本質上來說就是一個 HTML 5(移動網頁) 應用,用view、scoll-view代替了div標...
摘要:前端學習資源實在是又多又廣,在這樣的一個知識的海洋里,我們像一塊海綿一樣吸收,想要快速提高效率,平時的總結不可缺少,以下總結了一些,排版自我感覺良好,推送出來,后續持續跟新中開發工具下載地址在線工具解析工具在線圖片壓縮在線編輯手冊在線進制轉 前端學習資源實在是又多又廣,在這樣的一個知識的海洋里,我們像一塊海綿一樣吸收,想要快速提高效率,平時的總結不可缺少,以下總結了一些,排版自我感覺良...
閱讀 2632·2019-08-30 15:53
閱讀 2870·2019-08-29 16:20
閱讀 1081·2019-08-29 15:10
閱讀 1018·2019-08-26 10:58
閱讀 2188·2019-08-26 10:49
閱讀 630·2019-08-26 10:21
閱讀 700·2019-08-23 18:30
閱讀 1635·2019-08-23 15:58