发出声明然后与require.js共享模块的问题

时间:2012-12-13 20:48:30

标签: javascript requirejs js-amd

我目前正试图绕过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});  
});

我真的怀疑我的模块不应该以它应该的方式实现,因为我无法找到我遇到问题的地方。 谢谢你的帮助!

1 个答案:

答案 0 :(得分: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) {...