require.jsにcssを導入する手順を詳しく解説

今回はrequire.jsにcssを導入する手順を詳しく解説します。 JavaScript

の使用において、require.js は非常に良い結果を提供します。今回の記事は、require.js の設定パスと CSS 導入の操作体験の共有に焦点を当てます。みんな。 。

フロントエンド開発はここ 1 ～ 2 年で急速に発展し、JavaScript は主流の開発言語として前例のない人気を博しています。多数のフロントエンド フレームワークが登場しており、これらのフレームワークはフロントエンド開発におけるいくつかの一般的な問題を解決しようとしていますが、実装は異なります。通常、フロントエンドでロードされる js ファイルは次のようになります:

<script type="text/javascript" src="js/js1.js"></script>
<script type="text/javascript" src="js/js2.js"></script>
<script type="text/javascript" src="js/js3.js"></script>
<script type="text/javascript" src="js/js4.js"></script>

しかし、プロジェクトが特に大きい場合、大量の js ファイルが導入されるため、見苦しく非効率的になります。多くの大きな js ファイルがあると、Web ページのダウンロードがタイムアウトになり、Web サイトの応答がタイムアウトになります。とても魔法の

js フレームワーク (js ツールキット) が表示されます: require.js。

require.js は主に 2 つの問題を解決します:

1. js の非同期読み込みを実装して、js の読み込みが多すぎて応答時間が長すぎることによって引き起こされる Web サイトのタイムアウトを回避します。 2. モジュール間の依存関係を管理して、作成とメンテナンスを容易にします。

さて、今日の本題に入りましょう。参考までに、require.js の使用例を書いてみましょう:

最初のステップは、ダウンロードした require.js をindex.html に導入することです

次に、新しい config.js を作成して、対応する構成を記述します:

次に、config.js を開いて次のコードを記述します:

require.config({
  baseUrl:'/data/points/',//配置基目录
  urlArgs:'v='+(new Date()).getTime(),//清楚缓存
  paths:{
    'css': 'libs/js/css.min',
    'jquery': 'libs/js/jquery-1.11.1.min',
    'vur': 'libs/js/vue.min',
    'amazeui': 'libs/js/amazeui.min',
    'color': 'libs/js/color.min'
  },
  shim:{
    'amazeui':{
      deps: ['jquery','css!libs/css/amazeui.min','css!style/common','css!style/footer'],
    },
    'color':{
      deps:['css!libs/css/color.min']
    }
  }
});

CSSを追加するときは、モジュールの依存関係、つまりdepsを使用する必要があります

deps:['css!libs/css/color.min'] ここでは、css モジュール名のファイルが最初に追加され (libs/js/css.min.js)、その後にベース ディレクトリに「!」が追加されます。 . libs/css/color.min.css に追加します

このうち、css.min.js は依存モジュール js であり、CSS ファイルをロードするメソッドが含まれています

特定の css.min.js

define(
  function () {
  if (typeof window == "undefined")return {
    load: function (n, r, load) {
      load()
    }
  };
  var head = document.getElementsByTagName("head")[0];
  var engine = window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)/) || 0;
  var useImportLoad = false;
  var useOnload = true;
  if (engine[1] || engine[7])useImportLoad = parseInt(engine[1]) < 6 || parseInt(engine[7]) <= 9; else if (engine[2])useOnload = false; else if (engine[4])useImportLoad = parseInt(engine[4]) < 18;
  var cssAPI = {};
  cssAPI.pluginBuilder = "./css-builder";
  var curStyle;
  var createStyle = function () {
    curStyle = document.createElement("style");
    head.appendChild(curStyle)
  };
  var importLoad = function (url, callback) {
    createStyle();
    var curSheet = curStyle.styleSheet || curStyle.sheet;
    if (curSheet && curSheet.addImport) {
      curSheet.addImport(url);
      curStyle.onload = callback
    } else {
      curStyle.textContent = &#39;@import "&#39; + url + &#39;";&#39;;
      var loadInterval = setInterval(function () {
        try {
          curStyle.sheet.cssRules;
          clearInterval(loadInterval);
          callback()
        } catch (e) {
        }
      }, 10)
    }
  };
  var linkLoad = function (url, callback) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    if (useOnload)link.onload = function () {
      link.onload = function () {
      };
      setTimeout(callback, 7)
    }; else var loadInterval = setInterval(function () {
      for (var i = 0; i < document.styleSheets.length; i++) {
        var sheet = document.styleSheets[i];
        if (sheet.href == link.href) {
          clearInterval(loadInterval);
          return callback()
        }
      }
    }, 10);
    link.href = url;
    head.appendChild(link)
  };
  cssAPI.normalize = function (name, normalize) {
    if (name.substr(name.length - 4, 4) == ".css")name = name.substr(0, name.length - 4);
    return normalize(name)
  };
  cssAPI.load = function (cssId, req, load, config) {
    (useImportLoad ? importLoad : linkLoad)(req.toUrl(cssId + ".css"), load)
  };
  return cssAPI
}
);

ここで、ブラウザでindex.htmlを開くと、追加する必要がある追加情報が追加されていないことがわかります。これが原因でしょうか。さて、ここで、index.html の先頭の下にある の後に require.js のメソッド require を呼び出すことを忘れないでください。この文りぃ

もう一度index.htmlにアクセスすると、必要なものが完全に表示されます。

注意

Index.html で導入された順序を壊すことはできません

<script type="javascript/text&#39; >require['color']</script>//标识调用配置中的color模块

require.config() は、前述の paths 属性に加えて、互換性のないモジュールを構成するために特別に使用される shim 属性も受け入れます。具体的には、各モジュールは、(1) 外部から呼び出されるモジュールの名前を示すエクスポート値 (出力変数名

)、(2) モジュールの依存関係を示す deps 配列を定義する必要があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

WebStorm ES6 で babel を使用する方法

JS を使用してリストをツリー構造に変換する方法

以上がrequire.jsにcssを導入する手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。