js模块化之require.js

╰半夏微凉° 2022-07-26 11:09 177阅读 0赞

## 简单理解模块化 ##

大多数前端开发者都用过jquery，那么用jquery之前我们首先要把jquery加载进页面，然后在之后的js之中才可以使用$,这里面我们知道了两个道理，一个是我们不能把所有js代码都放到一个文件里，有些东西可以单独提出来成为一个模块，比如jquery。另外一个道理，一部分js是依赖另一部分js的，比如$依赖jquery文件的载入。其实require.js主要做的事情就是这两点。

当你的js项目足够大，足够复杂，依赖的库足够多，你完全需要这样一种工具去做这些js的管理，否则你的项目扩展性很差，结构很糟糕，要找到想修改的地方会很困难。

## 模块化诞生-require.js ##

它就是这样带着使命诞生了。可以帮我们解决这些问题：

1、require.js是属于异步加载，A、B、C的js文件加载的时候谁也不影响谁，也不会影响网页其他文件，只要A、B、C文件都加载好了，才会回调function

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ 
    　　　　// some code here
    });

2、看上面结构便知道了，模块对A、B、C三个文件有依赖关系，就调用这三个文件即可，如果这个模块依赖10份js文件，就调用10个js即可，这样就很好的管理了每个模块的依赖，就不会很混乱了。

## 如何使用require.js ##

1) 加载模块化。在html中导入require.js，data-main属性的作用是，指定网页程序的主模块main.js。

2) data-main和baseUrl的关系：  
data-main没有指定baseUrl也没有写，那么baseUrl默认是页面所在目录。  
data-main指定了而baseUrl没有指定，那么baseUrl默认是data-main所指定的模块所在目录。  
data-main指定了baseUrl也指定了，那么baseUrl必须从页面所在目录开始写起。

3) 手动定义require.config，一般在main的最顶上定义。

requirejs.config({ baseUrl: 'js/lib',
        paths: {
       jquery:'jquery-2.2.3.min', backbone:'backbone', underscore:'underscore' }, shim:{ 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' }, 'underscore': { exports: '_' }
        }
    });

通过如上定义，就可以在require模块中使用jq和backbone了。paths相对于baseUrl指定的路径的js文件。shim是加载一些没按照require.js要求来的常用js类库，放到shim中指定一下，就可以使用了。shim下的exports是指调用该类库，所指定的变量名。deps是指它所需要的依赖。

上面这种是关于可以返回变量名，带exports的shim指定，还有一些插件库是不需要返回变量名的，可以这么写：

requirejs.config({
      shim: {
      'jquery.ui.core': ['jquery'],
      'jquery.ui.widget': ['jquery'],
      'jquery.ui.mouse': ['jquery'],
      'jquery.ui.slider':['jquery']
        },
      paths : {
        jquery : 'jquery-2.1.1/jquery',
        domReady : 'require-2.1.11/domReady',
        'jquery.ui.core' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core',
        'jquery.ui.widget' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget',
        'jquery.ui.mouse' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse',
        'jquery.ui.slider' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider'
      }
    });
    
    
    require([ 'jquery', 'domReady','jquery.ui.core','jquery.ui.widget','jquery.ui.mouse','jquery.ui.slider'],
        function($) { 
          $("#slider" ).slider({
               value:0,
               min: 0,
               max: 4,
               step: 1,
               slide: function( event, ui ) { }     
          });       
    
        });

3) 模块定义。 config配置好了以后，就要开始在main中写标准的模块定义了。require标准模块定义用define。

main.js
    define(["./b"], function(b) { 
           //主程序中调用b模块
           console.log(b.good)
        }
    );
    
    //a.js a中没有依赖
    define(function() { 
           var obj = {
               ok : function(){ 
                   return 111;
               }
            };
            return obj;
        }
    );
    
    //b.js b中依赖a
    define(["./a"], function(a) { 
            var bb = {
                good : a.ok;
            }
            return bb;
        }
    );

总结一下：  
1) 导入require.js  
2) 配置config  
3) 给各个需要加载的模块定义define  
4) 那么，就可以实现各个模块互相调用，也可以实现加载一些常用类库了。