我正在尝试使用Javascript模块模式。我希望我的模块有一个可以在加载json文件时调用的公共方法。在这个简单的例子中,模块在init上加载json,并且在调用public方法'loadPic'时(应该)将图像加载到DOM元素中。图像的源代码在json文件中。)当我第一次运行脚本时,我收到以下错误:Uncaught TypeError:无法读取未定义的属性'src'。我的解释是在加载数据之前自动调用方法'loadPic'...但我不知道如何防止这种情况。这是代码(PS:我使用的是Zepto,jQuery的'light'版本):
<!-- language: lang-js -->
/* in module file: DualG.js */
;(function ($) {
$.extend($.fn, {
DualG: function (element, options) {
var defaults = { // not used yet...
indexStart:0,
url: 'js/data.json'
},
my = {},
init,
loadPic,
plugin = this;
plugin.settings = {};
plugin.pics = [];
init = function () {
plugin.settings = $.extend{}, defaults, options);
$.getJSON(plugin.settings.url, function (data) {
var l = data.images.length, i;
for (i = 0; i < l; i = i + 1) {
plugin.pics[data.images[i].index] = data.images[i];
}
});
init();
my.loadPic = function (index, container) {
$(container).empty().append($("<img>").attr({"src":plugin.pics[index].src}));
};
return my;
}
});
}(Zepto));
答案 0 :(得分:1)
我的问题是数据是同步加载的 - 所以我想要使用尚未加载的数据。我在加载数据后在init中添加了一个事件触发器。然后,我听这个事件,然后只调用loadPic方法......感谢大家的帮助。