[Modular development]------Basic use of requireJS------[Fantasy]

foreword

In order to improve code reuse, developers will divide a large amount of js code into several files according to their functions, so that the same file can be used in multiple pages. , the following is the js reference of a website

Although the reusability of the code has been improved, the shortcomings are also reflected.

shortcoming:

 　1. When the website loads js, it will stop the loading of other resources and stop the page rendering (that is, the white screen phenomenon we often say)

     2. Loading too many js files may cause the browser to freeze (the browser is always loading and cannot perform page operations)

     3. If the file has dependencies, that is, to use B.js, you need to load A.js first, then we have to carefully import js, but with so many files, ghosts can figure out the dependencies.

 

 

Forehead. . . Allow me to be stunned for a moment, what should I do? The functions of the website are becoming more and more powerful, and it is inevitable that there will be more and more js files, so modular development has emerged.

 

 

 

Modular development

　

001. Modular classification

 

At present, the js modular development specification is divided into two types

      1. Server-side (CommonJS) such as Node.js

 

     2. Client (AMD, CMD) such as: requireJS and seaJS

 

 

 

002. What is requireJS

　　 1. RequireJS is a loader for JavaScript files or modules. It can improve the loading speed of JavaScript files and avoid unnecessary clogging.

 

　　2. requireJS loads modules asynchronously, which can be simply understood as a tool for loading js files

 

　　3. requireJS is a specification for client-side modular development, which is used to solve the dependencies introduced by loading too many js files, causing the browser to white screen and suspended animation, and js files.

 

　　4. The role of requireJS:

     　　1. Asynchronous loading of js

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

 

　　Recommended study address: http://www.ruanyifeng.com/blog/2012/11/require_js.html

 

003. Basic use of require

 

　　Step 1: Load requirejs

　　

<script src="require.js"></script>

　

   　Step 2: Load require.js asynchronously

<script src="require.js"   defer async="true" ></script> 

//The async attribute indicates that this file needs to be loaded asynchronously, IE does not support this attribute, only defer, so write defer as well

　　

　　Step 3: Load the entry file

<script src="require.js" data-main="js/index" defer async="true"/><script> 

data-main: used to load the entry file (when the require is loaded, the main module js needs to be imported document)

　　

　　Step 4: Use the require.config method to configure the paths loaded by each module

require.config method: 

　　the parameter is an object: there are 3 attributes in the object 
　　　　　　attribute 1: baseUrl: specify a unified path 

　　　　　　attribute 2: paths: the path of each module 　　　　　　attribute 3: shim: define non-AMD require.config({
      
　　　　　　


// Specify the root path js folder 
     baseUrl:"js" ,
      // each file path 
     paths:{
            "jquery":"lib/jquery-1.11.3" ,
            "layer":"plug/layer" ,
            "swiper":" plug/swiper.min" ,
            "banner":"list/banner" ,
            "alert":"list/alert"
     },
     // Module shim for non-AMD files 
     :{
          
     }
})

　　Step 5: AMD Specification Definition Module

AMD Specifications:

     Because require is based on AMD specifications, because it must be written in accordance with AMD's regulations. That is, all modules must be defined using the define() function

The define function has 2 parameters:

          The first parameter is the module you need to depend on. If you don't depend on it, you don't need to write it. It must be an array.

 

          The second parameter is the written module content

//The following defines a swiper carousel 
define(["jquery","swiper"], function (){
      function init(){
            new Swiper ('.swiper-container' , {
         direction: 'horizontal',
         loop: true,
         autoplay : 3000,
           speed:300,


         pagination: '.swiper-pagination' ,
          // If you need forward and back buttons 
         nextButton: '.swiper-button-next' ,
         prevButton: '.swiper-button-prev',


       })
     }
     return {
           init:init
     }
})

　　Step 6: The core file of the entry

require: accepts 2 parameters

      1. The first parameter is an array, which represents the dependent module

     2. The second parameter is the callback function

require(["config"],function(){
     require(["jquery","layer","swiper","banner","alert"],function($,layer,swiper,banner,alert){
           banner.init()
           alert.init()
     })
})

The first step is to load the configuration file

 

The second step is to load the required modules

 

　　Step 7: If you encounter non-AMD specification modules

shim:{
    Module name:{ 
　　　　　　deps:[""],//The dependent module 
　　　　　　exports:module name//The name of the exported module 
　　　　}
}