Home > Web Front-end > JS Tutorial > Detailed introduction to the use of require.js

Detailed introduction to the use of require.js

php中世界最好的语言
Release: 2017-12-30 16:22:13
Original
2584 people have browsed it

We know that RequireJS is a very small javascriptmodule loadingframework, which is the most standardized AMD (Asynchronous Module Definition, asynchronous module loading mechanism) One of the better implementations. The latest version of requireJS is only 14k compressed, which is very lightweight. It can also work in coordination with other frameworks. Using requireJS will definitely improve the quality of our front-end code.

First of all, let’s take a look at a normal page js loading

<!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>
Copy after login

At this time, if we do not operate the pop-up box, the page will not continue to load, and there will be no page content. This is not the result we want to achieve.

Below we use require.js to perform the operation:

<!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>
Copy after login

index.js

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

I believe you have mastered the method after reading the above introduction, please come for more exciting information Follow php Chinese websiteOther related articles!

Related reading:

What should I do if Google Chrome does not support CSS settings for text smaller than 12px?

Implementation steps of using memcached and xcache for PHP cache optimization

How to implement AJAX and JSONP with native JS

The above is the detailed content of Detailed introduction to the use of require.js. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template