从jquery中调用javascript名称空间函数

Question

我想用此模块中数组的值填充jquery ui模式对话框：

var WsdArrays = function() {
     var arr = [["the boy is going home", "wsd_aud1"],
      ["You and I are friends", "wsd_aud2"],
      ["He has a book of mine", "wsd_aud3"],
      ["He will run to his home", "wsd_aud4"],
      ...          ];         
    return {
        values: function(index1, index2) {
        return arr[index1][index2];
        }
    };
}(); 

当这样调用时，它可以正常工作：

console.log(WsdArrays.values(0, 0));

但是，当在jquery语句中使用由jquery click事件生成的参数调用模块函数时，它不起作用：

jQuery("span.ws_dialog_icon").on("click",function(evnt) {
  jQuery("div#ws_dialog").dialog("open");
  evnt.stopPropagation();
  var elementId = evnt.target.id,
      index1 = elementId.substr(7), //strips chars from ids like "wsd_img01"
      index2 = 0,
      arrayVals = WsdArrays.values(index1, index2);
  jQuery("div#wsd_text").text(arrayVals);
});

这里需要更改什么？

Answer 1

使用window使其更具全局性。

因此，将其设置为：

window.WsdArrays = function() {
     var arr = [["the boy is going home", "wsd_aud1"],
      ["You and I are friends", "wsd_aud2"],
      ["He has a book of mine", "wsd_aud3"],
      ["He will run to his home", "wsd_aud4"],
      ...          ];         
    return {
        values: function(index1, index2) {
        return arr[index1][index2];
        }
    };
}(); 

这样，它将位于全局名称空间中，如果它是在另一个函数中创建的，则它也将起作用。 如果在另一个函数中用var声明它，则仅在该函数中可用。

Answer 2

我认为scoping确实是主要问题。 但是建议不要使用window / global名称空间，而建议使用另一个名称空间：

var app=function($){
    var WsdArrays = function() {
        var arr = [["the boy is going home", "wsd_aud1"],
        ["You and I are friends", "wsd_aud2"],
        ["He has a book of mine", "wsd_aud3"],
        ["He will run to his home", "wsd_aud4"],
        ...          ];         
        return {
                 values: function(index1, index2) {
                         return arr[index1][index2];
               }
        };
    }();
    $("span.ws_dialog_icon").on("click",function(evnt) { 
       $("div#ws_dialog").dialog("open");
       evnt.stopPropagation();
       var elementId = evnt.target.id,
       index1 = elementId.substr(7), //strips chars from ids like "wsd_img01"
       index2 = 0,
       arrayVals = WsdArrays.values(index1, index2);
       $("div#wsd_text").text(arrayVals);
   });
}(jQuery);

因此，无需使用全局范围，并且onClick可以看到WsdArrays。

另外：为什么不使用字典方法？

var WsdArrays=function(){
    var whatEverString={
         "wsd_aud1","the boy is going home",
         "wsd:auds","you and i are friends"
    };
    return {
        values:function(id){ return whatEverString[id]; }
    }
}

另一件事：为什么将简单功能封装在IFFE中？ 仅出于命名空间的原因？ 一个简单的功能就足够了。

Answer 3

尝试parseInt：

index1 = parseInt(elementId.substr(7)),

原因是在为"wsd_img01"调用elementId.substr(7)之后，没有parseInt的index1是字符串"01" "wsd_img01" 。 这将导致问题，因为当您调用arr["01"][index2]时arr["01"]返回undefined会导致异常。 如下面的演示所示

当我们使用parseInt ， index1变为1，这不会引起问题。

演示