问题声明然后与 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) {...