require.js for modular development


The powerful and flexible use of requirements is determined by configuration files. Through the configuration file, we can alias the module, add version identification to the module, set module dependency, wrap non module and other powerful functions. At the same time, the optimizer of RequireJS also uses a lot of configuration options. If you use grunt, gulp and other construction tools, it is necessary to learn the use of configuration files in depth.

Benefits of using require.js

1. Load files asynchronously
Load on demand reduce script tags

2. Modular development
Multi person development code is clear and easy to maintain
Reduce global variables

define definition module

//helper is the module name. If it is not written, the default pathname is
//jquery is a module dependency that can write multiple
//The function of the function module returns the object, and the parameter should correspond to the module dependency
define('helper',['jquery'],function($) {

     return {
            return $.trim(str);

require load module

//helper is the name of the module to load
    var str = helper.trim('  amd ');

baseurl load path

require.js loads all code based on the address of baseurl

paths after defining the file path definition, you can directly use the previous file name

  'paths': {
        'business' : 'js/app/business/',
        'framework' : 'js/app/framework/',
        'lib' : 'js/lib'

If you load a JS file that is not an AMD specification, or configure libraries and plug-ins that do not support AMD

  'shim' : {
         //'modernizr' does not support AMD, load JS file of non amd specification
         'modernizr' : {  'exports' : ''modernizr' },

        //There is a dependency relationship. It depends on jquery. The configuration does not support amd libraries and plug-ins
        'lib/jquery' : { 'deps' : [''], 'exports' : '$' },
        'lib/jquery.blockui.min' : { 'deps' : ['lib/jquery'], 'exports' : '$' },
        'lib/jquery.jsPlumb-1.4.1-all' : { 'deps' : ['lib/jquery'], 'exports' : '$' },
        'app/ajaxProcess' : { 'deps' : ['lib/jquery'], 'exports' : '$' },

        //There are dependency relationships. These js are not defined by define, so you can use shim to set dependency
        'frame/alert' : { 'deps' : ['frame/utils'] },
        'frame/pop' : { 'deps' : ['frame/utils'] },
        'frame/httpService' : { 'deps' : ['lib/jquery','frame/alert','frame/pop'] },
        'frame/framework' : { 'deps' : ['frame/XMap'] }

map uses a different module ID to load a given module prefix. Can control the version very well

    map: {
        'some/newmodule': {
            'foo': 'foo1.2'
        'some/oldmodule': {
            'foo': 'foo1.0'

If the modules are distributed on the disk as follows:


When "some / new module" calls "require('foo '), it will get foo1.2.js file;
When "some/oldmodule" calls "` require('foo ')", it will get foo1.0.js.

How to write the interdependence between two JSS

//There is no name defined, so the default path is used. It depends on jq to write in shim, or here
//If you want to be relied on, you need to return. Otherwise, you can't rely on it
  define(function (){
        var time = 4444444444444

        function hehe(){
            console.log("I love szz")

          function lala(){
        return {
            hehe:hehe ,
            lala:lala ,

// business/wjj is the above path, which can be received by wjj, and other paths can also be written
   define(["business/wjj"],function (wjj){


//I love szz

Tags: JQuery

Posted on Mon, 04 May 2020 03:56:11 -0700 by jwcsk8r