javascript - 让我的 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>...'); 

---

此外，您可以以对象字面量形式定义原型(prototype):

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