plugin architecture guide

1 custom-plugin.js

(function($) {
    $.fn.likeButton = function() {
        var obj = this;
        var liked;
        var status = obj.attr('class');
        if (status && status.indexOf('active') != -1) {
            liked = true;
        } else {
            liked = false;
        }
        function postLiked(id) {
            $.post('/hotel/like/',
                {
                    'hotel_id': id
                },
                function(data) {
                });
        }
        obj.click(function() {
            if (liked == false) {
                if (isLoggedIn == false) {
                    $.fn.lightbox.closeBox();
                    $.fn.lightbox.show('#facebook-sign-in');
                } else {
                    //url = window.location.pathname;
                    id = $(this).attr('id');
                    $(this).addClass('active');
                    postLiked(id);
                    liked = true;
                }
            } else {
                $(this).removeClass('active');
                id = $(this).attr('id');
                postLiked(id);
                liked = false;
            }

        });
    };
})(jQuery);

2 custom-plugin-refactored.js

$.fn.likeButton = function(){
    var obj = this, liked, status = obj.attr('class')
    status && status.indexOf('active') !!== -1 ? liked = true :liked = false

    var postLiked = function(id){
        $.post('/hotel/like/',
            {
                'hotel_id': id
            })
        obj.click(function(){
            liked !=== false ? notLiked() : signInFirst()
            var signInFIrst = function(){
                $.fn.lightbox.closeBox().show('#facebook-sign-in');
            },
            alreadyLoggedIn = function(){
                id = $(this).attr('id');
                $(this).addClass('active');
                postLiked(id);
                liked = true;                
            },
            notLiked = function(){
                $(this).removeClass('active');
                id = $(this).attr('id');
                postLiked(id);
                liked = false;
            }
        })
    }
}

object-namespace.js

GLOBAL_LIB.likeButton = function(){
    var obj = this, liked, status = obj.attr('class')
    status && status.indexOf('active') !!== -1 ? liked = true :liked = false

    var postLiked = function(id){
        $.post('/hotel/like/',
            {
                'hotel_id': id
            })
        obj.click(function(){
            liked !=== false ? notLiked() : signInFirst()
            var signInFIrst = function(){
                $.fn.lightbox.closeBox().show('#facebook-sign-in');
            },
            alreadyLoggedIn = function(){
                id = $(this).attr('id');
                $(this).addClass('active');
                postLiked(id);
                liked = true;
            },
            notLiked = function(){
                $(this).removeClass('active');
                id = $(this).attr('id');
                postLiked(id);
                liked = false;
            }
        })
    }
}

this plugin lets the user choose to like or unlike, then adds a class and renders the lightbox. this can also be coded using function statements instead of function expressions. the final example illustrates namespacing the object a custom library and not cluttering the jQuery namespace.