Requirejs---菜鸟入门

来源：互联网发布：象过河软件怎么使用编辑：程序博客网时间：2024/06/15 19:28

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    }})//有依赖也可以注入，类似angularjsdefine(["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.jsdefine(["a"],function(a){    var tt=function(){        alert(a.add(1,2));        a.t();    };    return{        rr:tt    }});

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

//main.jsrequire.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>

可以用demo试试，容易理解一些

详细内容请看Requirejs中文网。也可以去原文
http://www.requirejs.cn/docs/api.html#cjsmodule
http://requirejs.org/docs/api.html

0 0