jquery - 了解 jQuery 教程模块模式示例

Question

考虑 Code Organization section of the Learning Center 中发布的有关模块模式的最后一个代码片段(如下所示) ，我试图理解示例中模块的某些方面:

• 变量声明($items、$container...)由 ; 分隔，而函数声明(createContainer , buildUrl, showItem, ....) 由 , 分隔。为什么？是不是括号有问题？
• 为什么前三个变量的名称($items、$container 和 $currentItem)以 $ 开头?这是否意味着命名约定(因为 javascript 允许使用字符 $)来标识 DOM 片段变量，还是还有其他原因？
• 为什么函数 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 );
});

Answer 1

1. 您可以在多个语句中声明变量，或者仅在 1 个语句中声明变量，由您决定。 (var x;var y; 与 var x,y;)。据我所知没有什么区别。

2. 以 $ 开头:由开发人员选择，对于 PHP 程序员来说它看起来更好，不会影响变量，没有什么特别的，只是一个命名约定。我不使用它，也不推荐它，它只会让你的代码看起来最糟糕，而且如果你使用 jQuery 会让你更头疼。

3. 参见第 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