RequireJS モジュール開発

不言
リリース: 2018-04-10 11:10:53
オリジナル
1423 人が閲覧しました

この記事では、RequireJS のモジュール開発について紹介します。必要な友人は参考にしてください。

モジュール化には、require を使用するだけです。 js.

require.js を使用する最初のステップは、公式 Web サイトから最新バージョンをダウンロードすることです。

ダウンロード後、jsサブディレクトリ配下に置くと読み込めると思われます。

 <script src="js/require.js"></script>
ログイン後にコピー

このファイルを読み込むと Web ページが応答しなくなる可能性があると考える人もいるかもしれません。解決策は 2 つあり、1 つは Web ページの下部にロードする方法で、もう 1 つは次のように記述することです。

 <script src="js/require.js" defer async="true" ></script>
ログイン後にコピー

async 属性は、Web ページが応答しなくなるのを避けるために、このファイルを非同期にロードする必要があることを示します。 。 IE はこの属性をサポートしておらず、defer のみをサポートしているため、defer とも記述されます。

require.js をロードしたら、次のステップは独自のコードをロードすることです。独自のコード ファイルが main.js であり、これも js ディレクトリの下に配置されていると仮定します。次に、次のように記述します:

 <script src="js/require.js" data-main="js/main"></script>
ログイン後にコピー

data-main 属性は、Web プログラムのメイン モジュールを指定するために使用されます。上記の例では、js ディレクトリ内の main.js が、require.js によって最初に読み込まれます。 require.js のデフォルトのファイル拡張子は js であるため、main.js は main と省略できます。

モジュール化:

define(["aa"], function(){//["aa"] は依存したい JS です。複数ある場合は、カンマで区切ります。そうでない場合は、ドンしてください。

 function fn(){
        //你要写的js代码
    }    return {
        fn:fn;//必须要有返回,用来在main中调用
    }
})
ログイン後にコピー
ログイン後にコピー

main.js

require.config({
 paths:{//路径起的名字 "jquery":"jquery-1.8.3.min", "cookie":"jquery.cookie"

 }
})require([&#39;jquery&#39;,&#39;cookie&#39;,&#39;details&#39;], function ($,cookie,Backbone){
    //数组中的是模块,模块都是一部加载的,function为每个模块的回调函数 cookie.fn();
 });
ログイン後にコピー
ログイン後にコピー

配列内にダウンロードしたプラグインがある場合は、プラグインをモジュール化し、それにdefine(function(){})を追加します

方法はたくさんありますAMD、CMDなどのモジュール化を開発します

モジュール化にrequireを使用するには、jsをインポートするだけです

require.jsを使用する最初のステップは、公式Webサイトから最新バージョンをダウンロードすることです

ダウンロード後、

 <script src="js/require.js"></script>
ログイン後にコピー

このファイルをロードすると Web ページが応答しなくなる可能性があると考える人もいるかもしれません。1 つは、このファイルを Web ページの下部にロードすることです。もう 1 つは、次のように記述することです:

 <script src="js/require.js" defer async="true" ></script>
ログイン後にコピー

async 属性は、Web ページが応答しなくなることを避けるために、このファイルを非同期でロードする必要があることを示します。そのため、require.js をロードした後、次の属性がサポートされます。ステップは独自のコードをロードすることです。独自のコード ファイルは main.js であり、これも js ディレクトリに配置されます。その後、次のように記述するだけです:

 <script src="js/require.js" data-main="js/main"></script>
ログイン後にコピー

data-main 属性の機能は次のとおりです。 Web ページプログラムのメインモジュールを指定します。require.js によって最初にロードされる Main.js は、require.js のデフォルトのファイル拡張子が js であるため、main.js は main と省略できます。 :

define. (["aa"], function(){//["aa"] は依存する JS です。複数ある場合はカンマで区切ります。複数ない場合は、

 function fn(){
        //你要写的js代码
    }    return {
        fn:fn;//必须要有返回,用来在main中调用
    }
})
ログイン後にコピー
ログイン後にコピー

main.js

require.config({
 paths:{//路径起的名字 "jquery":"jquery-1.8.3.min", "cookie":"jquery.cookie"

 }
})require([&#39;jquery&#39;,&#39;cookie&#39;,&#39;details&#39;], function ($,cookie,Backbone){
    //数组中的是模块,模块都是一部加载的,function为每个模块的回调函数 cookie.fn();
 });
ログイン後にコピー
ログイン後にコピー

配列内にダウンロードしたプラグインがある場合は、プラグインをモジュール化し、define(function(){}) を追加します

関連する推奨事項:

JS Modularization-RequireJS

requireJSはシンプルなモジュールローダーを実装します サンプル共有

RequireJsのソースコード分析と起動スクリプト読み込みの動作原理

以上がRequireJS モジュール開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート