AJL-JavaScriptを使用してJSおよびCSSファイルをロードするためのコンポーネント

こんにちは、 Habr ！



最近、状況によって、サイズがシンプルで小さなリソースローダーを検索するように求められました。 しかし、私の検索はすべてrequire.jsにつながりました。何らかの理由でこれは私には不向きでした（これは別の記事のトピックです）。



そのため、 自転車を作成し、同時に練習することが決定されました。

その結果、 uglify形式で6.28 Kb、GZipで1.3 Kbを占めるコンポーネントが実装されました。



彼の重要な「チップ」：

• * .jsと* .cssの両方をロードできます。
• バッチシステムを実装しました。 各パッケージは個別の構成を持つことができます。
• ダウンロードはバッチで行われます。 つまり、目的のパッケージでload（）メソッドを呼び出すだけで十分で、その中にあるすべてのファイルがロードされます。
• 非同期と遅延読み込みモードの両方で読み込むことができます（パッケージのダウンロードはページ全体を読み込んだ後にのみ実行されます）。
• 基本的なパッケージ操作を簡素化する組み込みのパッケージマネージャーがあります。 つまり、ストレージ、作成、削除、ロード。
• 名前空間が実装されます（実際、実装は非常に単純であり、小規模プロジェクトの場合はプラスです）。

実際、ここにその主な機能の説明があります。



猫の下で、AJLを使用した短いコースと、いくつかのコンポーネントの開発の説明。





AJLを接続する

AJLを接続するときに指定する必要があるのは、data-ep属性だけです。 次に例を示します（ベースレイアウトでAJLを接続する）。

//baseLayout.html <script src="js/vendor/AJL.min.js" data-ep="EntryPoint.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

AJLを読み込んだ後、EntryPoint.jsを読み込みます。ここで、パッケージを構成します。

data-epを処方することはできません。 AJLを構成するのに便利な場所を自分で決定する権利があります。

EntryPoint.jsは、基本的に読み込み時にも実行されるスクリプトです。



パッケージを設定します

jQuery、そのプラグイン、およびスクリプトを接続する例を見てみましょう。 この場合、data-ep属性が使用されました。

 //EntryPoint.js AJL({ name: "jQuery", //  assets: ['js/vendor/jquery.min.js'], //  URL'    config: { //  async: false //   } }, { name: "jQuery Plugins", assets: ['js/vendor/jquery.plugin.js', 'js/vendor/jquery.plugin2.js'], config: { depend: ['jQuery'] //  ,       } }, { name: "My Scripts", assets: ['js/foo.js', 'js/bar.js'], config: { lazy: true //      window.onload } }).loadAll(); //  ,   PackageManager.  chainloading      
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

EntryPointはかなりきれいに見えます。 名前には、パッケージの名前を指定します。 assetでは、アセットURLの配列。 configでは、パラメーターを持つオブジェクト。 合計で、6つのパラメーターをconfigに渡すことができます。

• async（bool） -非同期にロードするかどうか
• lazy（bool） -ウィンドウの読み込みを待つ
• depend（配列） -依存関係
• scriptTypeAttr（文字列） -このパラメーターはスクリプトタイプ= ""に表示されます
• linkCssTypeAttr（文字列） -リンクタイプ= ""
• linkCssRelAttr（文字列） -リンクrel = ""

正直なところ、パラメータを使用してオブジェクトのタグの属性を取り出した理由を理解できませんでした。



EntryPoint.jsで何が起こりますか？



1. jQuery、jQuery Plugins、My Scriptsという名前の3つのパッケージが作成されます。 作成に成功すると、AJLはloadAll（）メソッドが存在するPackageManagerを返します。 このメソッドはパッケージをロードします。 すべてのパッケージは、配列をループしてload（）を呼び出すことによりロードされます。 ダウンロードに影響する可能性のある重要な要因は、ダウンロードがパッケージの作成順に発生することです。 したがって、最初に「深刻な」ライブラリを指定し、それ以外はすべて指定する方が適切です。



2.最初にjQueryをロードするのは非同期モードではありません。 jQueryのロード後、プラグインが開始されますが、jQueryのロード後にのみです。 そして最後に-ページのすべてのリソースをロードした後（マイロード）（遅延ロード）。



