Dojo1.6新機能:AMD仕様

6814 ワード

1.AMDの由来
先端技術は絶えず発展しているが、質的な飛躍はずっとない.Dojo、JQuery、ExtJsなど、既存の有名なフレームワークのほか、多くの会社も独自の先端開発フレームワークを持っています.これらのフレームワークの使用効率と開発品質は、開発者の熟知度、JavaScriptの熟知度に大きく依存しています.これも、多くの会社の技術リーダーが自分のフレームワークを開発するのが好きな理由です.自分で使えるフレームワークを開発するのは難しくありませんが、みんなが好きなフレームワークを開発するのは難しいです.1つのフレームワークから新しいフレームワークに移行すると、開発者は既存のフレームワークの思考に従って問題を考え、解決する可能性が高い.この中の1つの重要な原因はJavaScript自身の柔軟性です:フレームワークはあなたの行為を絶対的に制約することができなくて、1つのことはいつも多くの方法で実現することができて、だから私たちは方法学の上で正しい実施方法を導くしかありません.幸いなことに、このレベルのソフトウェア方法学の研究では、絶えず試みと改善を行っている人がいます.CommonJSはその中の重要な組織です.彼らは多くの新しいJavaScriptアーキテクチャ案と標準を提出し、先端開発に銀卵を提供し、統一的なガイドラインを提供することを望んでいる.
AMD仕様は、Asynchronous Module Definition、すなわち非同期モジュールロードメカニズムとして知られています.その仕様記述ページから見ると、AMDは短くて簡単ですが、モジュールの定義、依存関係、参照関係、ロードメカニズムを完全に記述しています.それがrequireJS,NodeJs,Dojo,JQueryに使われていることからも大きな価値があることがわかります.間違いなく、JQueryも最近AMD仕様を採用しています.この記事では、AMDの性質、使い方、利点、およびアプリケーションシーンについて説明します.AMDからも、より高いレベルで自分のフロントエンドアプリケーションを設計する方法を学ぶことができます.
2.AMDとは何か
1つの仕様として、その構文APIを定義するだけで、その実装に関心を持たない.AMD仕様は、1つのAPI、すなわちdefine関数のみに簡単です.
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
次のようになります.
  • module-name:モジュールID、省略可能.
  • array-of-dependencies:依存するモジュールは省略できます.
  • module-factory-or-object:モジュールの実装、またはJavaScriptオブジェクト.

  • ここから,第1パラメータと第2パラメータはいずれも省略可能であり,第3パラメータはモジュールの具体的な実装そのものであることがわかる.異なる適用シーンでは、異なるパラメータの組み合わせが使用されることについて説明します.
    このdefine関数AMDにおけるA:Asynchronousから,define関数が持つ別の性質,非同期性も容易に考えられる.define関数が実行されると、2番目のパラメータにリストされている依存モジュールが最初に非同期で呼び出され、すべてのモジュールがロードされた後、3番目のパラメータがコールバック関数である場合に実行され、システムモジュールが使用可能であることを通知し、自分に依存するモジュール自身が使用可能であることを通知します.dojo 1に対応する場合.6以前の実装では、機能的に次のような対応関係が得られる.
  • module-name: dojo.provide
  • dependencies: dojo.require
  • module-factory: dojo.declare

  • 異なることに、AMDは依存項目をロードする際に非同期で使用され、dojo.requireは同期です.非同期と同期の違いは明らかで、前者はブラウザをブロックせず、パフォーマンスと柔軟性が向上します.一方、NodeJsのようなサーバ側AMDでは、モジュールのロードはサーバプロセスをブロックする必要がなく、パフォーマンスも向上します.
    3.AMDインスタンス:モジュールの定義方法
    次のコードは、alphaモジュールを定義し、組み込まれたrequire、exportsモジュール、および外部のbetaモジュールに依存します.3番目のパラメータはコールバック関数であり、依存モジュールを直接使用することができ、依存宣言の順序でパラメータとしてコールバック関数に提供されることがわかります.
    ここのrequire関数は、モジュールの参照を取得するモジュールにいつでも依存することができ、モジュールがパラメータとして定義されていなくても使用することができます.exportsは定義されたalphaモジュールのエンティティであり、その上で定義された任意の属性と方法、すなわちalphaモジュールの属性と方法である.exportsでverb = ...Alphaモジュールのverbメソッドを定義します.例では,モジュールbetaを簡単に呼び出したverbメソッドである.
    define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
        exports.verb = function() {
            return beta.verb();
            //  :
            return require("beta").verb();
        }
    });

    4.匿名モジュール
    defineメソッドでは、最初のパラメータを省略して匿名モジュールを定義できます.モジュールファイルのファイル名がモジュールIDです.このモジュールファイルがa.jsに格納されている場合、aはモジュール名である.この匿名モジュールに依存するには、依存項目で「a」を使用します.これは、モジュールが高度に再利用可能であるという利点をもたらします.匿名のモジュールを持ってきて、勝手に1つの場所に置いて使用することができます.モジュール名はファイルパスです.これもDRY(Don't Repeat Yourself)の原則によく合っている.
    次のコードは、alphaモジュールに依存する匿名モジュールを定義します.
    define(["alpha"], function (alpha) {
        return {
          verb: function(){
            return alpha.verb() + 2;
          }
        };
    });

    5.パラメータが1つしかないdefine
    前述したように、defineの最初の2つのパラメータは省略できます.3番目のパラメータには、JavaScriptオブジェクトと関数の2つのケースがあります.
    オブジェクトの場合、メソッドに機能を持つオブジェクトである可能性があります.データのみを提供する場合もあります.後者はJSON−Pと非常に類似しているため,AMDは完全なJSON−P実装を含んでいると考えられる.モジュールは単純なデータオブジェクトに進化し,このようなデータオブジェクトは高度に利用可能であり,静的オブジェクトであるためCDNにも友好的であり,JSON−Pの性能を向上させることができる.中国省・市の対応関係を提供するJavaScriptオブジェクトを考慮し、従来のJSON-Pの形式でクライアントに提供する場合は、callback関数名を提供し、この関数名に基づいて戻りデータを動的に生成しなければならない.これにより、標準JSON-PデータはCDNフレンドリーではないに違いない.しかし、AMDを使用すると、このデータファイルは次のような形式になります.
    define({  
        provinces: [
        {
            name: '  ', 
            areas: ['    ', '   ']},
        {
            name: '  ', 
            cities: ['  ', '  ']}
            //.....  
        ]
    });

    このファイルの名前をchinaと仮定します.js、モジュールにこのデータが必要な場合は、次のようにします.
    define(['china', function(china){
        //           
    });

    このようにして、このモジュールは本当に高度に多重化され、リモートでもCopyからローカルプロジェクトでも開発時間とメンテナンス時間を節約します.
    パラメータが関数の場合、その用途の1つは迅速な開発実装です.小型のアプリケーションに適しており、自分がどのモジュールを必要としているのか、自分が誰に使うのかを事前に注目する必要はありません.関数では、いつでもrequire自身が必要とするモジュールを呼び出すことができます.例:
    define(function(){
        var p = require('china');
        //  china    
    });

    つまり、モジュール名と、自分が依存するモジュールを省略します.これは、他のモジュールに依存する必要がないという意味ではなく、必要なときにこれらのモジュールをrequireすることができます.defineメソッドは実行時に関数のtoStringメソッドを呼び出し、その中のrequire呼び出しをスキャンし、これらのモジュールを事前にロードし、ロードが完了してから実行します.これにより、迅速な開発が可能になります.注意すべき点は、Operaは関数のtoStringメソッドをうまくサポートできないため、ブラウザでの適用性はそれほど強くありません.ただし、buildツールを使用してすべてのJavaScriptファイルをパッケージ化している場合は、問題ではありません.構築ツールは、requireをスキャンし、依存するモジュールを強制的にロードするのに役立ちます.
    6.DojoのAMD
    Dojoは3月初めに1.6バージョンを正式に発表したが、その重要な変化の一つはAMDメカニズムを導入し、元のdojoに取って代わったことだ.それは...requireメソッド.しかし、現在は後方互換性が維持されており、dojoを使用することができます.それは...requireはモジュールを定義してロードします.なお、Dojo 1.6では、AMDの再構築は移行期の変更であり、ユーザが独自に開発したAMDモジュールはDojoのローダおよびBuildシステムによってサポートされていない.1.6の既存のコンパイルシステムによるAMDのサポートは非常に限られている.AMDフォーマットのモジュールを独自に開発し、デフォルトのDojo同期モジュールローダを使用している場合は、自分のモジュールが正常にコンパイルされることを保証するために、Dojoモジュールのフォーマット(改行フォーマットを含む)に厳格に従う必要があります.まとめると、以下の3つの点があります.
  • 従来の方法(dojo.require()/dojo.Provide()–これらのモジュールは、Dojo同期ローダのみでロードできますが、Dojoコンパイルシステム(Build System)で
  • 正しくコンパイルできます.
  • は、Dojo同期ローダによってAMD形式(define()モジュールをロードする-これらのモジュールは、正常にロードすることができ、他のAMD形式に対応するローダによってロードすることができる.今は6まだ正式にこの用法を支持していないが、現在のDojo 1.6コンパイルシステムでは、正常に動作する.(Dojoモジュール定義のコード仕様に厳格に従う必要があることを前提とします)
  • サードパーティ製ローダを使用するAMD形式(define()モジュールをロードする-モジュールは正常にロードすることができ、他のローダで使用することができる.これらのモジュールはRequireJSまたはBackdraftが提供するコンパイルシステムを使用して正常にコンパイルできるが、Dojoは他のローダとの互換性を正式にテストしたことがない.

  • Calendarを例にとると、defineメソッドでこのモジュールを定義します.
    define("dijit/Calendar", 
        ["dojo", "dijit", "text!dijit/templates/Calendar.html", 
    	"dojo/cldr/supplemental", "dojo/date", "dojo/date/locale",
    	"dijit/_Widget", "dijit/_Templated", "dijit/_CssStateMixin", "dijit/form/DropDownButton"], 
    	function(dojo, dijit) { 
            dojo.declare(
                "dijit.Calendar",
                [dijit._Widget, dijit._Templated, dijit._CssStateMixin],
                {...}
            );
            return dijit.Calendar;
        }
    );

    モジュールIDはモジュールファイルのパスであり、モジュール自体は一般的にdojoであることがわかります.declare定義のクラス.Dojo1.6のdojoとdijitネーミング空間のモジュールはAMDの形式で再構築されたが、dojoxの下では従来のdojoが延用されている.それは...require形式.AMDの導入はDojoの自動化パケット管理への重要な一歩であり、後続の文章でもDojoのこの方面の進展に注目し続けます.
    7.結論
    AMD仕様はJavaScript開発の重要な試みであり、JavaScriptのモジュール定義とロードメカニズムを簡単で優雅な方法で統一し、多くのフレームワークの認可と採用を迅速に得ている.これは開発者にとって良いニュースで、AMDを通じて私たちは各種のフレームワークの敷居を下げて、1種の統一的な方法でモジュールを定義して使用することができて、開発効率を高めて、応用メンテナンスコストを下げました.
    参考資料:
    Dojo中国語ブログRequireJS/AMD Module Forms Modules/asynchronousDefinition