用ocLazyLoad如何實現js延遲載入？

ocLazyLoad說明

1.ocLazyLoad是AngularJS的第三方函式庫，可實現模組、控制器及其他所依賴的動態載入/按需載入

#2 .$ocLazyLoad.load()支援多個文件，可以自訂指定文件類型，可以自訂指定是否緩存在客戶端

3.有問題，$ocLazyLoad.load()，傳回動態類型$ $state，對於js檔案不存在或載入失敗還沒有找到相關處理的api

　最近開發一個系統遇到了一個問題，用angular路由一個html片段，該片段需要使用一個js插件來實作一個富文本編輯器。關鍵問題在於片段載入後必須透過js與dom元素進行綁定。一開始想當然以為直接把js程式碼寫在程式碼片段裡不久ok了，然而經過實驗，路由將html片段插入頁面時只能讀取css，無法解析並執行js程式碼。

　　google了半天發現了很多angular+requireJs的解決方案，但我覺得對於我這個場景並不適合，因為requirejs本質是一個模組加載器，按需加載只是他的副業，我們用它應該主要是用它來做模組化的，如果我們單純為了按需加載卻要試用模組化語法包裝我們的程式碼(define)，感覺有點像用大砲打蚊子，對於我這種需求來說代價巨大。

　　最後決定使用ocLazyLoad來處理，因為此方案優點是，簡單易行無侵入。同時這個方案有些缺點，例如每次動態載入所需的腳本、模版資源會有很多不必要的網路開銷，路由定義比較複雜（多了一些配置項，其實不能算複雜，而是繁瑣），對於大型複雜業務應用，路由眾多，耗費的精力不可忽視。但是用在我這個場景之中正合適。於是便在github上fork下js,引進到專案中。

 <script src="js/ocLazyLoad.js?1.1.11"></script>

　　在需要用到的angular模組裡進行設定

var app = angular.module('formCtrlParts', ['oc.lazyLoad']);

再向路由需要用到的控制器裡面使用此服務進行js檔案的按需載入

app.controller('addNewBlogCtrl',function($scope,$http,$ocLazyLoad){
    $ocLazyLoad.load('../html/ckeditorjs/ckeditor.js');
   
})

這樣基本上就大功告成，ocLazyLoad有很多種載入方式，也可以配合路由，指令進行載入。　　　　　

#

以上是用ocLazyLoad如何實現js延遲載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！