使我的JavaScript/jQuery清潔

Question

我想改善我的JavaScript/jQuery是多麼乾淨，並想知道如果任何人有任何指針。

當我看這只是看起來不乾淨。

if (window.jQuery) { 
    (function ($) { 

     var podCaption = function ($scope, settings) { 

      this._settings = $.extend({ 
       openHeight : 75, 
       expandHeight : 120, 
       shrinkHeight : 30, 
       closeHeight : 15, 
       timer : '' 
      }, settings); 
      this._elements = { 
       scope : $scope, 
       caption : $('.slider-information', $scope) 
      }; 

      this.init(); 
     }; 

     podCaption.prototype.init = function() { 
      var _this = this; 

      $('.photo-more', _this._elements.caption).live('click', function() { 
       _this.expand(_this); 
      }); 

      _this._elements.caption.mouseenter(function() { 
       _this.open(_this); 
      }).mouseleave(function() { 
       _this._settings.timer = setTimeout(function() { 
        _this.shrink(_this); 
       }, 1000); 
      }); 
     }; 

     podCaption.prototype.changeImage = function(photoIndex, image) { 
      var _this = this; 

      //Shrink out content 
      _this.close(_this, function() { 
       //Build content - NOTE i'm actually doing some template stuff here but I'm trying to make the code a little less verbose for the question at hand 
       _this._elements.caption.empty(); 
       _this._elements.caption.append('<div><div class="photo-description">..</div><div class="photo-more">...</div><div class="photo-info">...</div></div>'); 

       _this.open(_this, function() { 
        _this._settings.timer = setTimeout(function() { 
         _this.shrink(_this); 
        }, 4500); 
       }); 
      }); 
     }; 

     podCaption.prototype.expand = function(_this, callback) { 
      clearTimeout(_this._settings.timer); 

      var caption = _this._elements.caption; 
      $('.photo-more', caption).hide(); 
      $('.photo-info', caption).fadeIn(); 
      caption.animate({ height : _this._setting.expandHeight, opacity : 0.8 }, 500, callback); 
     } 

     podCaption.prototype.open = function(_this, callback) { 
      clearTimeout(_this._settings.timer); 

      _this._elements.caption.animate({ height : _this._setting.openHeight, opacity : 0.8 }, 500, callback); 
     } 

     podCaption.prototype.close = function(_this, callback) { 
      clearTimeout(_this._settings.timer); 

      var caption = _this._elements.caption; 
      caption.children().fadeOut(); 
      caption.animate({ height : _this._setting.closeHeight, opacity : 0.2 }, 400, callback); 
     } 

     podCaption.prototype.shrink = function(_this, callback) { 
      clearTimeout(_this._settings.timer); 

      var caption = _this._elements.caption; 
      $('.photo-info', caption).fadeOut(function() { $('.photo-more', caption).show(); }); 
      caption.animate({ height : _this._setting.shrinkHeight, opacity : 0.3 }, 400, callback); 
     } 

     $.fn.podCaption = function (options) { 
      return new podCaption(this, options); 
     }; 
    })(jQuery); 
} 

Answer 1

取而代之的是：

if (window.jQuery) { 
    (function ($) {  
     // code  
    })(jQuery); 
} 

這個怎麼樣：

(function($) { 
    if (!$) return; 
    // code 
}(jQuery)); 

---

另外，這個：

_this._elements.caption.empty(); 
_this._elements.caption.append('<div>...'); 

可以鏈接：

_this._elements.caption.empty().append('<div>...'); 

或者只是這樣的：

_this._elements.caption.html('<div>...'); 

---

此外，您可以定義對象的文本形式的原型：

podCaption.prototype = { 
    expand: function(_this, callback) { 
     // code 
    }, 
    changeImage: function(photoIndex, image) { 
     // code 
    }, 
    ... 
}; 

Answer 2

window.jQuery && (function($){ 
    var podCaption = function ($scope, settings) { 

     this._settings = $.extend({ 
      openHeight : 75, 
      expandHeight : 120, 
      shrinkHeight : 30, 
      closeHeight : 15, 
      timer : '' 
     }, settings); 
     this._elements = { 
      scope : $scope, 
      caption : $('.slider-information', $scope) 
     }; 

     this.init(); 
    }; 
    $.extend(podCaption.prototype,{ 
     init:function() { 
      var that = this; 

      $('.photo-more', this._elements.caption).live('click', function() { 
       that.expand(); 
      }); 

      this._elements.caption.mouseenter(function() { 
       that.open(); 
      }).mouseleave(function() { 
       that._settings.timer = setTimeout(function() { 
        that.shrink(); 
       }, 1000); 
      }); 
     }, 
     changeImage:function(photoIndex, image) { 
      var that = this; 

      //Shrink out content 
      this.close(function() { 
       //Build content - NOTE i'm actually doing some template stuff here but I'm trying to make the code a little less verbose for the question at hand 
       that._elements.caption.empty(); 
       that._elements.caption.append('<div><div class="photo-description">..</div><div class="photo-more">...</div><div class="photo-info">...</div></div>'); 

       that.open(function() { 
        that._settings.timer = setTimeout(function() { 
         that.shrink(); 
        }, 4500); 
       }); 
      }); 
     }, 
     expand:function(callback) { 
      clearTimeout(this._settings.timer); 

      var caption = this._elements.caption; 
      $('.photo-more', caption).hide(); 
      $('.photo-info', caption).fadeIn(); 
      caption.animate({ 
       height : this._setting.expandHeight, 
       opacity : 0.8 
      }, 500, callback); 
     }, 
     open:function(callback) { 
      clearTimeout(this._settings.timer); 

      this._elements.caption.animate({ 
       height : this._setting.openHeight, 
       opacity : 0.8 
      }, 500, callback); 
     }, 

     close:function(callback) { 
      clearTimeout(this._settings.timer); 

      var caption = this._elements.caption; 
      caption.children().fadeOut(); 
      caption.animate({ 
       height : this._setting.closeHeight, 
       opacity : 0.2 
      }, 400, callback); 
     }, 

     shrink:function(callback) { 
      clearTimeout(this._settings.timer); 

      var caption = this._elements.caption; 
      $('.photo-info', caption).fadeOut(function() { 
       $('.photo-more', caption).show(); 
      }); 
      caption.animate({ 
       height : this._setting.shrinkHeight, 
       opacity : 0.3 
      }, 400, callback); 
     } 
    }); 

    $.fn.podCaption = function (options) { 
     return new podCaption(this, options); 
    }; 
})(window.jQuery); 

也許是這樣的。主要變化：擴大原型，此範圍內，進行if語句

Answer 3

嘗試使用JSLint的http://www.jslint.com/美化的代碼，如果這是你的...