Making my JavaScript/jQuery cleaner -
i'm trying improve how clean javascript/jquery , wondering if has pointers.
when @ doesn't clean...
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 doing template stuff here i'm trying make code little less verbose question @ 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); }
instead of this:
if (window.jquery) { (function ($) { // code })(jquery); }
how this:
(function($) { if ( !$ ) return; // code }(jquery));
also, this:
_this._elements.caption.empty(); _this._elements.caption.append('<div>...');
can chained:
_this._elements.caption.empty().append('<div>...');
or this:
_this._elements.caption.html('<div>...');
also, define prototype in object literal form:
podcaption.prototype = { expand: function(_this, callback) { // code }, changeimage: function(photoindex, image) { // code }, ... };
Comments
Post a Comment