模块模式jQuery

Question

我在使用非常虚拟的JavaScript代码中的模块模式时出现问题。

此代码是可以正常使用：

; 
var test = (function() { 
    var config = { 
     replacement: $('a') 
    }; 

    var init = function() { 
     config.replacement.click(function(){ 
      alert("hello"); 
     }); 
    } 

    return { 
     init: init 
    } 
})(); 

$(document).ready(test.init()); 

任何人都可以告诉我为什么我不能使用：

; 
var test = (function() { 
    var config = { 
     replacement: 'a' 
    }; 

    var init = function() { 
     $(config.replacement).click(function(){ 
      alert("hello world"); 
     }); 
    } 

    return { 
     init: init 
    } 
})(); 

$(document).ready(test.init()); 

相反，当我点击我的网站的任何链接，这个代码不工作一个jQuery对象作为配置变量的“默认”初始化。

Answer 1

$(a)在DOM就绪之前执行，可能在没有a元素可访问时执行。

在您的第一个示例中，该集合是在DOM就绪后构建的。

你可以把它变成不是函数...

var config = { 
    replacement: function() { return document.links; } 
}; 

Answer 2

那么，为什么在这个例子中位于使用jQuery选择jQuery的官方网站正在为默认的配置瓦尔？

var feature = (function() { 
    var $items = $("#myFeature li"); 
    var $container = $("<div class='container'></div>"); 
    var $currentItem = null; 
    var urlBase = "/foo.php?item="; 

    var createContainer = function() { 
      var $i = $(this); 
      var $c = $container.clone().appendTo($i); 
      $i.data("container", $c); 
     }, 
     buildUrl = function() { 
      return urlBase + $currentItem.attr("id"); 
     }, 
     showItem = function() { 
      $currentItem = $(this); 
      getContent(showContent); 
     }, 
     showItemByIndex = function (idx) { 
      $.proxy(showItem, $items.get(idx)); 
     }, 
     getContent = function (callback) { 
      $currentItem.data("container").load(buildUrl(), callback); 
     }, 
     showContent = function() { 
      $currentItem.data("container").show(); 
      hideContent(); 
     }, 
     hideContent = function() { 
      $currentItem.siblings().each(function() { 
       $(this).data("container").hide(); 
      }); 
     }; 
    $items.each(createContainer).click(showItem); 
    return { 
     showItemByIndex: showItemByIndex 
    }; 
})(); 

$(document).ready(function() { 
    feature.showItemByIndex(0); 
}); 

Official jQuery website