最近開發(fā)一個(gè)系統(tǒng)遇到了一個(gè)問題,用angular路由一個(gè)html片段,該片段需要使用一個(gè)js插件來實(shí)現(xiàn)一個(gè)富文本編輯器。關(guān)鍵問題在于必須要在片段加載后通過js與dom元素進(jìn)行綁定。一開始想當(dāng)然以為直接把js代碼寫在代碼段里不久ok了,然而經(jīng)過實(shí)驗(yàn),路由將html片段插入頁面時(shí)只能讀取css,無法解析并執(zhí)行js代碼。
google了半天發(fā)現(xiàn)了很多angular+requireJs的解決方案,但我覺得對于我這個(gè)場景并不適合,因?yàn)閞equirejs本質(zhì)是一個(gè)模塊加載器,按需加載只是他的副業(yè),我們用它應(yīng)該主要是用它來做模塊化的,如果我們單純?yōu)榱税葱杓虞d卻要試用模塊化語法包裝我們的代碼(define),感覺有點(diǎn)像用大炮打蚊子,對于我這種需求來說代價(jià)巨大。
最后決定使用ocLazyLoad來處理,因?yàn)榇朔桨竷?yōu)點(diǎn)是,簡單易行無侵入。同時(shí)這個(gè)方案有些缺點(diǎn),比如每次動(dòng)態(tài)加載需要的腳本、模版資源會(huì)有很多不必要的網(wǎng)絡(luò)開銷,路由定義比較復(fù)雜(多了一些配置項(xiàng),其實(shí)不能算復(fù)雜,而是繁瑣),對于大型復(fù)雜業(yè)務(wù)應(yīng)用,路由眾多,耗費(fèi)的精力不可忽視。但是用在我這個(gè)場景之中正合適。于是便在github上fork下js,引入到項(xiàng)目中。
<script src="js/ocLazyLoad.js"></script>
在需要用到的angular模塊里進(jìn)行配置
var app = angular.module('formCtrlParts', ['oc.lazyLoad']);再向路由需要用到的控制器里面使用此服務(wù)進(jìn)行js文件的按需加載
app.controller('addNewBlogCtrl',function($scope,$http,$ocLazyLoad){ $ocLazyLoad.load('../html/ckeditorjs/ckeditor.js');})這樣基本就大功告成,ocLazyLoad有很多種加載方式,也可以配合路由,指令進(jìn)行加載。
以上所述是小編給大家介紹的AngularJS使用ocLazyLoad實(shí)現(xiàn)js延遲加載,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對錯(cuò)新站長站網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選