"Modular Development"------basic use of requirejs------"Midgard"

Objective

In order to improve the reuse of code, developers will follow the function of a large number of JS code into several files, so that the same file can be used on multiple pages. , the following is the JS reference of a website

Although the reuse of code has improved, but the shortcomings are reflected

Disadvantages:

1, website loading JS will stop other resources loading, and stop page rendering (that is, we often say that the white screen phenomenon) 2. Loading too many JS files may cause the browser to feign animation (the browser has been loading, cannot do the page operation)3, if the file has a dependency, is the use of b.js need to load a.js, then we have to be careful to introduce JS, but so many files, ghosts to clear the dependence of the relationship AhThe amount ... Allow me to make a moment, how to do it, the function of the website is becoming more and more powerful, JS file more and more is the inevitable thing, so there is a modular development Modular Development 　001, modular classification of the current JS modular development specifications are divided into two1. Server-side (CommonJS) such as node. JS2, the client (AMD, CMD) such as: Requirejs and Seajs002. What is Requirejs1, Requirejs is a JavaScript file or module loader. It can increase the loading speed of JavaScript files and avoid unnecessary clogging.  2, Requirejs using asynchronous loading module, can be simply understood as a tool to load JS file 3, Requirejs is a client modular development of a specification, to solve the loading of too many JS files caused by browser white screen and suspended animation and JS files introduced by the dependency relationship.  4, the role of Requirejs:1, realize the asynchronous loading JS2, the management module between the dependency relationship, easy to write code and maintenanceRecommended Learning Address: http://www.ruanyifeng.com/blog/2012/11/require_js.html 003, require basic use the first step: Load Requirejs

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

　

Step Two: Asynchronously loading require.js

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

The async attribute indicates that the file needs to be loaded asynchronously, IE does not support this property, only supports defer so defer is also written

　　

Step three: Load the portal file

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

Data-main: For loading the portal file (when the Require is loaded, the main module JS file needs to be introduced)

　　

Fourth Step: Configure the paths loaded by each module using the Require.config method

Require.config Method:

Parameter is an object: There are 3 properties in the object
　　　　　　Property 1:baseurl: Specifying a uniform path

Property 2:paths: The path of each module
　　　　　　
Attribute 3:shim: Define non-AMD

Require.config ({//Specify Root Path js folderBASEURL: "JS",     //each file pathpaths:{"jquery": "lib/jquery-1.11.3",           "Layer": "Plug/layer",           "Swiper": "Plug/swiper.min",           "Banner": "List/banner",           "Alert": "List/alert"     },     //modules for non-AMD filesshim:{     }})

Fifth step: AMD Specification definition Module

AMD Spec: Because require is in the AMD specification because it has to be written in accordance with AMD's rules. Which means that all modules must bedefine () function to define

The Define function has 2 parameters:The first parameter is a module that needs to be relied upon, and if you don't rely on it, you don't have to write an array The second parameter is the contents of the written module

The following defines a Swiper carousel diagram
define (["jquery", "Swiper"],function(){     functioninit () {NewSwiper ('. Swiper-container '), {direction:' Horizontal ', Loop:true, AutoPlay:3000, Speed:300, pagination:'. Swiper-pagination ',         //if you need to forward the back buttonNextbutton: '. Swiper-button-next ', Prevbutton:'. Swiper-button-prev ',       }) }     return{Init:init}})

Sixth step: The core file of the entrance

Require: Accepts 2 parameters1. The first parameter is an array that represents the dependent module

2. The second parameter is a callback function

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

The first step loads the configuration file the required modules in the second step

Seventh step: If you encounter a non-AMD spec module

shim:{    Module Name: {
deps:[""],//depends on the module
Exports: Name of module name//export module
}}

"Modular Development"------basic use of requirejs------"Midgard"