ホームページ  >  記事  >  ウェブフロントエンド  >  ocLazyLoadを使用してjsの遅延ロードを実装するにはどうすればよいですか?

ocLazyLoadを使用してjsの遅延ロードを実装するにはどうすればよいですか?

零下一度
零下一度オリジナル
2017-07-18 17:48:291281ブラウズ

OcLazyLoadの説明

1.ocLazyLoadはAngularJSのサードパーティライブラリであり、モジュール、コントローラー、その他の依存関係の動的読み込み/オンデマンド読み込みを実現できます

2.$ocLazyLoad.load()は複数のファイルをサポートしており、自動的にロードできます 指定したファイル タイプを定義し、それをクライアントにキャッシュするかどうかをカスタマイズできます

3. $ocLazyLoad.load() は動的タイプ $$state を返しますが、関連するものはありません。存在しない、またはロードに失敗した js ファイルを処理するための API

最近、angular を使用して html フラグメントをルーティングするシステムを開発しているときに、リッチ テキストを実装するために js プラグインを使用する必要があるという問題に遭遇しました。編集者。重要な問題は、フラグメントがロードされた後、js を介して dom 要素にバインドする必要があることです。最初は、コード スニペットに JS コードを直接記述しても問題ないと考えましたが、試してみると、ルーティングが HTML フラグメントをページに挿入するとき、CSS を読み取ることしかできず、JS コードを解析して実行することはできません。 。

長い間グーグルで検索した結果、angular+requireJsのソリューションがたくさん見つかりましたが、requirejsは本質的にモジュールローダーであり、オンデマンドの読み込みは単なる副業であるため、私のシナリオには適していないと思います。モジュール式に設計されているため、純粋にオンデマンド読み込みのためにコードをラップ (定義) する場合、私のニーズでは、コストが膨大になります。 。

最終的に、ocLazyLoad を使用して処理することにしました。このソリューションの利点は、シンプルで実装が簡単で、侵入的ではないことです。同時に、このソリューションには、必要なスクリプトやテンプレート リソースを動的に読み込むたびに多くの不必要なネットワーク オーバーヘッドが発生すること、ルーティング定義が比較的複雑であることなど、いくつかの欠点があります (追加の構成項目がいくつかあるため、実際には複雑ではありませんが、大規模かつ複雑なビジネスアプリケーションやルートが多く、消費されるエネルギーは無視できません。でも、私の状況にはちょうどいいです。そこで、github で 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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。