了解 jQuery 教程模块模式示例答案

【问题标题】：Understand jQuery Tutorial Module Pattern example了解 jQuery 教程模块模式示例
【发布时间】：2013-01-02 12:43:50
【问题描述】：

考虑到Code Organization section of the Learning Center 中发布的关于模块模式的最后一个代码片段（如下所述），我试图了解示例中模块的某些方面：

变量声明（$items，$container...）由;分隔，而函数声明（createContainer，buildUrl，showItem，...）由@分隔987654328@。为什么？有括号问题吗？
为什么前三个变量（$items、$container 和$currentItem）的名称以$ 开头？这是否意味着用于标识 DOM 片段变量的命名约定（因为 javascript 允许使用字符 $）还是有其他原因？
为什么函数 createContainer 使用 var 声明，而其他函数（buildUrl、showItem、...）没有 var？

// 将模块模式用于 jQuery 功能 $( 文档 ).ready(function() {

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() {
  var $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
};

})();

feature.showItemByIndex( 0 );
});

【问题讨论】：

标签： jquery code-organization module-pattern

【解决方案1】：

您可以在多个语句中或仅在 1 个语句中声明变量，由您决定。（var x;var y; 与 var x,y;）。据我所知没有区别。
以 $ 开头：是开发人员的选择，对于 PHP 程序员来说它看起来更好，不影响变量，没什么特别的，只是一个命名约定。我不使用它，也不推荐它，它只会让你的代码看起来最糟糕，如果你使用 jQuery 会让你更头疼。
参见第 1 点（它有“var”，但它位于语句的开头）：

var createContainer = function() {...},buildUrl = function() { ... },showItem = function() {... },showItemByIndex = function(idx) {...}.. .;

在http://www.w3schools.com/js/js_variables.asp和http://www.wikihow.com/Declare-a-Variable-in-Javascript查看更多详情

【讨论】：