Komponens definició és a listák

2013.08.28. 08:10 stack

Egy gyakori (kezdők által gyakran elkövetett) hibára szeretném felhívni a figyelmet. JavaScript-ben a prototípus alapú öröklődés kapcsán, ha egy "osztályleírásban" szerepel egy tömb (vagy objektum), akkor az összes példány ugyanazt a tömböt (vagy objektumot) fogja megkapni.

Ext.define('Sample.BadComponent', {
    extend: 'Ext.Component',
    list: [],
    initComponent: function () {
        this.list.push(':)');
        console.log(this.list);
        this.callParent(arguments);
    }
});
Ext.create('Sample.BadComponent');
Ext.create('Sample.BadComponent');

Az eredmény:

[":)"]
[":)", ":)"]

A megfelelő működéshez a tömböt a komponens létrehozáskor kell elkészíteni:

Ext.define('Sample.GoodComponent', {
    extend: 'Ext.Component',
    initComponent: function () {
        this.createList();
        this.list.push(':)');
        console.log(this.list);
        this.callParent(arguments);
    },
    createList: function () {
        this.list = [];
    }
});
Ext.create('Sample.GoodComponent');
Ext.create('Sample.GoodComponent');

Igaz, sok esetben az ilyen hibák azért maradnak rejtve, mert nem a "közös" listát használják a komponensek, hanem komponens létrehozásakor adunk át újat!

Ext.create('Sample.BadComponent', {list: []});
Ext.create('Sample.BadComponent', {list: []});

Így a fenti hiba nem jelentkezik, de tudjunk róla, hogy akkor is rossz mintát használunk.

Szólj hozzá!

Címkék: mistake

A bejegyzés trackback címe:

https://extjs.blog.hu/api/trackback/id/tr365481497

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.

ExtJS blog, mi ez?

Az ExtJS egy JavaScript keretrendszer, melyet a blog írója elfogultan a legjobbnak tart, és ez a blog olyan apróságok gyűjteménye, melyek ExtJS használata közben felmerültek, eszébe jutottak...

Címkék

ajax (4) alignto (1) állás (3) analytics (1) anchorto (1) android (4) animate (2) array (9) auto (1) back button (1) beautifier (1) beforeevent (1) benchmark (1) blur (1) budapest.js (1) button (1) canvas (1) capture (1) case sensitive (1) center (1) change (1) cikkajánló (1) class (2) closure compiler (1) collapse (1) combobox (3) comment (1) console.log (2) contextmenu (2) core (2) count (1) css (15) csv (1) dataview (1) date (4) datefield (3) datepicker (1) debug (1) doksi (1) dragdrop (1) easing (1) eclipse (1) editor (1) element (5) error (5) eval (2) event (1) fejtörő (1) field (2) fieldset (1) filter (1) firefox (4) firefox extension (2) focus (3) fonts (1) fun (1) function (1) google (2) google chrome (1) grayscale (1) grid (4) group contact (1) header (3) height (2) hidden (1) hirek (2) history (1) htaccess (1) html5 (2) htmleditor (2) https (1) icon (3) id (2) ie (2) ie6 (1) ie9 (1) iframe (3) image (2) indexof (1) javascript (1) jquery (2) jslint (2) jsmin (1) json (7) keymap (1) kipróbálom (2) könyvajánló (2) label (1) layout (1) lint (1) log (1) loop (1) magyar (2) mandelbrot (1) mask (1) math (1) maxlength (1) mistake (1) mysql (5) napi szívás (16) nem extjs (12) node (1) nth child (1) number (1) off (5) offline (1) operator (1) override (20) pagesize (1) paging (2) panel (2) php (7) picker (1) plugin (3) pozicionálás (2) preload (1) print (1) propertygrid (1) pseudo (3) readonly (2) record (1) regexp (1) replace (1) resizable (1) rotate (1) round (1) scale (1) sencha touch (2) server (1) shuffle (1) slider (1) sort (3) sortable (1) store (2) string (7) sum (1) tabchange (1) tabpanel (1) tab key (2) tdd (1) template (1) textarea (2) textfield (1) textitem (1) theme (2) throw (1) timer (1) timestamp (1) title (2) toggle (1) toolbar (6) tools (1) total count (1) transparent (1) tree (1) treenode (1) trigger (1) truncate (1) try (1) ucfirst (1) undefined (2) unique (1) unload (1) urlencode (1) utf8 (2) verzió (1) video (1) viewer (1) viewport (2) visible (2) vtype (1) window (2) xtype (1) zindex (2)

Extjs.blog.hu - RSS

Kérdés?

süti beállítások módosítása