javascript - 问题声明然后与 require.js 共享模块

Question

我目前正在尝试围绕 require.js 库进行思考，但我遇到了一个问题，即使我有点明白这个问题，似乎也无法解决它。我首先创建了一个 main.js 文件:

/*
 *
 * Require.js configuration for app
 */
require.config({
 baseUrl: 'assets/js',
 paths:{
    "async": 'vendor/requirejs-plugins/async',
    "jquery": "http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min",
    "common": "modules/common",
    "jquery-fineuploader": "vendor/jquery-fineuploader/jquery.fineuploader-3.0",
    "google" : "vendor/google/maps/google.init",
    "jqueryui" : "vendor/jquery-ui/jquery-ui-1.9.2.custom.min",
    "jqcookie": "http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.2/jquery.cookie.min"
},
shim: {
    'jqueryui': {
        deps: ['jquery']
    },
    'bootstrap' : {
        deps: ['jquery']
    },
    'common': {
        deps: ['jquery', 'bootstrap']
    },
    'google': {
        deps: ['jquery' , 'bootstrap']
    },
    'index':{
        deps: ['jquery' , 'bootstrap']
    },
    'jqcookie': {
        deps: ['jquery']
    },
    'jquery-fineuploader': {
        deps: ['jquery']
    }
}
 });

 require(["google", "index"], function() {
// Bisous 
 });

此文件旨在加载我的应用程序运行所需的各种文件。

然后，为了保持干净，我创建了一个 common.js 文件，作为我的通用帮助器模块:

//Calling define with module ID, dependency array, and factory function
define(['jquery', 'bootstrap'], function () {

return{
    /*
     *
     * All-in-one modal content handler
     *
     */
    modalRefresh : function(redirectUrl, method, data){

        console.log(redirectUrl);
        console.log(method);
        console.log(data);

        $.ajax({
            url: redirectUrl,
            type: method,
            dataType: "json",
            data: (data) ? data : '',
            success: function( json, textStatus, xhr ) {

                if(json.redirect){
                    modalRefresh(json.redirect, 'GET');
                    return false;
                }

                if(!$('#submitDialog').length){
                    console.log('not found');

                    $('<div class="modal hide fade submitModal" id="submitDialog">' + json.data + '</div>').modal();
                }else{

                    console.log('found');
                    $('#submitDialog').empty().html(json.data);
                }
            },
            error: function( xhr, textStatus, errorThrown ) {}
        });
    }
}
});

此文件当前仅包含我在整个应用程序中处理对话框窗口所需的内容，即使它旨在在不久的将来处理更多应用程序助手。

我的问题是我似乎无法访问 modalRefresh 执行以下操作:

define(['jquery','jqueryui', 'bootstrap','common','async!http://maps.googleapis.com/maps/api/js?key=AIzaSyA9NdU3m2ysLvAiK1vjHnba3yQtck-pSFE&sensor=false',"vendor/google/maps/clusterer.min", "tmp/clusteringData"],
function(common){
  common.modalRefresh('test/call','POST', data = {test : 1});  
});

我真的怀疑我的模块没有按照应有的方式实现，因为我找不到问题所在。感谢您的帮助!

Answer 1

函数的参数需要与其前面的数组中的参数相匹配。

换句话说:

define(['jquery','jqueryui', 'bootstrap','common','async!http://maps.googleapis.com/maps/api/js?key=AIzaSyA9NdU3m2ysLvAiK1vjHnba3yQtck-pSFE&sensor=false',"vendor/google/maps/clusterer.min", "tmp/clusteringData"],
function(common) {...

应该是:

define(['jquery','jqueryui', 'bootstrap','common','async!http://maps.googleapis.com/maps/api/js?key=AIzaSyA9NdU3m2ysLvAiK1vjHnba3yQtck-pSFE&sensor=false',"vendor/google/maps/clusterer.min", "tmp/clusteringData"],
function(jquery, jqueryui, boostrap, common) {...

当然，您不需要直接使用的导入参数(例如 jQuery)，因此我为避免编写它们所做的就是将此类导入放在末尾。换句话说，我会将您的 define 重写为:

define(['common', 'jquery','jqueryui', 'bootstrap', 'async!http://maps.googleapis.com/maps/api/js?key=AIzaSyA9NdU3m2ysLvAiK1vjHnba3yQtck-pSFE&sensor=false',"vendor/google/maps/clusterer.min", "tmp/clusteringData"],
function(common) {...