基于RequireJS和JQuery的模块化编程——常见问题解析

时间 2019-12-14

标签基于 requirejs jquery 模块化编程常见问题解析栏目 JavaScript 繁體版

原文原文链接

因为js的代码逻辑愈来愈重，一个js文件可能会有上千行，十分不利于开发与维护。最近正在把逻辑很重的js拆分红模块，在一顿纠结是使用requirejs仍是seajs的时候，最终仍是偏向于requirejs。毕竟官方文档比较专业嘛...
不过即使是有完整的官方文档，仍然遇到很多的问题，好比jquery-ui的使用。
下面就按部就班的讲解一下我遇到的问题，以及解决的办法。html

关于AMD和CMD的理解

AMD（异步模块定义）的典型就是requirejs，而CMD（通用模块定义）的典型是淘宝的seajs。jquery

他们的相同点是，都会异步的加载js。可是不一样点是，require.js加载完会当即执行；而seajs则是等到进入主函数须要执行时才执行。编程

若是使用seajs初始的加载执行效率会比较高，可是在使用的过程当中可能会取执行js，所以可能会出现卡顿，影响用户体验（因为我也没试过，要是说错了，别见怪）。而requirejs则是在一开始就把全部加载的js都执行，这时，若是你的模块中有一些执行方法，它们可能并不会按照你想的顺序执行。浏览器

所以，若是已经习惯了异步编程，而且但愿有完善的文档推荐使用requirejs；若是是想对执行顺序有特殊要求，又方便开发，那么也可使用seajs。app

如何解决requirejs中循环依赖问题

若是你定义的某个a模块使用到了b模块，而b模块又使用了a模块，那么就会抛出循环依赖的异常。jquery插件

好比，我这里写了一个循环依赖的例子。
主页面：异步

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script data-main="test.js" src="lib/require.js"></script>
</body>
</html>

主方法：异步编程

requirejs.config({
    baseUrl: './'
});

requirejs(['js/a'],function (a){
    console.log("in test");
    a.testfromb();
});

a.js模块中，atest()方法提供b调用、testfromb()方法调用b的方法函数

define(function(require){
    var b = require("js/b");
    console.log("in a");
    return {
        atest:function(){
            console.log("test in a");
        },
        testfromb:function(){
            console.log("testfromb in a");
            b.btest();
        }
    }
});

b模块中，调用了a的方法。requirejs

define(function(require){
    var a = require("js/a");
    console.log("in b");
    return {
        btest:function(){
            console.log("test in b");
            a.atest();
        }
    }
});

这样至关于a调用了b的方法，可是b的方法依赖于a的方法，这就形成了循环依赖。浏览器会提示错误：

Uncaught Error: Module name "js/a" has not been loaded yet for context: _

按照官方文档的说法，这种属于设计的问题，应该尽可能避免。那么若是避免不了该怎么办呢？能够这样修改b模块：

define(function(require){
    // var a = require("js/a");
    console.log("in b");
    return {
        btest:function(){
            console.log("test in b");
            require("js/a").atest();
        }
    }
});

这里是等到执行atest()方法时，才加载a模块。这时，a模块很显然已经加载完了。能够看到输出的信息：

in b
a.js:3 in a
test.js:6 in test
a.js:9 testfromb in a
b.js:6 test in b
a.js:6 test in a

一样的方式，修改a可能就很差使了。这时由于模块加载的顺序是从b开始的。

关于循环依赖的源码能够参考云盘

如何在requirejs中使用jquery

若是想要使用jquery比较简单，直接在main.js中添加对应的依赖便可：

requirejs.config({
    baseUrl: './',
    paths:{
        'jquery':'lib/jquery'
    }
});

requirejs(['jquery'],
function ($){
    $('#test').html('test');
});

如何在requirejs中使用jquery插件

对于jquery的插件，比较常见的作法都是传入一个jquery的对象，在这个jquery对象的基础上添加插件对应的方法。

首先须要添加jquery插件的依赖，这里用两个插件举例子——jquery-ui和jquery-datatables

requirejs.config({
    baseUrl: './',
    paths:{
        'jquery':'lib/jquery',
        'jquery-ui':'lib/jquery-ui',
        'jquery-dataTables':'lib/jquery.dataTables'
    },
    shim:{
        'jquery-ui':['jquery'],
        'jquery-dataTables':['jquery']
    }
});

requirejs(['jquery','jquery-ui','jquery-dataTables'],
function ($){
    ....
});

因为jquery插件都须要依赖于jquery，所以能够在shim中指定依赖关系。
除了上面这种使用方法，也可使用commonJS风格的调用：

define(function(require){
    var $ = require('jquery');
    require('jquery-ui');
    require('jquery-dataTables');
    
        //下面都是测试，能够忽略
    var _test = $('#test');
    _test.selectmenu({
        width : 180,
        change : function(event, ui) {
            console.log('change');
        }
    });
    return {
        test:function(){
            //测试jquery-ui
            _test.append($('<option>test1</option><option>test1</option>'));
            _test.selectmenu("refresh");
            //测试jquery-datatables
            var _table = $('table');
            _table.dataTable();
        }
    }
});

不过，执行上面的代码，会报一个异常：

Uncaught TypeError: _table.dataTable is not a function

这是由于，dataTables并非一个require风格的模块，所以直接这样引入，并不会执行它内部的匿名函数。能够修改它的匿名函数，传入$对象，在最后一行：

*/

    return $.fn.dataTable;
//}));原来是这样
}($)));//这里增长执行这个匿名函数，而且传入$对象。

}(window, document));

这也是在网上搜的方法，原理奈何经验不足....

样例代码能够参考云盘,因为引入的资源不是很全，因此会报错，能够直接忽略，由于能执行UI插件就表示已经成功了。

requirejs使用jquery-ui的问题

因为requirejs加载js文件后会当即执行，若是你的jquery ui 插件须要刷新DOM页面，那么可能会致使页面的事件失效。

好比，你的模块在加载后，对页面的某个元素$('#test')绑定了click事件。可是使用了某个UI插件，这个插件会从新渲染DOM元素，test对应的click事件就失效了。

解决办法：

把事件绑定推迟到DOM元素渲染完后再手动触发绑定；
也可使用事件捕获代替DOM元素的事件绑定（太麻烦了...不推荐）。

好比在DOM重构的JS模块中，执行渲染的代码下面：

require("xxx").initEvents();

常见场景：

好比我在页面中使用了jquery-steps这个UI插件，它会对页面进行从新渲染。这就致使我最开始绑定的事件都失效了....只有推迟到这个js重构完页面，再绑定才行。