Detailed explanation of the path configuration of require.js and the introduction method of css-JS Tutorial-php.cn

Detailed explanation of the path configuration of require.js and the introduction method of css

巴扎黑

Release： 2017-09-07 10:20:16

Original

1798 people have browsed it

This article mainly introduces the detailed usage of require.js configuration path and the introduction of css. It has certain reference value. Interested friends can refer to it

Front-end development in the past year or two It is developing very fast, and JavaScript as a mainstream development language has gained unprecedented popularity. A large number of front-end frameworks have emerged. These frameworks are trying to solve some common problems in front-end development, but the implementations are different. Usually the general front-end loading js files are like this:

<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>

Copy after login

But when a project is particularly large, there will be a lot of js files introduced, which looks unsightly and It is not efficient. When there are many and large js files, the web page download will time out, causing the website response to time out, directly 500, so a magical

js framework (js toolkit) appears: require. js.

require.js mainly solves two problems:

1. Implement asynchronous loading of js to avoid website timeout caused by too much loading of js and too much response time.

2. Manage dependencies between modules to facilitate writing and maintenance.

Okay, let’s get to the point today. Let’s write a case of require.js usage for your reference:

Assume that our project has a resource directory like this:

The first step is to introduce the downloaded require.js into index.html

Then we create a new config.js to write the corresponding configuration:

Then open config.js and write the following code:

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

});

Copy after login

Add the css module dependencies that should be used, that is, deps

deps: ['css!libs/css/color.min'] Here, the file under the name of the css module (libs/js/css.min.js) will be added first, and then a "!" will be added in the base directory. libs/css/color.min.css

css.min.js is a dependent module js, which contains a method for loading css files,

specific 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
}
);

Copy after login

Now, when I open index.html in the browser, I find that the extra things we need to add are not added in. Is this why? Okay, here, remember to call the method require in require.js after under the head of index.html, that is Add this sentence

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

Copy after login

and visit index.html again, and what we want will appear perfectly.

As shown:

Note that the order introduced in

index.html cannot be disrupted

<script type="text/javascript" src="config.js"></script>
  
<script type="text/javascript" src="require.js"></script>
  
<script type="text/javascript">require([&#39;color&#39;]);</script>

Copy after login

require.config() accepts a configuration object. In addition to the paths attribute mentioned earlier, this object also has a shim attribute, which is specially used to configure incompatible modules. Specifically, each module must define (1) the exports value (output variable name), which indicates the name of the module when called externally; (2) the deps array, which indicates the dependencies of the module.

The above is the detailed content of Detailed explanation of the path configuration of require.js and the introduction method of css. For more information, please follow other related articles on the PHP Chinese website!