require.js的使用

Posted 2022-01-30 wangyali-0402

刚刚接手的新项目中应用了require.js，自己就花了点时间了解了一下，这里给大家推荐一个教学视频 《阿当大话西游之Web组件》 ，视频我是看了前边几节介绍又结合了新的项目，所学的知识就已经够用了。

require.js 具体是什么？

RequireJS是一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。它的模块管理遵守AMD规范，模块与模块之间可以互相依赖，当然可能会有人会想，模块之间的依赖，要是没法正确地去按照特定顺序加载，会出现错误，AMD规范可以处理这种问题，AMD就是这样一种对模块的定义，使模块和它的依赖可以被异步的加载，但又按照正确的顺序。

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

如何使用 require.js？

下载require.js，引入网站的首页，

<script data-main="js/framework/main.js" src="./lib/requirejs/require.js"></script>

这里首先会执行src中的require.js 的加载，随后require.js会查找data-main所指的文件路径，找到入口的js文件，注意这里可以去掉.js 的后缀名。

RequireJS有两种最主要的方法，define()是用来定义一个模块的，而require()方法是 用来加载模块的。

---

define 方法

使用define方法，可以将一个js文件写在此方法中，define(function() /*代码内容*/ );作为一个独立的模块。如下，新建一个模块名为mod1的js文件（mod1.js）：

 define(function()
    return 
        a:3
    
)

这是一个很简单的模块，mod1通过 return一个对象，向外暴露一个变量 a=3 ；如果我们在创建一个mod2的模块（mod2.js），要依赖mod1中的变量啊，则可以这么来：

 define(['mod1'],function(m1)
    var a,
        b=2,
        c=3;
        a=c*m1.a;
      return 
        a:a,
        b:b
    
)

分析上面的代码，我们将mod1模块引入到mod2模块中，而function的参数 m1 就是mod1模块的返回值，也是mod1模块。m1.a就是mod1的return 对象a的值，为3，这样mod1和mod2的变量虽然存在a变量名一样的问题，但是互不影响，不冲突，这也是模块化的一个好处，不会担心变量冲突问题。

---

require方法

接下来，我们便可以通过require方法来使用前面我们定义好的模块，，见其写在main.js中

    require(['mod2'],function(m2) 
       alert(m2.a)
    );

使用该方法加载mod2个模块，而mod2会去依赖mod1模块，所以也会加载mod1这个模块。
由于模块返回的都是对象，那我们也可以new一个对象去调用加载模块中的方法和属性，见下：

//模块名为：treeview
  define(function() 
    function treeview() 
        this.name="treeview";
    ;
    return  treeview:treeview ;
)

    require(['treeview'],function(b) 
        var tree = new b.treeview();
        alert(tree.name);
    );

如果模块中需要引入第三方的js文件，例如jquery，则应该：

//treeview.js
  define(['jquery'],function($) 
    function treeview() 
        this.name="treeview";
    ;
    return  treeview:treeview ;
)


//main.js
//此时如果main.js这个应用层也需要用到jquery，虽然mian.js中依赖模块treeview中已经引入了jquery文件，但是应用层main.js中依然还需要引入一次，
    require(['treeview','jquery'],function(b,$) 
        $('#div').click(fucntion()..........)
        var tree = new b.treeview();
        alert(tree.name);
    );

---

模块路径 paths

在main.js,我们需要去配置一下模块的路径，这里随便配置一下几个模块的路径，如下：

require.config(
　　　paths: 
　　　　　"tabview": "js/tabview",
　　　　　"animate": "js/animate",
　　　　　"treeview": "js/treeview"
　　　
　);

//另一种则是直接改变基目录（baseUrl）。后缀.js可以省略
require.config(
　　　　baseUrl: "js/lib",
　　　　paths: 
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　
);