Requirejs---菜鸟入门

最新推荐文章于 2024-08-04 03:29:52 发布

RuGuo_09

最新推荐文章于 2024-08-04 03:29:52 发布

阅读量867

点赞数

分类专栏： javascript库文章标签：模块化面试

本文链接：https://blog.csdn.net/baidu_24024601/article/details/52069366

版权

javascript库专栏收录该内容

0 篇文章 1 订阅

订阅专栏

Requirejs知道这个东西，但是没有去用过“，其实很久就想去用这个东西来模块化开发，奈何把时间放到其他地方去了。这两天也去看了一下文档。所以今天在这里写下自己的想法。

首先我来个demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="../a.js"></script>
    <script src="../b.js"></script>
    <script src="../c.js"></script>
    <script src="../d.js"></script>
    <script src="../e.js"></script>
    <script src="../f.js"></script>
    <script src="../g.js"></script>
    <script src="../h.js"></script>
    <script src="../i.js"></script>
</body>
</html>

是不是有点恶心，如果脚本文件还多的话，真是不忍直视。于是我们伟大的Requirejs派上用场了。下面来个Requirejs的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script src="../require.js" data-main="../main.js"></script>
</body>
</html>

是不是赏心悦目好多，你会问其他的文件去哪了？别急，慢慢听我道来；其实原来关系都写到main.js中了，我们来看看main.js的代码。

        require.config({
            baseUrl:"../",
            paths:{
                a:"a",
                b:"b",
                c:"c",
                d:"d",
                e:"e",
                f:"f",
                g:"g",
                h:"h",
                i:"i"
            }
        });
        require(["a","b","c","e","f","g","h","i"],function(a,b,c,d,e,f,g,h,i){

        })

下面我们开始进入正题：

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

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

首先我们去加载requirejs文件，然后定义脚本文件的入口，相当于java中main函数。如果设置了data-main属性；baseUrl默认为data-main文件的路径。我们也可以通过require.config去修改。这里有一点需要注意的是：所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。

require.config用来配置一些参数，它将影响到requirejs库的一些行为。参数是一个JS对象，常用的配置有baseUrl——用于加载模块的根路径。
1.paths——用于映射不存在根路径下面的模块路径。
2.shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。
4.deps——加载依赖关系数组

     require.config({
            baseUrl:"../",//配置跟路径
            paths:{
                /*各个文件的映射*/
                a:"a",
                b:"b",
                c:"c",
                d:"d",
                e:"e",
                f:"f",
                g:"g",
                h:"h",
                i:"i"
            }
        });
        //注入依赖，并加载文件
        require(["a","b","c","e","f","g","h","i"],function(a,b,c,d,e,f,g,h,i){

        })

定义模块

模块不同于传统的脚本文件，它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入，而无需引用全局变量。RequireJS的模块是模块模式的一个扩展，其好处是无需全局地引用其他模块。

RequireJS的模块语法允许它尽快地加载多个模块，虽然加载的顺序不定，但依赖的顺序最终是正确的。同时因为无需创建全局变量，甚至可以做到在同一个页面上同时加载同一模块的不同版本。

//模块没有依赖的的时候
define(function(){
    var add=function(x,y){
        return x+y;
    }
    return{
        add:add
    }
})
//有依赖也可以注入，类似angularjs
define(["a","b"]function(a,b){
    //在这里可以调用a，b模块的中的开放的接口
    var add=function(x,y){
        return x+y;
    }
    return{
        add:add
    }
})

下面是一个小demo：

文件路径：
script|--->require.js
      |--->main.js
      |___>part|--->a.js
               |___>b.js
  demo|----demo.html

//b.js
define(["a"],function(a){

    var tt=function(){
        alert(a.add(1,2));
        a.t();
    };
    return{
        rr:tt
    }
});

//a.js
define(function(){
   var add=function(x,y){
       return x+y;
   } ;
   var test=function(){
       console.log("sss");
   };
    return {
        add:add,
        t:test
    }
});

//main.js
require.config({
   baseUrl:"../script",//配置基础url
    paths:{//相对baseUrl定位
        a:"part/a",
        b:"part/b"
    }
});
//所设置的脚本是异步加载的
require(["a","b"],function(a,b){
    b.rr();
});

//demo.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>test</h1>
<script src="../script/require.js" data-main="../script/main.js"></script>
</body>
</html>