RequireJs使用总结

RequireJs使用总结

requireJS API的三个主要函数：define（创建模块），require（加载模块），config（配置）

配置

require.config

• waitSeconds

waitSeconds用来设置加载模块时，最长等待时间。从requirejs源码看，默认设置是7秒。设置为0表示没有限制。
设置该参数可解决如下报错：load timeout for modules

• urlArgs

requirejs获取资源时指定一个url后缀参数，这个通常可以是一个版本号，用于指定版本升级，避免使用旧的缓存。开发时，可将其设置为’bust=’ + (new Date()).getTime()避免使用缓存

• baseUrl

指定获取资源时的公共前置路径，主要是为了简化paths中路径的写法。这个参数如果没有设置，那么requirejs会从data-main和requirejs所在的路径为起点来查找paths下的文件资源

• paths

两个用处。第一，为js文件设置别名，便于在require和define中引用；第二，设置requirejs获取资源的具体路径。
可以配置为一个数组，顺序映射。当前面的路径没有成功载入时可接着使用后面的路径。

• shim

shim用两个用处。第一，使用deps设置js文件间的依赖关系。如jquery.form依赖于jquery，那么就需要在shim中做配置；第二，使用exports输出非AMD模块化文件。

require.config({
    urlArgs: "bust=" +  (new Date()).getTime(),
    baseUrl: contentPath+'/home/',
    paths: {
        "jquery": "js/jquery.1.11.1",
        "knockout": "js/knockout-3.4.2",
        "knockout.mapping": "js/knockout.mapping",
        "layer": "trd/layer/layer",
        "laydate": "trd/laydate/laydate",
        "private_commonJS": "js/private_commonJS"
    },
    shim: {
        "knockout.mapping":{
            deps: ["knockout"]
        },
        "private_commonJS":{
            deps: ["jquery"]
        },
        "laydate":{
            deps: ["layer"]
        }
    }
});

模块的定义

参考:RequireJS 模块的定义与加载
使用define函数。
下边是我定义的一个模块，没有指定返回值（用参考中的话来讲，返回的就是一个undefined）。

define(['jquery','knockout','laydate',"knockout.mapping",'private_commonJS','layer'],function ($,ko,laydate,m) {
    ko.mapping = m;
    $(function () {
        var indexPageViewModel = new IndexPageViewModel();
        ko.applyBindings(indexPageViewModel, document.getElementById('indexPage'));
        indexPageViewModel.jqEventBind();
        indexPageViewModel.initArachives();
    });
    ...
});

模块的引用

<script type="text/javascript">
   require(['index']);
</script>

问题

• requirejs加载layer问题
  参考:layer.config(options)

requirejs加载layerjs后，layer的效果出不来，原因是layer的css样式丢失。需要使用layer.config重新加载一次。代码如下

layer.config({
path: ‘/res/layer/’ //layer.js所在的目录，可以是绝对目录，也可以是相对目录
});
//这样的话，layer就会去加载一些它所需要的配件，比如css等。
//当然，你即便不用seajs或者requirejs，也可以通过上述方式设定路径

• requirejs加载laydate的问题
  参考：配置基础路径
  ie下报错找不到laydate.css，404了
  网上很多帖子啥的，要么是没有结果，要么就是要改源码，看上去很不靠谱，就上官网看了下，没想到居然找到了。

如果你不是采用 layui 或者普通 script 标签方式加载的 laydate.js，而是采用 requirejs 等其它方式引用 laydate，那么你需要设置基础路径，以便 laydate.css 完成加载。代码如下
laydate.path = ‘/static/xxx/’; //laydate.js 所在目录
//配置好路径后，再调用
laydate.render(options);

• baseUrl失效问题
  原来使用data-min来引入require的config（如下），结果总是偶尔会发生无法请求到js文件的错误。

    <script data-main="${pageContext.request.contextPath}/js/common/main" src="${pageContext.request.contextPath}/home/js/require.js"></script>

百思不得其解，不过使用如下方法解决。即分两步来加载文件。

    <script src="${pageContext.request.contextPath}/home/js/require.js"></script>
    <script src="${pageContext.request.contextPath}/js/common/main.js"></script>

个人猜测可能跟加载顺序有关系：即如果main.js加载在requirejs之前，那么requirejs就无法获取真正路径，只能从自己所在的路径出发来找配置的js文件了。

• ko.mapping加载问题
  参考:使用define 或者 require 加载knockout.mapping 时找不到fromJS问题解决
  因为是改写原来的代码，所以，原来的代码中使用了很多ko.mapping，因此需要在使用的时候转化ko.mapping，如下

define(['jquery','knockout','laydate',"knockout.mapping",'private_commonJS','layer'],function ($,ko,laydate,m) {
    ko.mapping = m;
    ...