Detailed introduction to the use of require.js-JS Tutorial-php.cn

Detailed introduction to the use of require.js

php中世界最好的语言

Release： 2017-12-30 16:22:13

Original

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