JavaScriptの動的読み込み

全体のhabrasocietyに良い日! 最近、私は巨大なWebプロジェクトを(より正確には、完成させるために)開発しなければなりませんでした。 問題は、すべてのjavascriptファイルがすぐにロードされることでした。 さらに、機能を追加したい場合、これは新しいjsファイルであり、ユーザーにロードする必要があります(ただし、この機能は必要ないかもしれません)。 最近読んだ記事「 Dynamic Javascript module loading 」では、jsを動的にロードできることが明らかになったため、解決方法を探し始めました。



そして、ここに私が見つけた解決策があります。 プロジェクトを書き換える時間がなかったので、欲求がなかったので、オンデマンドでjsファイルをすばやくロードする簡単な方法しか見つかりませんでした。 インターネット上で、JSAN(JavaScript Archive Network、JSONと混同しないでください)などのライブラリを偶然見つけました。 このライブラリの開発者は、JavaScript専用のCPANアナログを作成しようとしています。



ここにソースへのリンクがあります

ここではすべてが美しく説明されていますが、最も基本的なものについて説明します。 JSANは、XMLHttpRequestを使用してサーバーにコードを動的にロードする機能を提供します。 ライブラリは1つのjsファイルに含まれており、ページに接続する必要があります。 さらに簡単です。 例:



JSAN.require( 'js.creating');

var creating = new js.creating();




次のJSAN.require呼び出しは、js / creating.jsのロードを試行し、include_pathのJSANで指定されたすべてのソースを検索しようとします。これはデフォルトで['。'、 'Lib']です。 そしてそれだけです!



唯一の要件は、すべてのモジュールが名前空間内にあることです。したがって、上記の例では、s / creating.jsの先頭は次のようになります。



if(js == undefined)var js = {};

if(js.creating == undefined)js.creating = {};




しかし、マイナスではなくプラスに起因すると考えます。これにより、開発者はライブラリを外部から隔離し、名前の競合の問題をほぼゼロに抑えることができます。 ところで、JSAN.requireに加えて、JSAN.useメソッドもあります。このメソッドを使用すると、必要な機能のみをモジュールからエクスポートできます。 最初にやらなければならないことは、古い関数の外観を次のように変換することでした



関数foo(var1、var2){...

}








foo = function(var1、var2){...

}




関数がロードされた唯一の方法なので。 次に、テンプレートに簡単な置換を追加しました。 たとえば、js / creating.jsファイルにitemsCreating関数があります。 ページ上のオブジェクトをクリックすることにより、それを実行する必要があります。



onclick = "javascript:itemsCreating(this);




に置き換えられました



onclick = "javascript:if(typeof itemsCreating!= 'function')JSAN.use( 'js.creating'); itemsCreating(これ);




これで、プロジェクトは余分なコード(およびユーザーのトラフィック)を取り除き、必要なjsファイルは機能が必要な場合にのみ呼び出されました。 ちなみに、 (typeof itemsCreating!= 'Function')により、itemsCreating関数が既に定義されているため(ページがリロードされるまで;)、このjsファイルを再度ロードする必要はありません。 まあ、それがすべてです。



PSHabréについての私の最初の記事です。したがって、批判は少なからず重要です。



All Articles