how do you implement jquery oop in real site

Question

here is my implementation , wonder if there any improvement , or share your ideas.

//* global variable *//
//I put all the variable into $('body');
$base_url = $('body').data('base_url');
$logged_in = $('body').data('logged_in');
//...

//* Object. like namespace *//
lzyy = {};

//* constructor *//
//correspond with mvc's c(controller)
lzyy.tag = function()
{
    //new Class
    m_ftl = new fav_tag_list('#fav_tag_list');
    m_fti = new fav_tag_input('#fav_tag_input');
    m_note = new note('#note');
};

//* method *//
//correspond with mvc's m(method)
lzyy.tag.property.add = function()
{
    //* events bind *//
    $('#fav_tag_btn').bind('click',function(e){
     m_ftl.add_tag(m_fti.get_val());
     m_fti.clear();
    });
}

//* util functions *//
lzyy.preload_imgs = function()
{
    for(var i = 0; i<arguments.length; i++)
    {
     jQuery("<img>").attr("src", arguments[i]);
    }
};
lzyy.br2nl = function(str)
{
    return str.replace(/<br\s*\/?>/mg,"\n");
};
//...

//* init *//
$(function()
{
    //do something that can affect all pages
});

//* objects *//
//need another code snippet provided below
var Base_Class = Class.extend({
    init:function(selecotr)
    {
     if(!this.self)
     this.self = $(selecotr);
    }
});
//for example,we have an dom element id = note 
//we can add method , property
var note = Base_Class.extend({
    close:function()
    {
     this.self.slideUp('fast');
    }
});
//we can override parent method
var tag_input = Base_Class.extend({
    init:function(selecotr)
    {
     this._super(selecotr);
     if(this.self.length)
     {
      //do something...
     }
    },
    append_item:function(data)
    {
     this.self.append(data);
    }
});
//...

Answer 1

Even though this might not qualify as an "answer" to your question/request for improvement suggestions, I have to question your goal:
Why go for OOP when writing java*script*? The language is not designed for it (neither is the jQuery framework, by the way) and I see no gain at all for neither performance nor maintainability. The only thing I see is that it takes a lot more code to obtain the same results, and that a for all practical purposes irrelevant programming paradigm is enforced.

Answer 2

I tend to separate my site into multiple objects, and most of those objects are singletons (that is, they have no constructor). This is because, how often do you really need multiple objects per site? Sometimes, but not often.

The objects I usually have are GUI, which takes care of the gui, Backend, which has a standardized function for making requests to the server, a way to handle the response JSON, and deal with errors (including errors that the server pass down, usually displayed in a modal popup), and a Control object, which deals with how the page works. Each object is defined in its own file.

The following is an example of an object with a constructor (not a singleton):

function ClassName(arg1, arg2){
    var that = this;
    /****Private Variables****/
    var a = 0;
    var b = 1;
    /****Public Variables****/
    this.c = 2;
    this.d = 3;
    /****Private Functions****/
    var e = function(arg1, arg2){

    }
    var f = function(arg1, arg2){

    }
    /****Protected Functions****/
    this.g = function(arg1, arg2){

    }
    this.h = function(arg1, arg2){

    }
    /****Constructor code ****/
    alert("constructed");
}
/*****Public Functions*****/
ClassName.prototype.i = function(arg1, arg2){

}
ClassName.prototype.j = function(arg1, arg2){

}

And the following is an example of a singleton:

var ObjectName = {};
/****Public Variables****/
ObjectName.a = 0;
ObjectName.b = 1;
/****Public Functions****/
ObjectName.c = function(arg1, arg2){

}
ObectName.d = function(arg1, arg2){

}