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 if statement

Answer 3

尝试使用JSLint http://www.jslint.com/来美化代码，如果这就是你的意思......

使我的JavaScript / jQuery更清洁

3 个答案: