requireJS的使用

时间 2019-11-25

原文原文链接

原文：http://www.360doc.com/content/15/0424/17/21412_465723215.shtmljavascript

requireJS的使用:html

RequireJS是一个很是小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称很是轻量。它还同时能够和其余的框架协同工做，使用RequireJS必将使您的前端代码质量得以提高。前端

通常状况下，咱们加载js都是直接写在页面body里面，这样会形成页面阻塞，使用require不只能解决这个问题，还能为大规模web开发提供规范，版本管理等。java

例如一个经典的加载js是这样：jquery

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="a.js"></script>
        <script type="text/javascript" src="b.js"></script>
        <script type="text/javascript" src="c.js"></script>
        <script type="text/javascript" src="d.js"></script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

而使用了require以后，页面变成了：web

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="require.js"></script>
        <script type="text/javascript">
            require(["a","b","c","d"]);
        </script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

　　固然，咱们可使用 data-main把逻辑放到main.js文件里面api

<script data-main="js/main.js" type="text/javascript" src="libs/require.js" ></script>

　　是否是很简单呢？数组

那require怎么用呢？下面先了解一下require的基本api:
require会定义三个变量：
define,require,requirejs，其中require === requirejs，通常使用require更简短
define 用来定义一个模块
require 加载依赖模块，并执行加载完后的回调函数框架

比较经典的写法是：函数

require(["module"],function(module){ 
   module.function();
})

　　第一个参数是一个模块数组，第二个参数是回调函数，一般回调函数会有模块提供的接口，这样就实现了依赖注入，减小了全局变量污染。注意参数注入的顺序要与模块数组顺序一致，名字并不重要，顺序一致表明把对象传给这个变量。
这是require的基本写法，那这些文件在哪找呢？
require提供了很智能的找法，若是index.html页面加入了data-main标签，则这个目录将会成为基目录，即baseUrl，若是没有的话，index.html所在的目录将成为基目录，require默认的文件就是js文件，因此，咱们在使用require的时候，能够连.js都不用写，直接require([‘a’]); 至关于加载了a.js文件

若是文件不在这个相对路径下，咱们还能够经过配置来找文件，使用require.config()的path参数;

require.config({
    paths : {
        // 其余目录下的文件
        "a" : "../libs/zepto",
        // 绝对路径 
        "b" : "/libs/handlebars",
        // 加载cdn文件
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
    }
})

　　path映射那些不直接放置于baseUrl下的模块名(这至关于跟冗长的模块名取个简介的名字)。设置path时起始位置是相对于baseUrl的，除非该path设置以”/”开头或含有URL协议（如http:）.

另外，经过require加载的模块通常都须要符合AMD规范即便用define来申明模块，可是部分时候须要加载非AMD规范的js，例如一些旧的库，或者jquery的插件库等，这时候就须要用到另外一个功能：shim

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

　　这里jquery.form依赖于jquery，因此咱们须要添加deps参数。还能够更简单点，对做为jQuery或Backbone的插件存在而不导出任何模块变量的”模块”们， shim配置可简单设置为依赖数组

requirejs.config({
    shim: {
        'jquery.colorize': ['jquery'],
        'jquery.scroll': ['jquery'],
        'backbone.layoutmanager': ['backbone']
    }
});

　　基本用法就这些，更深刻的学习请参考requirejs官方文档：http://requirejs.org/ 中文版的能够再看一下这个：http://javascript.ruanyifeng.com/tool/requirejs.html