解决sea.js引用jQuery提示$ is not a function的问题

Posted 2020-08-07 hello八戒

在使用sea.js的如下写法引用jQuery文件时，

//main.js
define(function(require,exports,module){
    var $ = require(\'jquery-3.1.0.min\');
    $(\'#name\').html(\'helloworld\');
})

会报错，提示$ is not a function；

原因在于jQuery是默认支持AMD规范的，而sea.js是遵循CMD规范进行加载；这两种规范对外提供模块时的定义方法不一样：

// CMD
define(function(require, exports, module) {
    var a = require(\'./a\')
    a.doSomething()
    // 此处略去 100 行
    var b = require(\'./b\') // 依赖可以就近书写
    b.doSomething()
    // ...
})

// AMD 默认推荐的是
define([\'./a\', \'./b\'], function(a, b) { // 依赖必须一开始就写好
    a.doSomething()
    // 此处略去 100 行
    b.doSomething()
    // ...
})

jQuery对外提供模块时默认支持的是AMD规范，其写法为：

if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    } );
}

因此，如果想让jQuery支持CMD规范，则将以上代码修改为如下代码即可：

if ( typeof define === "function") {
    define(function(require,exports,module){
        return jQuery;
    });
}

其区别就在于define方法支持规范的判断，以及参数类型的不同。