Detailed explanation of the steps for introducing css into require.js

This time I will bring you a detailed explanation of the steps for introducing css into require.js. What are the precautions for introducing css into require.js? The following is a practical case. Let’s take a look.

In the use of JavaScript

, require.js can provide very good usage effects. This time, the article will focus on sharing the require.js configuration path and the introduction of css. Operation experience, I hope it will be helpful to everyone. Front-end development has developed very rapidly in the past year or two, 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>

But when a project is particularly large, a lot of js files are introduced, which looks unsightly and inefficient. 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

The 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 main topic today. Let’s write a case of require.js usage for your reference:

The first step is to introduce the downloaded require.js

in 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:'/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']
    }
  }
});

When adding css, you should use the dependency of the module, which is deps

deps:['css!libs/css/color.min'] Here, the files under the name of the css module (libs/js/css.min.js) will be added first, followed by a "!" in the base directory. Add to libs/css/color.min.css

Among them, 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
}
);

Now, when the browser opens index.html, it turns out that the extra information we need to add has not been added. 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['color']</script>//标识调用配置中的color模块

Visit index.html again and what we want appears perfectly.

Notice

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(['color']);</script>

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 (the output

variable name

), which indicates the name of the module when it is called externally; (2) the deps array, which indicates the dependencies of the module. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use babel in WebStorm ES6

JS to convert the list into a tree structure

The above is the detailed content of Detailed explanation of the steps for introducing css into require.js. For more information, please follow other related articles on the PHP Chinese website!