プロジェクトのほとんどはモジュール開発を使用しているため、JSINGJSがAMDモジュール開発のモデルであるため、学習する必要があります。 Demosを段階的に段階的に使用することにより、Demosの全体的な開発プロセスと、自分でRequesJを使用する感情の一部を学ぶことができます。
AMD:モジュールに基づくJavaScriptコードの非同期負荷のメカニズム。開発者はJavaScriptコードをモジュールにカプセル化することを推奨します。グローバルオブジェクトへの依存は、多くのグローバル変数を宣言することなく、他のモジュールへの依存度になります。遅延とオンデマンドの負荷を通じて、個々のモジュールの依存関係を解決します。モジュラーJavaScriptコードの利点は明らかです。さまざまな機能コンポーネントのゆるい結合により、コードの再利用性と保守性が大幅に向上する可能性があります。 JavaScriptコードのこの非ブロッキングの同時ロードは、写真、CSS、その他のDOMノードなどのJavaScriptコードに依存しない他のUI要素をWebページ上に、最初にロードするために、Webページがより速く読み込まれ、ユーザーもより良い体験を得ることができます。
1。Lequiejsをダウンロードします
Requiejsを使用したモジュール開発の前に、何かを準備する必要があります。それは、それに基づいて開発されたため、require.jsファイルをダウンロードする必要があります。
2。HTMLファイルを作成します
HTMLファイルを作成した後、Imponting requirejsは<script>タグを使用する必要があります。これには疑いの余地はありません。次に、このタグにはデータメイン属性があります。その機能は、入り口と出口として機能することです。つまり、Loading requirejsの後にデータメイン属性から入力します。
たとえば、以下は次のとおりです。
< src = "js/require.js"> </script> </body> </html>
js/require.jsをロードすると、JS/MainのJSファイルを実行します。メインはJSファイルでもあります。 .jsの接尾辞を省略でき、JSが追加される必要があります。
3。データメイン
プログラムが<Script Data-Main = 'JS/Main' Src = 'JS/require.js'> </script>を実行した後、data-mainを介してmain.jsを入力してmain.jsを実行しますでは、main.jsは何ですか?
コードをご覧ください:
/* config baseurlを「js」として実行すると、baseurlはモジュールファイルのルートディレクトリを指します。モジュールファイルは相対パスまたは相対パスである可能性があります*/require.config({baseurl: 'js'、paths:{jquery: 'jquery-1.8.2.min'}});モンキーなどの匿名関数 - > mk*/require(['monkey']、function(mk){mk.init();});上記のコードから、main.jsには2つのモジュールが含まれていることがわかります。
require.configの関数は、requirejsのパラメーターを構成し、それを公開することです。
たとえば、上記のベースールの関数は、それをベースパスとして使用し、このパスの下でファイルを検索することです。 JSフォルダーにすべての.jsファイルを配置します。したがって、このプロパティを構成した後、後続のファイルはJSパスでコンテンツを検索します。
次のように:
require(['monkey']、function(monkey){monkey.init();});サルを指すとき、それはJS/モンキーではなく、参照モンキーです。
パスの役割は何ですか?一般的に使用されるJSファイルを共通名に置き換えることです。たとえば、jQuery-1.8.2.min.js、それを呼び出すたびにこれを書くことはできないため、便利なため、jquery-1.8.2.min.jsを置き換えます。将来的には、jQueryを直接使用できます。これは高速で便利です。
さて、require.configは基本的にそれに精通しています。一言で言えば、その機能はrequirejsを構成することです。
必要なのはどうですか?
必要な機能は実行することです。たとえば、ここではmonkey.jsのみを実行する必要があるため、Monkeyをインポートしてから、MKパラメーターを介したサルの実行後に戻り値を取得しました。返品値がある場合は、MKの対応する処理を行うことができます。
ねえ、猿の中には何がありますか?
見てみましょう:
/*パラメーターは匿名関数であり、オブジェクトを返します*/define(['jquery']、function($){var init = function(){console.log($。browser);}; return {init:init};});定義する!その機能は、他のモジュールまたは要求で使用するJSモジュールを定義することです。他のJSモジュールを参照する方法は、要件の方法と類似しています。必要なJSファイルを導入し、パラメーターに1つずつ対応します。他のモジュールは定義で定義されているメソッドまたは変数にアクセスできないことに注意することが重要です。したがって、他のモジュールにアクセスできるようにする場合は、対応するメソッド(返品)または関数を削除できます。ここで、私が返すのは、他のモジュールが呼び出すためのinitを提供するオブジェクトです。