ホームページ >ウェブフロントエンド >jsチュートリアル >require.js の使用方法の詳細な紹介

require.js の使用方法の詳細な紹介

php中世界最好的语言
php中世界最好的语言オリジナル
2017-12-30 16:22:132592ブラウズ

私たちは、RequireJS が非常に小さな JavaScriptモジュール読み込みフレームワーク であることを知っています。これは、AMD (Asynchronous Module 定義、非同期モジュール読み込みメカニズム) 仕様の最良の実装の 1 つです。 requireJS の最新バージョンはわずか 14k 圧縮されており、非常に軽量です。また、requireJS を使用すると、フロントエンド コードの品質が確実に向上します。 まず、通常のページのjs読み込みを見てみましょう

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/index02.js" ></script>
  </head>
  <body>
    <h1>this is a page.</h1>
  </body>
</html>

このとき、ポップアップボックスを操作しないとページが読み込まれず、ページのコンテンツが存在しません。私たちは結果を出したいのです。

以下では、require.js を使用して操作します:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/require2.1.11.js"></script>
    <script type="text/javascript">
      require(["js/index","js/index01"],function(){
        console.log("当js加载成功后会执行的函数");
      },function(){
        console.log("当js加载失败后会执行的函数");
      });
    </script>
  </head>
  <body>
  </body>
</html>

index.js

define(function(){
  console.log("this is a test!");
  function test(){
    console.log("haha,i am a test!");
  }
  test();
});

上記の紹介を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイト

その他

に注目してください。関連記事! 関連記事:

Google Chrome が 12 ピクセルより小さいテキストの CSS 設定をサポートしていない場合はどうすればよいですか?


memcached と xcache を使用して PHP キャッシュ最適化を実装する手順


ネイティブ JS で AJAX と JSONP を実装する方法

以上がrequire.js の使用方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。