検索
ホームページウェブフロントエンドjsチュートリアルJavaScript_Basics 用の RequireJS ライブラリの使用を開始する

はじめに

現在最も一般的に使用されている JavaScript ライブラリの 1 つは、RequireJS です。私が最近関わったプロジェクトはすべて RequireJS を使用しているか、プロジェクトに RequireJS を追加することを推奨しています。この記事では、RequireJS とは何か、およびその基本的なシナリオのいくつかについて説明します。
非同期モジュール定義 (AMD)

RequireJS について語るとき、JavaScript モジュールとは何か、そして AMD とは何かについて触れずにはいられません。

JavaScript モジュールは、SRP (単一責任原則) に準拠し、パブリック API を公開する単なるコード スニペットです。最新の JavaScript 開発では、多くの機能をモジュールにカプセル化でき、ほとんどのプロジェクトでは、各モジュールに独自のファイルがあります。これにより、JavaScript 開発者にとって作業が少し難しくなります。モジュール間の依存関係に常に注意を払い、これらのモジュールを特定の順序でロードする必要があり、そうしないとランタイムがエラーをスローするからです。

script タグは、JavaScript モジュールをロードする場合に使用します。依存モジュールをロードするには、最初に依存モジュールをロードし、次に依存モジュールをロードする必要があります。スクリプト タグを使用する場合は、この特定の順序でロードを調整する必要があります。スクリプトは同期的にロードされます。 async キーワードと defer キーワードを使用して読み込みを非同期にできますが、読み込みプロセス中に読み込み順序が失われる可能性があります。別のオプションとして、すべてのスクリプトをまとめてバンドルすることもできますが、バンドルするときにスクリプトを正しい順序で並べ替える必要があります。

AMD は、モジュールとその依存関係を非同期かつ正しい順序でロードできるようにモジュールを定義します。

201571114812111.png (398×342)

CommonJS は、一般的な JavaScript パターンを標準化する試みです。これには、この記事を続ける前に読むことをお勧めする AMD 定義 が含まれています。 JavaScript 仕様の次のバージョンである ECMAScript 6 には、JavaScript 言語の一部となる出力、入力、およびモジュールの仕様定義があり、それほど長くはかかりません。これは、RequireJS について言いたいことでもあります。

JS が必要ですか?

RequireJS は、http://requirejs.org/ から、または Visual Studio を使用している場合は Nuget からダウンロードできる Javascript ファイルおよびモジュール フレームワークです。 Node.js などのブラウザおよびサーバー環境をサポートします。 RequireJS を使用すると、関連する依存モジュールのみを順次読み取ることができます。

RequireJS は、script タグを使用して定義した依存関係を読み込むときに、head.appendChild() 関数を通じてこれらの依存関係を読み込みます。依存関係が読み込まれると、RequireJS はモジュール定義の順序を計算し、正しい順序で呼び出します。これは、「ルート」を使用して必要なすべての機能を読み取るだけでよく、残りは RequireJS が実行することを意味します。これらの機能を正しく使用するには、定義するすべてのモジュールで RequireJS API を使用する必要があります。そうしないと、期待どおりに動作しません。

RequireJS API は、RequireJS のロード時に作成される requirejs 名前空間の下に存在します。その主要な API は主に次の 3 つの関数です:

  1. 定義 – この機能を使用すると、ユーザーはモジュールを作成できます。各モジュールには一意のモジュール ID があり、これは RequireJS のランタイム関数で使用されます。define 関数はグローバル関数であり、requirejs 名前空間を使用する必要はありません。
  2. require – この関数は依存関係を読み取るために使用されます。また、これはグローバル関数であるため、requirejs 名前空間を使用する必要はありません。
  3. config – この関数は、RequireJS を構成するために使用されます。

後でこれらの関数の使用方法を説明しますが、最初に RequireJS の読み込みプロセスを理解してください。

データメイン属性

RequireJS をダウンロードした後、最初に行う必要があるのは、RequireJS がどのように動作し始めるかを理解することです。 RequireJS がロードされると、data-main 属性を使用してスクリプト ファイルが検索されます (これは、src を使用して RequireJS をロードしたスクリプトと同じである必要があります)。 data-main は、すべてのスクリプト ファイルのルート パスを設定する必要があります。このルート パスに基づいて、RequireJS はすべての関連モジュールを読み込みます。次のスクリプトは、data-main の使用例です:

ルート パスを定義するもう 1 つの方法は、後で説明するように、構成関数を使用することです。 requireJs はすべての依存関係がスクリプトであると想定しているため、スクリプトの依存関係を宣言するときに .js 接尾辞を使用する必要はありません。

設定機能

独自の構成を使用するように RequireJS のデフォルト構成を変更したい場合は、require.configh 関数を使用できます。 config 関数は、多くの構成パラメーター オプションを含むオプションのパラメーター オブジェクトを渡す必要があります。使用できる構成をいくつか示します:

  • baseUrl - モジュールのロードに使用されるルート パス。
  • パス - ルート パスの下に存在しないモジュール パスをマップするために使用されます。
  • Shims - RequireJS を使用しないスクリプト/モジュールの外部で設定された関数の依存関係と初期化関数。 RequireJS を使用してアンダースコアが定義されていないが、依然として RequireJS を通じて使用したい場合は、構成内でアンダースコアを shim として定義する必要があります。
  • deps - 依存関係配列のロード

構成の使用例を次に示します:

require.config({
  //By default load any module IDs from scripts/app
  baseUrl: 'scripts/app',
  //except, if the module ID starts with "lib"
   paths: {
    lib: '../lib'
  },
  // load backbone as a shim
  shim: {
    'backbone': {
      //The underscore script dependency should be loaded before loading backbone.js
      deps: ['underscore'],
      // use the global 'Backbone' as the module name.
      exports: 'Backbone'
    }
  }
});

この例では、ルート パスは scripts/app に設定されており、lib から始まる各モジュールは scripts/lib フォルダーの下に設定されています。

RequireJS でモジュールを定義する

モジュールは、内部実装のカプセル化、公開されたインターフェイス、および合理的に限定されたスコープを持つオブジェクトです。 ReuqireJS はモジュールを定義するための定義関数を提供します。慣例により、JavaScript ファイルごとに 1 つのモジュールのみを定義する必要があります。定義関数は、依存関係配列とモジュール定義を含む関数を受け入れます。通常、モジュール定義関数は、前の配列内の依存モジュールをパラメータとして順番に受け取ります。たとえば、これは簡単なモジュール定義です:

define(["logger"], function(logger) {    
    return {
       firstName: “John",
       lastName: “Black“,
       sayHello: function () {
        logger.log(‘hello');
       }
    }
  }
);

ロガーを含むモジュール依存関係配列が定義関数に渡され、モジュールが後で呼び出されることを確認します。同様に、定義されたモジュールに logger という名前のパラメータがあり、これが logger モジュールに設定されることがわかります。すべてのモジュールはその API を返す必要があります。この例では、2 つのプロパティ (firstName と lastName) と 1 つの関数 (sayHello) があります。その後、後で定義するモジュールが ID でこのモジュールを参照する限り、その公開された API を使用できます。

require 関数を使用します

RequireJS のもう 1 つの非常に便利な関数は、require 関数です。 require 関数はモジュールの依存関係をロードするために使用されますが、モジュールは作成されません。例: 次の用途では、jQuery を使用できる関数を定義する必要があります。


require(['jquery'], function ($) {
  //jQuery was loaded and can be used now
});

概要

この記事では、RequireJS ライブラリを紹介しました。これは、私がすべての JavaScript プロジェクトを作成するために使用するライブラリ関数の 1 つです。 RequireJS は、モジュールの依存関係や関連コマンドを読み込むために使用されるだけでなく、モジュール式の JavaScript コードを作成するのにも役立ちます。これはコードのスケーラビリティと再利用性に非常に役立ちます。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!