[jQuery/JS/OOP] Dziedziczenie - problem i pytanie Opcje

[starach]

Chcąc stworzyć sobie Log wywołań AJAXa postanowiłem rozszerzyć klasę Pane:

Kod

function Pane()
{
    this.id = 0;
    this.id_html = '';
    this.name = '';
    this.jquery = '';
    this.content = '';
    this.template = '';
    this.container = $('body');
    this.isMinimized = false;
    var ths = this;
    this.open = function()
    {
        this.register();
        this.setTemplate();
        this.container.append(this.template);
        this.jquery = $('div#'+this.id_html);
        this.registerEvents();
    }
    this.close = function()
    {
        this.jquery.remove();
        PaneManager.unregister(this.id);
    }
    this.minimize = function()
    {
        $('div.content', this.jquery).css('display', 'none');
        this.isMinimized = true;
    }
    this.maximize = function()
    {
        $('div.content', this.jquery).css('display', 'block');
        this.isMinimized = false;
    }
    this.register = function()
    {
        this.id = PaneManager.register(this);
    }
    this.registerEvents = function()
    {
        $('div.btn_c', this.jquery).click(function(){ ths.close() });
        $('div.btn_m', this.jquery).click(function(){ if(ths.isMinimized) { ths.maximize(); } else { ths.minimize(); } });
        this.jquery.bind('dragstart',function(event)
        {
            return $(event.target).is('.header');
    });
    this.jquery.bind('drag', function(event)
        {
            $(this).css({ top: event.offsetY,left: event.offsetX });
        });
    }
    this.setTemplate = function()
    {
        this.id_html = 'pane-' + this.id;
        this.template = '<div id="' + this.id_html + '" class="pane">\n\
                                         <div class="header">' + this.name + '\n\
                                             <div class="btn_m">-</div>\n\
                                             <div class="btn_c">x</div>\n\
                                         </div>\n\
                                         <div class="content">' + this.content + '</div>\n\
                                         </div>';
    }
}

Klasą PaneLog:

Kod

function PaneLog()
{
    this.content = '<ul></ul>';

    this.append = function($message)
    {
        $('ul', this.jquery).append('<li>'+$message+'</li>');
    }
    this.setName = function($name)
    {
        this.name = '[LOG] ' + $name;
    }
    this.close = function()
    {
        alert('test')
        this.jquery.remove();
        PaneManager.unregister(this.id);
    }
    this.test = function()
    {
        console.log(this);
        console.log(this.id_html);
    }
}
PaneLog.prototype = new Pane();

Problem pierwszy: Metoda close klasy PaneLog jest nadpisywana przez metodę klasę rodzica. Jak temu zaradzić?
Problem drugi: Przy wywołaniu metody close zgłaszany jest błąd "this.jquery.remove is not a function". Przy wywołaniu innych metod korzystających z tej zmiennej komunikat się nie pokazuje. Może to być jednak uwarunkowane tym że this.jquery jest potrzebne jedynie jako kontener w którym wyszukany ma zostać pewien element i jako że jest on pusty wyszukanie odbywa się na całym dokumencie. Jest to tylko moje przypuszczenie bo nie wiem jak mogę to sprawdzić.

[smentek]

1. W javascript nie ma czegos takiego jak klasa. To co w swoim programie nazywasz klasą, jest funkcją (która jest także obiektem). A co do zasłoniętej metody, proponuje przerobic kod na taką modłę:

[PHP] pobierz, plaintext 
<?php
var Pane = function(){ // <---Przy tym zapisie widac wyraznie, ze Pane to nie zadna klasa a obiekt :)
    this.costam = 'xxx';
    this.ooo = 'ababa';
    this.close = function(){
        alert('zamykam' + this.costam)
    }
    
    
};
 
var PaneLog = function(){
    //Po odkomentowniu zmienna o wartości yyy 'wyjdzie na wierzch' 
    //this.costam = 'yyy';
    this.close = function(){
        alert('closing' + this.costam)
 
    }
}
 
 
var myPane = new Pane();
myPane.close();
 
//wskaźnik this z obiektu PaneLog będzie od tego momentu wskazywac na obiekt Pane
PaneLog.prototype = new Pane();
 
var myPaneLog = new PaneLog();
myPaneLog.close();
?>
[PHP] pobierz, plaintext 

2. Co do drugiego błędu, zgaduje że w danym momencie pod zmienną this.jquery nie ma wartości która odnosiła by sie do obiektu
jQuery. Tak jak w przykładzie poniżej. W wiekszości przypadków używasz this.jquery do budowy selectora tak więc nigdy nie wygeneruje to błędów (co najwyżej elementy drzewa DOM nie zostaną znalezione).

[PHP] pobierz, plaintext 
<?php
$(document).ready(function(){
    var smiec = 'bzdury';          // <-- łancuch znaków
    var element = $('#usmiech2'); // <-- obiekt jQuery
    
    element.remove();
    smiec.remove();
});
?>
[PHP] pobierz, plaintext 

Fakt że this.jquery jest zmienną obiektu wydaje mi się złym rozwiązaniem. Obiekt powinien zawierać to co jest jego częścią składową this.jquery jest tu 'ciałem obcym' (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Musisz myśleć bardziej globalnie.
Programuj swoje obiekty tak jak by cała warstwa wizualna wogóle nie istniała zajmuj się nią na samym końcu. Np metoda do usunięcia czegos:

[PHP] pobierz, plaintext 
<?php
... //jestsmy w obiekcie    
    this.id; //Parametr id identyfikuje nam obiekt. 
    this.close = function(){
        //Tutaj kod który usunie element + jakieś inne działania na innych obiektach z tym zwiazane
 
            ....
 
        //Wyrzucamy nasz element z drzewa DOM (przestaje byc widoczny)
        $('#' + this.id).remove();
 
... //i dalej nastepne metody obiektu
    }
?>
[PHP] pobierz, plaintext 

Parametr this.id to praktycznie wszystko co jest potrzebne aby odnaleźć interesujący nas węzeł drzewa DOM i zmienić wygląd strony. Mając go możemy użyc jQuery czy innej biblioteki. aby zmienić ten fragment strony, który przedstawia nasz obiekt (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) .