浅谈requireJS 摘自http://www.cnblogs.com/giggle/p/5436710.html

时间 2019-11-18

标签浅谈 requirejs 摘自 http www.cnblogs.com www cnblogs com giggle 5436710.html html 栏目 JavaScript 繁體版

原文原文链接

项目中大都使用模块化开发，requireJS做为AMD模块开发的典范，因此有必要学习下。经过一步步利用requireJS编写demo，从而学习requireJS的一个总体开发流程以及自我使用requireJS的一些感觉。html

AMD：一种基于模块的异步加载JavaScript代码的机制，它推荐开发人员将JavaScript代码封装进一个个模块，对全局对象的依赖变成了对其余模块的依赖，无须再声明一大堆的全局变量。经过延迟和按需加载来解决各个模块的依赖关系。模块化的JavaScript代码好处很明显，各个功能组件的松耦合性能够极大的提高代码的复用性、可维护性。这种非阻塞式的并发式快速加载JavaScript代码，使Web页面上其余不依赖 JavaScript代码的UI元素，如图片、CSS以及其余DOM节点得以先加载完毕，Web页面加载速度更快，用户也获得更好的体验。jquery

一、下载requieJSgit

在用requieJS模块化开发以前，咱们须要准备一些东西。那确定就是下载require.js文件咯，哈哈哈，由于是基于它开发嘛。github

二、建立一个HTML文件并发

建立一个HTML文件后，导入requireJS确定是使用<script>标签的，这个毫无疑问。而后在这个标签中有个data-main属性，它的做用呢是做为一个出入口，就是说在加载requireJS后，从data-main这个属性进入。异步

好比下面这样：模块化

 <!DOCTYPE html>
    <head>
        <title>require</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    </head>
    <body>
        <!--这是requireJS，data-main是做为入口模块，在这里就是js/main-->
        <script data-main="js/main" src="js/require.js"></script>
    </body>
</html>

当我经过加载js/require.js后，而后去执行js/main的js文件。main它也是个js文件，咱们能够将它的.js后缀省略掉，requireJS会将其加上。函数

三、 data-mainrequirejs

当程序执行<script data-main=’js/main’ src=’js/require.js’></script>后，经过data-main进入main.js，去执行main.js。那main.js里是些什么东东呢？学习

请看代码：

/*
    require.config执行baseUrl为'js'，
    baseUrl指的模块文件的根目录，能够是绝对路径或相对路径
*/
require.config({
    baseUrl: 'js',
    paths: {
        jquery: 'jquery-1.8.2.min'
    }
});
/*
    这里经过require，来引入monkey.js，
    而后经过后面的匿名函数给他们分配参数，如这里的
    monkey-->mk
*/
require(['monkey'],function(mk) {
    mk.init();   
});

从上面代码中，能够看见main.js中包含require.config和require两个模块。

require.config的做用就是配置requireJS的一些参数，而后公共引用。

例如，上面的baseUrl，它的做用就是，以它做为基础路径，在这个路径之下，查找文件。我是将全部.js文件都放在js文件夹下的。因此，在配置这个属性后，之后的文件都是在js这个路径下查找内容了。

以下：

require(['monkey'], function(monkey){
    monkey.init();
});

它在引用monkey时，就是引用的monkey，而不是js/monkey。

paths的做用呢？就是将一些经常使用的js文件，换成通用的名字。例如jquery-1.8.2.min.js，咱们不可能每次调用它时，都写这一啪啦吧，因此为了方便，就将jquery替代jquery-1.8.2.min.js咯，之后咱们就能够直接使用jquery了，快捷方便。

好了，require.config基本混了个脸熟，一句话，它的做用就是配置requireJS嘛。

那require呢？

require的做用就是执行。好比这里我只须要monkey.js去执行，因此我就导入了monkey，而后经过mk参数，得到monkey执行后的返回值。若是有返回值，而后咱们就能够对mk作相应的处理了。

咦，那monkey里面是个什么呢？

咱们看看：

/*
    define的参数为匿名函数，该匿名函数返回一个对象
*/
define(['jquery'],function($){
    var init = function(){
        console.log($.browser);
    };
    return {
        init: init
    };
});

define！它的做用是，定义一个js模块，供其余模块或者require使用。它引用其余js的模块的方法和require差很少，都是将须要的js文件引入，而后参数一一对应。你们须要要注意的是，define里定义的方法或者变量，其余模块是访问不到的，因此，你若是想其余模块也能访问，就将相应的方法抛出去(return)对象或者函数均可以。在这里，我return的是一个对象，提供init供其余模块调用。

好了，详细代码见here