comment mettre en œuvre jquery oop dans le site réel

Question

voici ma mise en œuvre, je me demande s'il ya une amélioration, ou partager vos idées.

//* 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

Même si cela pourrait ne pas être considéré comme une « réponse » à votre question/demande de suggestions d'amélioration, je dois remettre en question votre objectif:
Pourquoi aller pour POO lors de l'écriture java scénario? Le langage n'est pas conçu pour ça (pas plus que le framework jQuery) et je ne vois aucun gain du tout pour les performances et la maintenabilité. La seule chose que je vois, c'est qu'il faut beaucoup plus de code pour obtenir les mêmes résultats, et que, à toutes fins pratiques, un paradigme de programmation non pertinent est appliqué.

Answer 2

J'ai tendance à séparer mon site en plusieurs objets, et la plupart de ces objets sont des singletons (c'est-à-dire qu'ils n'ont pas de constructeur). C'est parce que, à quelle fréquence avez-vous vraiment besoin de plusieurs objets par site? Parfois, mais pas souvent. Les objets que j'ai habituellement sont GUI, qui s'occupe du gui, Backend, qui a une fonction normalisée pour faire des demandes au serveur, un moyen de gérer la réponse JSON, et de gérer les erreurs (y compris les erreurs que le le serveur transmet, généralement affiché dans un popup modal), et un objet de contrôle, qui traite du fonctionnement de la page. Chaque objet est défini dans son propre fichier.

Voici un exemple d'un objet avec un constructeur (pas un 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){ 

} 

Et ce qui suit est un exemple d'un singleton:

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

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

}