javascript - JavaScript Class Inheritance - Udvikleren.dk

Tags: javascript

Bruger #11328 @ 09.10.08 17:46

(Ja jeg ved godt der ikke er "classes" i JavaScript)

Jeg er ved at opbygge mit eget framework, men er stødt på et problem. Har fundet MooTools DOM Extender meget brugbar, og har besluttet at mit framework skal have noget af det samme.
Hvordan gør jeg det muligt at skrive:

Kode

$('something').addStyle();

I kender selvfølgelig $ funktionen.

Men eftersom addStyle er en funktion fra en af mine klasser ved jeg ikke hvordan jeg skal gøre den linje kode mulig.

Har prøvet med inheritFrom og prototype inheritance, men kan ikke få det til at virke.

Håber i kan hjælpe mig!

Bruger #10216 @ 09.10.08 18:34

4.283

Dollarfunktionen er blot en wrapper metode for en Element klasse...

Kode

Element = function(el) { this.dom = el };
Element.prototype = {
     addStyle() {
         this.dom.style.color = 'pink';
     }
}

$ = function(id) {
    return new Element(document.getElementById(id));
}

Men mootools er udsprunget af Prototype. Prototype har en object.extend, det må Mootools næsten også have.

Bruger #11328 @ 09.10.08 18:48

1.323

$ dollarfunktionen er en getElement funktion...
Og er ikke sikker på at jeg forstod hvorfor du laver variablen this.dom ?

Bruger #11328 @ 09.10.08 18:58

1.323

Det eksempel du lige har lavet returnere jo et Extender produkt.
Jeg skal bruge en helt normal DOM variabel som jeg stadig kan håndtere som en variabel man får ved: document.getElementById();

Jeg vil bare tilføje nogle funktioner.

Bruger #10647 @ 09.10.08 22:23

233

Nu du har rodet dig ud i classes i javascript kan jeg klart anbefale Prototype ( www.prototypejs.org ) som har indbygget et objekt der hedder Class som kan bruges til at lave classes med. Det undestøgger nedarvning, constructor mm.

Klart et kig værd

Bruger #11328 @ 09.10.08 23:01

1.323

Kender allerede prototypejs... Men ideen var at jeg ville lave mit eget framework, som ikke byggede på et andet.

Bruger #10647 @ 09.10.08 23:38

233

Du kunne jo evt. slette alt andet kode fra frameworket og kun lade Class objektet stå, eller bygge dit eget Class objekt da det helt sikkert vil lette arbejdet med at extende standard objekterne

Bruger #11328 @ 10.10.08 08:03

1.323

Har lige fundet ud af at jeg skal udvide ved hjælp af Element.Methods() Men følgene kode virker ikke:

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" value="text/html; charset=ISO-8859-1"/>
        <title>A title</title>
        <style type="text/css">

            body
            {
                background-color: #FFFFFF;
                font-family: "Verdana", "Arial";
                font-size: 13px;
            }
        </style>
        <script type="text/javascript">
            Element.Methods = {
              sayYea: function()
              {
                 document.write("yea!");
              }
             };
            window.onload = function()
            {
                document.getElementById("test").sayYea();
            }
        </script>
    </head>

    <body>
        <span id="test">null</span>
    </body>
</html>

JavaScript Class Inheritance

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler