ホームページ > 記事 > ウェブフロントエンド > JS モジュール性 - RequireJS
JS モジュール性 - RequireJS
- php中世界最好的语言オリジナル
- 2018-03-07 09:43:212050ブラウズ
今日は JS のモジュール化 - RequireJS について説明します。JS のモジュール化と RequireJS の使用方法に関する 注意事項 について説明します。以下は実際的なケースですので、見てみましょう。
RequireJS については以前から聞いたことはありましたが、理解する機会がありませんでした。JS の モジュール化 のための API であることしか知りませんでした。私は最近 React に取り組んでいますが、そのコンポーネント化の考え方は JS のモジュール化の考え方と一致しています。 React を適用しているときに RequireJS をプロジェクトに追加して、ページの読み込みや開発に良い影響を与えるかどうかを確認したいだけです。
RequireJSとは何ですか?
RequireJSとは何かを説明する前に、Javascriptのモジュール化の歴史の背景に触れなければなりません。実際、初期の頃、JavaScript は大きなビジョンを持った新興のスクリプト言語として登場しましたが、クライアント専用に設計された言語ではありませんでした。ただ、その後の Web アプリケーションの人気により、JavaScript はブラウザ側のスクリプト言語として急速に普及し、Netscape と Microsoft の間の競争により時期尚早に標準化されてしまいました。これにより、JS の多くの欠陥が生じました。その 1 つはモジュール性です (しかし、JavaScript が実際に import 、export などを予約語として使用していることに驚くでしょう。これは、それが設計時に実際に考慮されたことを示しています)。新しい標準es6 では、モジュール化をネイティブでサポートすることもできます)。その後、Web アプリケーションがますます複雑になるにつれて、ますます多くの JavaScript コードが埋め込まれ、ノードの台頭によりモジュール式プログラミングが必須になります。
それで、後に Dojo ツールキットと Google の Closure ライブラリによってサポートされるモジュール システムが登場しました。 CommonJS と AMD という 2 つの非常に一般的な標準仕様もあります。ここでは詳細には触れませんが、CommonJS 仕様を実装する API はモジュールを同期的にロードし、AMD 仕様を実装する API はモジュールを非同期的にロードすることだけを理解する必要があります。
理論的には、AMD 仕様のノンブロッキング読み込みの方がブラウザ側に適しています。 RequireJS は、AMD 仕様の最良の実装です。公式ドキュメントから RequireJS の説明をコピーします:
RequireJS は JavaScript モジュール ローダーです。ブラウザでの使用に最適ですが、Rhino や Node などの他のスクリプト環境でも使用できます。RequireJS を使用してモジュール スクリプトを読み込むと、コードの読み込み速度と品質が向上します。
なぜ RequireJS が必要なのでしょうか?
ということで、RequireJS が何をするのかがわかったので、RequireJS を使用する理由もほぼわかりました。 RequireJS を使用するメリットをまとめてみましょう。
非同期「読み込み」。通常、Web サイトでは、ブラウザーによる js の実行によって引き起こされるページのブロックを避けるために、スクリプトを html の最後に配置することがわかっています。 RequireJS を使用すると、関連する js が読み込まれた後に コールバック関数 が実行されます。このプロセスは非同期であるため、ページはブロックされません。
オンデマンドでロードします。 RequireJS を使用すると、JS ロジックをロードする必要があるときに対応する JS モジュールをロードできるため、Web ページの初期化時に大量のリクエストやデータ送信が回避されるため、一部のモジュールがまったく利用できない場合があります。必要な場合は不要に思えます。
モジュールの依存関係管理がさらに便利になりました。この関数は未定義、その変数は未定義などの理由で、依存関係エラーが発生したと思います。 RequireJS のメカニズムを通じて、すべての依存モジュールがロードされた後に関連ファイルが確実に実行されるようにすることができるため、依存関係の管理において役割を果たすことができます。
より効率的なバージョン管理。 jQuery2.Go を導入するためにまだスクリプトを使用している場合は、これらの 100 ページを変更してください。ただし、requireJS の構成に jQuery パス マッピングがある場合、変更する必要があるのは 1 か所だけです。
もちろん、cdn が js ファイルをロードできない、ローカル ファイルをリクエストできるなど、他の利点もあります。ここではすべてをリストすることはしません。
RequireJSは、ページ内で導入する必要がある
ファイルを使用します
<script data-main="js/main" src="xxx/xxxx/require.js"></script>
RequireJSを使用する場合、require.jsを導入するだけで済みます。この js はページ上の 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを通じてのみ導入することをお勧めします。その後、ページのすべてのビジネス ロジックを main.js に記述するだけで済みます (data-main 属性の役割については後で説明します)。他の参照された依存関係はどうすればよいでしょうか?もちろんrequireによるオンデマンド導入です！
Requireの基本概要
実際、Requirejsのソースファイル全体はコメントも含めて2000行しかなく、外部に公開される変数は実際にはrequirejs、require、defineの3つです。
requirejs は require のエイリアスにすぎません。その目的は、ページ内に require の他の実装がある場合でも、requirejs を使用して requireJS API を使用できることです (この記事では関連する競合がないため、require が引き続き使用されます)。 。
つまり、初心者としては、require、require.config、define をマスターするだけでよいことを意味します。
本文将以介绍require,require.config,data-main,define的顺序来介绍RequireJS。让比较简单的RequireJS更加简单，争取让大家只看这篇文章就能用好RequireJS。至于RequireJS是如何解决循环依赖,对于没有实现amd的模块如何通过shim来导出，如何在node中使用等问题。本文并没有提及，详细有需要可以去官方查阅。
require.js可以通过npm下载或者在官网获得。jquery同理，jquery需要下载1.7.0或以上的版本。然后把对应的代码拷入对应的文件中，给出余下两个文件的代码:
// js/script/index.html<!DOCTYPE html><html><head>
<title>Require Demo 1</title></head><body>
<div>
<h1>Require Demo 1 -- usage of Require()</h1>
<button id="contentBtn">Click me</button>
<p id="messagebox"></p>
</div>
<script data-main="js/script/main" src="js/lib/require.js" type="text/javascript"></script> </body></html>
// js/script/main.js
require.config(
{ paths: { 'jquery': '../lib/jquery-1.7.2'
}
}
); require(['jquery'],function ($) {
$(document).on('click','#contentBtn',function(){
$('#messagebox').html('You have access Jquery by using require()');
});
});先看index.html的代码，其实比较简单，页面上在js中会用到的就是一个button和一个p标签。然后整个页面就只是一个js文件是通过3f1c4e4b6b16bbbd69b2ee476dc4f83a标签加载的，就是require.js。注意到标签中有一个data-main属性，你现在只需要了解require.js会在加载完成以后通过回调方法去加载这个data-main里面的js文件，所以这个js文件被加载的时候，RequireJS已经加载执行完毕。
然后接着看main.js文件,里面被一个匿名立即执行函数所包括。在require.config(...)中，可以配置许多配置项，后面会有详细说明。上面在config中添加了一个path，在path配置了一个模块ID和路径的映射，这样在后续的所有函数中就可以直接通过模块ID来引入依赖，而不用再多次引入依赖多次输入路径带来的麻烦。
然后接着就是我们的require(...)函数了。上面的语法中require函数接受的第一个参数是，所依赖模块的一个数组。即使你只需要传入一个依赖，也需要把这个依赖放进数组中传入。如果你有如本例子中设置了模块ID和路径的映射，那你在传入依赖的时候就可以使用模块ID来代替路径，如果没有配置模块ID你当然也可以通过路径来引进对应的模块。接着是传入回调函数，当引入的依赖加载完毕后，这个回调函数就会被触发。如果你传入的依赖有注入变量（函数）,然后在回调函数中需要用到，你就需要按照顺序在回调函数的参数中添加别名，在本例子中可以通过别名$来使用jQuery的相关API。所以有注入的模块需要放在无注入或者不需要调用模块的模块前面，方便回调函数传入别名。例子中在回调函数中为id为contentBtn的button注册监听事件，如果触发，则往id为messagebox的p标签添加相应的内容。
另外还需要额外说明的是路径，不管是在配置中写路径还是直接在require函数中写路径，你都需要了解requireJS在不同情况下的相对路径。
以下是相对路径的规则:
1.如果3f1c4e4b6b16bbbd69b2ee476dc4f83a标签引入require.js时没有指定data-main属性，则以引入该js的html文件所在的路径为根路径。
2.如果有指定data-main属性，也就是有指定入口文件，则以入口文件所在的路径为根路径。在本例子中也就是main.js所在的script文件夹就是根路径，这也是为什么配置jQuery的时候需要返回上层目录再进入lib目录才能找到jQuery文件。
3.如果再require.config()中有配置baseUrl，则以baseUrl的路径为根路径。
以上三条优先级逐级提升，如果有重叠，后面的根路径覆盖前面的根路径。
define
讲完了如何引入模块，现在讲如何定义一个模块,require定义一个模块是通过 define = function (name, deps, callback)完成的,第一个参数是定义模块名，第二个参数是传入定义模块所需要的依赖，第三个函数则是定义模块的主函数，主函数和require的回调函数一样，同样是在依赖加载完以后再调用执行。
先看个例子:
当你没有任何依赖的时候,你可以这么写:
// js/script/desc.jsdefine(function(){ return{ decs : 'this js will be request only if it is needed', };})
// 然后在main.js的添加如下代码// js/script/main.js
$('#messagebox').html('You have access Jquery by using require()');
＋ require(['script/desc'],function(desc){
＋ alert(JSON.stringify(desc));再次打开网页，打开network视图，点击按钮，通过require获得的desc模块就会alert出来，同时你会发现，desc.js是按需请求的，并不是在页面一开始的时候就请求的。
总结
以上就是关于关于RequireJS简单使用的介绍了，大家有需要可以直接看源码，大概就2000多行，不看具体实现，看它对几个函数声明的描述，对使用起来也是很有帮助的，你会发现有一些连官方文档都没提及到的一些特性(比如require()方法可以直接传入config配置作为第一个参数)。
また、余談ですが、RequireJS の公式 API を確認する必要がある場合は、可能であれば英語の公式ドキュメントに直接アクセスすることをお勧めします。公式の中国語ドキュメントが古いバージョンのままになっている場合は、翻訳がぎこちなく理解しにくいため、忘れてください。明らかに間違っている記述の中には、実際には責任が問われるものもあります。中国語の文書を読んでいるときは本当に理解するのが難しかったのですが、後で英語の文書を直接読むと、はるかにスムーズに理解できるようになりました。
これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
関連記事:
Video.js を使用して H5 ライブ ブロードキャスト インターフェイスを実装する
アカウントのパスワードを記憶するための JS コードを実装する方法
以上がJS モジュール性 - RequireJSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。