RequireJs的使用方法----简单介绍

1.RequireJS介绍:

RequireJS是一个非常小巧的javascript模块载入框架，是AMD（Asynchronous Module Definition，异步模块加载机制）规范最好的实现之一。最新版的requireJS压缩后只有14k，堪称非常轻量。它还同时可以和其他的框架协调工作，使用requireJS必将使我们的前端代码质量得以提升。

2.RequireJS如何使用:

首先是我们先因该建一个main.js的文件,在这里面我们配置一下我们所需要的一系列框架

require.config({

paths : {

//这样配置，减轻本地服务器的压力

"jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],

//将本地的js文件同样配置，之后引用

"test01" : ["js/test01"],

"test02" : ["js/test02"]

}

});

再是我们将我们的 Require.js 跟 main.js 导入到我们要用的html文件中

<script type="text/javascript" src="js/require2.1.11.js" ></script>

<script type="text/javascript" src="js/main.js" ></script>

<script type="text/javascript">

require(["jquery","t1","t2"],function(){

alert("页面加载成功~~");

},function(){

alert("页面加载失败~~")

});

</script>

在官方提供了一种基于标签属性的方式：

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

这样的话 我们就可以使用我们的require管理模块化工具了

如果有第三放模块的话我们可以以使用

require.config({

    shim: {

        "underscore" : {

            exports : "_";

        },

        "jquery.form" : {

            deps : ["jquery"]

        }

    }

})

也可以简写为:

require.config({

    shim: {

        "underscore" : {

            exports : "_";

        },

        "jquery.form" : ["jquery"]

    }

})

-------------------------------------------------------------------------------

其他内容

在回调函数中，我们可以再对应的参数得到加载的js对象，如第一个就是jQuery对象，第二个和第三个我们自己的js中没有对象，所以为undefined。

<script type="text/javascript" src="js/require2.1.11.js" ></script> <script type="text/javascript" src="js/main.js" ></script> <script type="text/javascript"> require(["jquery","t1","t2"],function($,t1,t2){ /**  * 我们在回调函数中可以传递参数，这些参数就是  * require方法中的js对象，如jQuery对象  */ alert($("body").html()); },function(){ alert("页面加载失败~~") }); </script>

还是就是在define函数中同样可以传递一个数组参数，这个数组参数就是在前面我们已经config过的js库或者我们本地的js文件，如：

//将要使用的库可以再这儿引入 define(["jquery"],function($){ function fn1() { alert("Hello requirejs~~~***"); } //alert($(window).scrollTop()); fn1(); });

这样我们在define中制作jQuery的插件的话，就可以直接使用了