摘要:作為一個應(yīng)該具有經(jīng)??偨Y(jié)反思的習(xí)慣如果不能及時總結(jié)可能就會忘記自己踩過的很多坑然后會導(dǎo)致同一個坑踩很多次所以我打算把這些都記錄下來以方便是對自己的重復(fù)記憶避免無效的另一方面可以希望可以給遇到相似問題的同僚們一些收獲手動觸發(fā)臟檢查在開發(fā)過程中
作為一個coder,應(yīng)該具有經(jīng)常總結(jié)反思的習(xí)慣,如果不能及時總結(jié),可能就會忘記自己踩過的很多坑,然后會導(dǎo)致同一個坑踩很多次,所以我打算把這些都記錄下來,以方便是對自己的重復(fù)記憶,避免無效的coding,另一方面可以希望可以給遇到相似問題的同僚們一些收獲.
1.手動觸發(fā)臟檢查在開發(fā)過程中,我們可能經(jīng)常會通過js來手動更改綁定的相關(guān)數(shù)據(jù),而不是通過dom操作來改變綁定的相關(guān)數(shù)據(jù),這樣也很多情況下會導(dǎo)致綁定數(shù)據(jù)的視圖不能夠及時更新,這個時候就需要我們手動觸發(fā)一下臟檢查,下面我就介紹一下三種手動觸發(fā)臟檢查的方法.
(1) $apply() 方法
在需要手動觸發(fā)的地方調(diào)用 $scope.$apply(),使用該方法會觸發(fā)angular從rootScope的作用域下開始進(jìn)行綁定變量值的輪詢,相比較$digest()方法比較費(fèi)時.
但是這個有時這個方法會報錯.
(2) $digest() 方法
在需要手動觸發(fā)的地方調(diào)用 $scope.$digest(),使用該方法會觸發(fā)angular從scope的作用域下開始進(jìn)行綁定變量值的輪詢,相比較$aplly()更合理.
(3) $timeout()方法
將操作綁定數(shù)據(jù)的邏輯寫在$timeout()方法中.
找到一種更完美的解決動態(tài)添加數(shù)據(jù)導(dǎo)致頁面不能及時渲染的方法,迫不及待地來分享給大家~~~
可以定義一個全局的方法.這個方法就是經(jīng)過處理過的apply函數(shù),大家都叫它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); } } }
然后在需要動態(tài)添加吧的地方調(diào)用$rootScope.safeApply()即可,或者把需要動態(tài)添加的代碼作為寫進(jìn)$rootScope.safeApply方法的fn參數(shù)里.
2.ng-model-options 指令這個指令在表單校驗(yàn)的時候非常有用,我們可以設(shè)置什么時候出發(fā)試圖更新,這樣你就可以設(shè)置dom元素失去焦點(diǎn)改變后調(diào)用監(jiān)聽,從而顯示校驗(yàn)的提示. ,
//使用示例
//可配置參數(shù)
{updateOn: "event"}規(guī)則指定事件發(fā)生后綁定數(shù)據(jù)
{debounce : 1000} 規(guī)定等待多少毫秒后綁定數(shù)據(jù)
{allowInvalid : true|false} 規(guī)定是否需要驗(yàn)證后綁定數(shù)據(jù)
{getterSetter : true|false} 規(guī)定是否作為 getters/setters 綁定到模型
{timezone : "0100"} 規(guī)則是否使用時區(qū)
我們都知道,當(dāng)頁面還未加載完畢的時候會出現(xiàn){{ xxx }}這種尷尬的情況,通過使用ng-bind-template指令,就可以避免尷尬情況的出現(xiàn).
//使用示例4.解決ng-if,ng-show,ng-hide偶然出現(xiàn)的閃現(xiàn)的問題
(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)通過廣播
通過子元素傳遞給父元素,然后父元素再廣播給其他子元素,注意這個廣播是很快就完成的,所以很有可能出現(xiàn)子頁面還未加載完父元素的廣播就已經(jīng)完成了,為了避免這種情況,需要父元素的廣播延遲執(zhí)行.
(這種情況有一個弊端,當(dāng)進(jìn)入子頁面后再次刷新頁面,這次的廣播已經(jīng)沒有了,就會導(dǎo)致這個子頁面的數(shù)據(jù)獲取失敗了.)
(3)定義全局變量(window)
將多個控制器都需要通訊的變量定義為全局的.這樣每個控制器都可以訪問到和改寫.
(4) 緩存
sessionStorage, localStorage, cookie,瀏覽器的各種數(shù)據(jù)庫
以上方法個人比較推薦路由傳參的方式
6.$destroy的使用是必要的(1)頁面離開時清除頁面的定時器
(2)頁面離開時清除頁面的監(jiān)聽器
(3)頁面離開時清除頁面的modal,popover之類的遮罩層.
var destroyWatcher = $scope.$watch(...); //示例代碼 //$watch方法會返回一個函數(shù),這個函數(shù)用來銷毀監(jiān)聽器,我們用一個變量承接這個函數(shù),然后再destory的時候調(diào)用這個函數(shù)就可以銷毀不必要的監(jiān)聽器了. $scope.$on("$destroy", function() { if (timer) { $timeout.cancel(timer); } $scope.popover.remove(); destroyWatcher(); }
就先寫到這兒了,后面會持續(xù)更新...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/92033.html
摘要:特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補(bǔ)充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會及時更新,平時業(yè)務(wù)工作時也會不定期更...
摘要:簡介前端發(fā)展迅速,開發(fā)者富有的創(chuàng)造力不斷的給前端生態(tài)注入新生命,各種庫框架工程化構(gòu)建工具層出不窮,眼花繚亂,不盲目追求前沿技術(shù),學(xué)習(xí)框架和庫在滿足自己開發(fā)需求的基礎(chǔ)上,然后最好可以對源碼進(jìn)行調(diào)研,了解和深入實(shí)現(xiàn)原理,從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...
摘要:下面圍繞的這樣的目的,即左右知乎網(wǎng)頁上屏幕截圖功能的實(shí)現(xiàn)前端掘金背景最近注意到知乎的屏幕截圖反饋功能,感覺非常不錯。正如你期望的,文中的闖關(guān)記之垃圾回收和內(nèi)存管理前端掘金題圖來源,授權(quán)基于協(xié)議。 微信小程序?qū)崙?zhàn)學(xué)習(xí) 起手式 DEMO 仿肯德基 - 前端 - 掘金小程序?大場景? 微信小程序本質(zhì)上來說就是一個 HTML 5(移動網(wǎng)頁) 應(yīng)用,用view、scoll-view代替了div標(biāo)...
摘要:前端學(xué)習(xí)資源實(shí)在是又多又廣,在這樣的一個知識的海洋里,我們像一塊海綿一樣吸收,想要快速提高效率,平時的總結(jié)不可缺少,以下總結(jié)了一些,排版自我感覺良好,推送出來,后續(xù)持續(xù)跟新中開發(fā)工具下載地址在線工具解析工具在線圖片壓縮在線編輯手冊在線進(jìn)制轉(zhuǎn) 前端學(xué)習(xí)資源實(shí)在是又多又廣,在這樣的一個知識的海洋里,我們像一塊海綿一樣吸收,想要快速提高效率,平時的總結(jié)不可缺少,以下總結(jié)了一些,排版自我感覺良...
摘要:系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...
閱讀 2664·2019-08-30 15:53
閱讀 2880·2019-08-29 16:20
閱讀 1087·2019-08-29 15:10
閱讀 1028·2019-08-26 10:58
閱讀 2198·2019-08-26 10:49
閱讀 640·2019-08-26 10:21
閱讀 708·2019-08-23 18:30
閱讀 1640·2019-08-23 15:58