したがって、パッケージを使用してさまざまな構成を行うことができます。 カテゴリが異なる2つのページがあるとします。 1つはユーザー用のコントロールパネルで、もう1つはスクリプトのバンドルを備えたクールなエディターです。 これらのページにロードする必要があるスクリプトとスタイルは、互いに完全に異なります。 多くのスクリプト。 必要なヒープと不要なヒープをすべてロードしないでください。 2つの異なる基本レイアウトを作成しますか？ なんで？



AJLを使用すると、この状況に対する解決策を同様の方法で提案できます。



必要なすべてのパッケージを作成するEntryPointがあります。

  AJL({ name: "jQuery", assets: ['js/vendor/jquery.min.js'], config: { async: false } }, { name: "jQuery Plugins", assets: ['js/vendor/jquery.plugin.js', 'js/vendor/jquery.plugin2.js'], config: { depend: ['jQuery'] } }, { name: "Editor Scripts And Styles", assets: ['js/editor/foo.js', 'js/editor/bar.js', 'css/editor/style.css'], config: { depend: ['jQuery Plugins'] } }, { name: "My Dashboard Scripts", assets: ['js/foo.js', 'js/bar.js'], config: { lazy: true } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

loadAll（）に注意してください。 彼はここにいません。 パッケージの読み込みを完全に区別したいので、loadAll（）を呼び出しません。 作成するだけです。 また、エディターと統計パネルのビューがあるため、これらのビューで目的のパッケージを手動でダウンロードできます。

 //dashboard.html <script>AJL("My Dashboard Scripts").load();</script> //editor.html <script>AJL("Editor Scripts And Styles").load();</script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Editor Scripts And Stylesというパッケージのみをダウンロードすることに注意してください。 ここでの依存関係の解決は再帰的に行われるため、最後のリンクを呼び出すことができます。 次に、jQueryプラグインをロードしてから、jQueryをロードします。



したがって、パッケージのチェーンを構築し、作業に本当に必要なパッケージのみをダウンロードできます。



「フード」の下で何が起こりますか？



次に、いくつかのAJLモジュールの開発方法に移りましょう。



名前空間

最も興味深いのは、17行のコードでの名前空間の実装です。 ここではすべてが単純であり、本質は名前空間を配列の要素とその反復に分割することです。 最後の要素に到達したら、この要素にモジュールを割り当てます。

名前空間を作成するときに呼び出される関数のコードを提供します。

 setNamespace: function (namespace, module) { var parts = namespace.split('.'), parent = window, partsLength, curPart, i; //Need iterate all parts of namespace without last one partsLength = parts.length - 1; for (i = 0; i < partsLength; i++) { //Remember current part curPart = parts[i]; if (typeof parent[curPart] === 'undefined') { //If this part undefined then create empty parent[curPart] = {}; } //Remember created part in parent parent = parent[curPart]; } //And last one of parts need to be filled by module param parent[parts[partsLength]] = module; //And not forgot return generated namespace to global scope return parent; },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、モジュールを開発するときに、かなり単純な設計を使用できます。

 AJL("Module.SubModule", function() { return "Hi, I'm Module.SubModule"; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

パッケージ、PackageConfig、ローダー

パッケージとパッケージ構成は、プロトタイプ（つまりクラス）を備えた単なる関数です。 プロパティに保持しているのは、パッケージの名前、URLの配列、パッケージ構成のインスタンスだけです。 Package自体のload（）メソッドは、call（）を使用してLoader.jsから静的関数loadPackage（）を呼び出します。

  load: function () { AJL.Loader.loadPackage.call(this); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、不正なコードの重複から身を守るために行われます。 パッケージは異なり、構成は異なり、ブートローダーは1つでなければなりません。 Loader.jsとloadPackage（）は、DOMにタグを追加できる場合とできない場合に実際に決定を行います。

 loadPackage: function () { var helper = AJL.Helper, packageManager = AJL.PackageManager, pack = this, packageAssets = pack.getAssets(), packageConfig = pack.getConfig(), depend = packageConfig.getItem('depend'); //If assets array empty then halt loading of package if (helper.isEmpty(packageAssets)) { return false; } //If this package depend on other packages then load dependencies first if (!helper.isEmpty(depend)) { packageManager.loadByNames(depend); } //If need to wait window.load than call lazyLoad and return if (packageConfig.getItem('lazy') == true) { lazyLoad.call(pack); return true; } //In other cases just call startLoading directly for start loading startLoading.call(pack); return true; },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

依存関係の読み込みの実装方法に注意を払います。 このパッケージに依存関係がある場合、再帰ロードを呼び出します。 私たちは依存関係をロードし、等々、チェーンを上っていきます。



PackageManager

また、AJLの重要な部分は、パッケージを管理するPackageManagerです。 そのようなコレクター。 ゲッターがあり、オブジェクトがパッケージのインスタンスであるかどうかだけでなく、パッケージインスタンスの配列で要求された名前をチェックするセッターがあります。 その場合、それを返すか、必要なアクションを実行します。 たとえば、考慮されるloadAll（）関数は通常の列挙によって動作します。

 loadAll: function () { var helper = AJL.Helper, curPack; for (var pack in packages) { if (packages.hasOwnProperty(pack)) { curPack = packages[pack]; if (helper.isInstanceOf(curPack, AJL.Package)) { curPack.load(); } } } return this; },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

配列を反復処理し、それがインスタンスパッケージである場合は、load（）を呼び出します。 依存パッケージをロードするとき、loadByNames（）関数を使用します。

 loadByNames: function (names) { var helper = AJL.Helper, curName, namesLength, i; namesLength = names.length; for (i = 0; i < namesLength; i++) { curName = names[i]; if (packages.hasOwnProperty(curName) && helper.isInstanceOf(packages[curName], AJL.Package)) { packages[curName].load(); } } return this; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

配列全体を名前でソートし、ストレージパッケージに名前があるかどうかを確認します。 「はい」であり、インスタンスパッケージである場合は、load（）を呼び出します。



Ajl

そして最後に、最も重要なこと。 AJL（）関数。

 AJL = function () { var packageManager = AJL.PackageManager, namespace = AJL.Namespace, helper = AJL.Helper, packageInstance = {}, packageName = '', packageAssets = [], packageConfig = {}, argLength = arguments.length, argFirst, argSecond, i; //Switch of arguments length for detect what need to do switch (argLength) { case 0: //If arguments not exists then just return PackageManager instance return packageManager; case 1: argFirst = arguments[0]; //If this arg is string then return package with this name if (helper.isString(argFirst)) { return packageManager.getPackage(argFirst); } break; case 2: argFirst = arguments[0]; argSecond = arguments[1]; //If first arg is string and second object or function if (helper.isString(argFirst) && (helper.isObject(argSecond) || helper.isFunction(argSecond))) { //Then I think that it's namespace setting namespace.setNamespace(argFirst, argSecond); return packageManager; } break; default: break; } //If all predefined templates in arguments didn't decided then create packages from them for (i = 0; i < argLength; i++) { if (!helper.isUndefined(arguments[i])) { packageName = arguments[i].name; packageAssets = arguments[i].assets; packageConfig = arguments[i].config; packageInstance = new AJL.Package(packageName, packageAssets, packageConfig); packageManager.setPackage(packageInstance); } } return packageManager; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初に、関数に渡された引数の数を見てください。 何も送信されなかった場合、すぐにPackageManagerを返します。 1行渡された場合は、パッケージの名前が提供されていると想定して検索します。 検索後、Packageオブジェクトを返します。 2つのパラメーターが渡され、最初のパラメーターが文字列の場合、2番目のパラメーターをこの名前空間に（最初のパラメーターから）スローします。 そして最後に、何も起こらなかった場合、これがAJLの開始構成であると考え、その中にすべてのパッケージを作成します。



この場所を読む力を見つけたすべての人に感謝します。 AJLを試してみたい場合は、必要なすべてのリソースがあります。



メインページ

GitHubソース

ドキュメント



PS私はすべての希望と批判に感謝するでしょう。 開発をあきらめるつもりはありません。 アイデアが尽きました:)