舞台裏の白の先端は入門します－－RequireJS

4364 ワード
ガイド:
以前はRequireJSと聞いていましたが、なかなか知る機会がなく、jsをモジュール化したAPIだと知っています.最近はReactをやっていますが、そのコンポーネント化の思想とjsモジュール化の考えが一致しています.プロジェクトの中でReactを適用したいです.同時にRequireJSを追加して、ページのロードや開発にいい効果があるかどうか見てください.
What is RequireJS?
RequireJSとは何かを説明する前に、Javascriptモジュール化の歴史の背景を話さなければなりません.実は初期に、Javascriptは新しいシナリオ言語として現れました.巨大なビジョンを持っています.クライアントに対してだけデザインされた言語としてではありません.ただ、その後のwebアプリケーションの流行は、javascriptがブラウザ端末のスクリプト言語として急速に広がり、さらにNetscapeとマイクロソフトの競争が早く標準化されるということです.JSの多くの欠陥の一つはモジュール化である(しかし、Javascriptはimport、exportなどを保留文字にしています.設計を説明する時は考慮があり、新しい標準s 6も原生支援モジュール化されています).そしてwebアプリケーションがますます複雑になり、組み込まれたjavascriptコードがますます多くなり、nodeの台頭があって、モジュール化プログラミングが必要になりました.
だから、後にDojoのツールバッグとGoogleのClour e庫がサポートするモジュールシステムがあります.二つの非常に共通の標準仕様があります.CommunJSとAMDです.ここでは展開しないということです.CommunJS規格を実現するAPIは同期ローディングモジュールであり、AMD規格を実現するAPIは非同期ローディングモジュールであることを知る必要があります.したがって、理論的には、AMD規格の非ブロッキングローディングは、ブラウザ側に適しています.RequireJSはAMD仕様の最高の実現です.公式文書の一部を写して、RequireJSに対する説明を行います.
RequireJSはJavaScriptモジュール搭載器です.これはブラウザでの使用に非常に適しています.ブラウザでの使用には非常に適していますが、Rhino and Nodeのように他のスクリプト環境でも使用できます.RequireJSローディングスクリプトを使用すると、コードのローディング速度と品質が向上します.
Why RequireJS
だから、RequireJSが何をしているのかが分かりました.なぜ私たちがRequireJSを使いますか?でもやはりRequireJSのメリットをまとめてみましょう.
  • 非同期「ローディング」.私達は知っていて、通常ウェブサイトはいずれもscriptシナリオのをhtmlの最後に置いて、このようにブラウザがjs持ってくるページを実行してふさがることを免れることができます.RequireJSを使用すると、関連するjsをロードした後に、コールバック関数を実行します.このプロセスは非同期ですので、ページをブロックすることはありません.
  • は必要に応じてロードします.RequireJSを通じて、jsロジックをロードする必要がある時に対応するjsモジュールをロードすることができます.これは初期化ページの時に大量の要求とデータ転送が発生することを避けました.もしかすると一部の人にとっては、彼は全く必要ではないかもしれません.
  • より便利なモジュール依存管理.あなたはきっとscriptタグの順序の問題で依存関係にエラーが発生したことがあると思います.この関数は定義されていません.その変数はundefineなどです.RequireJSのメカニズムにより、すべての依存モジュールがロードされてから関連ファイルを実行することができますので、依存管理の役割を果たします.
  • より効率的なバージョン管理.考えてみてください.もしあなたがまだスクリプトで導入したのなら、jQuery 2.xのファイルを紹介してください.そして、100ページのページは全部このように引用しています.jQuery 3.xに変えたいなら、この100ページを変えなければなりません.でも、もしあなたのrequireJSがconfigでjQueryのpathマッピングをするとしたら、あなたは場所を変えるだけでいいです.
  • もちろん、cdnがjsファイルにロードできないなど、ローカルファイルを要求することができる他の利点がありますが、ここでは一つ一つ列挙しません.
    • RequireJS使用
    ページにインポートするファイルが必要です.
    RequireJSを って、require.jsを するだけでいいです. が なのは、より い は、あなたのページの にもこのjsを するだけでいいはずです.それから、このページのすべての ロジックはメール・jsに いてください. の の はどうすればいいですか?もちろんrequireを じて に じて されます.ボルトp>
    <h 3>Require </h 3>
    <p>Requirejsソースファイル にはコメントが まれています. に される は は つしかありません.strong gt;requirejs</strong gg>lt;strong gt;require<strong gg>lt;strong gt;define</strong gt;ボルトp>
    <p>この に<strong gt;requirejs</strong gt;ただ<strong gt;require<strong gt;の です. はページに<がある です.strong gt;require<strong gt; の では、やはりrequirejsを してrequireJS APIを することができます.ボルトp>
    <p>ですから、 として、require、require.co.fig、defineの つを につけてください.ボルトp>
    <p> では、require、require.co.fig、data-main、defineの を します. なRequireJSをもっと にして、みんなにこの だけを てもらうように します.RequireJSはサイクル をどのように するかというと、amdを していないモジュールはどのようにShimを して き すか、nodeでの などの です.この は していません. しいことは サイトで べることができます.ボルトp>
    <h 3>require<h 3>
    <p>まず、3721はともかく、まず のようにカタログ を します.p>
    <div class=「image-package」
    <div class=「image-container」style=「max-width:300 px;max-height:324 px;」gt;
    <div class=「image-view」
    <a href="https://img. たち.com/image/info 10/75 b 1 d 70125 a 3958 b 2 e 7 c 0 a.jpg「target=」_blank">lt;crc="https://img. たち.com/image/info 10/75 b 1 d 70125 d 642 a 39 bb 7 c 0 a.jpg「width=」300「height=」324「alt=」バックグラウンドの の －RequireJS_1 の 「style=」border:1 px solid black;ボルトa>
    <div>
    <div>
    <div class=「image-caption」
    の
    <div>
    <div>
    <p>その 、require.jsはnpmでダウンロードしたり、 サイトで られます.jqueryは じです.jqueryはダウンロードが です.ストリングス>lt;ext;1.7.0</ext>ボルトstrong gt; のバージョンがあります. するコードを するファイルに し、 りの つのファイルのコードを えます.p>
    <pregt;lt;codegt/////js/script/index.
    <DOCTYPE htl>
    <httml>
    <headt>
    <タイツ>Require Demo 1</タイツ>
    <headt>
    <body>
    <div>
    <h 1>Require Demo 1--usage of Require()</h 1>
    <button id=「contentBtn」Click me</buttongt;
    <p id=「messagebox」>ボルトp>
    <div>
    <script data-main=「js/script/main」src=「js/lib/require.js」type=「text/javascript」gt;
    React内部メカニズム秘匿-React ComponentとElement