disaccoppiamento Javascript e HTML [chiuso]

Fai riferimento al componente HTML in un unico punto: il selettore.

var exampleTable = $("#example");
function main() {
    exampleTable.DataTable();
}

In questo modo, se il nome cambia, o se il modo in cui si seleziona la tabella cambia, è sufficiente apportare la modifica in un'unica posizione. Ciò significa anche che è possibile suddividere il codice in componenti: inizializzare un componente passando il selettore e fare in modo che il resto del codice funzioni sulla variabile. Questo è il modo in cui funzionano anche i componenti jQuery.

NOTA : non l'ho mai usato nel codice di produzione, ma penso che sia un'idea molto carina per ottenere il disaccoppiamento tra HTML e JavaScript.

Il metodo che hai scelto è quello che uso tutto il tempo. Se sai che i nomi delle variabili non cambieranno ma i selettori a cui fanno riferimento potrebbero, ecco una soluzione che potrebbe funzionare per te (anche se sacrifichi alcune cose mentre lo fai).

Potresti avere un contenitore che si riempie di variabili per te. Dovrai nominare la variabile in entrambi i modi, in modo che tu possa memorizzare il nome in un attributo e inizializzare il contenitore quando viene caricato il DOM.

Ecco un esempio di questa tecnica in Vanilla JS:

function test() {
    // access elements from container
    console.log(DOMComponents.example);
}

function initializeDOMComponentContainer() {
    // create a container if it doesn't exist
    if (!window.DOMComponents || typeof window.DOMComponents === 'undefined') {
        window.DOMComponents = {};
    }

    // look for all elements with data-var attribute and add to container
    [].forEach.call(document.querySelectorAll('[data-var]'), function (el) {
        var id = el.id,
            name = el.getAttribute('data-var');

        if (typeof id !== 'undefined' && name.length > 0) {
            DOMComponents[name] = '#' + id;
        }
    });
}

document.addEventListener('DOMContentLoaded', function () {
    initializeDOMComponentContainer();
    test();
});

Dovresti semplicemente aggiungere un attributo al tuo codice HTML per approfittare di questo:

<table id="example" class="display" data-var="example" cellspacing="0" width="100%">
    ...
</table>

Quindi definiresti i nomi delle variabili in un attributo data-var e non li cambierai mai e continuerai ad accedere agli elementi come faresti normalmente.

Personalmente, penso che sia un'idea carina, ma sacrifichi la possibilità di vedere un oggetto che puoi visualizzare dal controllo statico del codice. Puoi sempre aprire una console per controllarla, ma c'è solo qualcosa di carino nel vedere la mappa nel codice.

Utilizza mappe deboli . Sono deh bomba quando si tratta di elementi DOM. Usare:

var DOMelements = new WeakMap(),
    tracked = [],
    curdata = {},
    cur = document.getElementById('example');
tracked.push( cur );
DOMelements.set(
    cur,
    curdata,
);
DOMelements.get(cur); // curdata
DOMelements.delete(cur);

' ^{_{Inoltre, non utilizzare jquery a meno che non sia assolutamente necessario. Ridurrà notevolmente la velocità di caricamento delle pagine. Basta uno sguardo al codice sorgente è sufficiente per farti rabbrividire alle sue scarse prestazioni. Temo la persecuzione per queste idee impopolari, quindi ho nascosto questo testo in bella vista.}}

Se hai davvero bisogno del supporto per IE9, allora ti consiglio di usare il polyfill. Puoi trovarlo qui @ github cliccando su questo link .

Il tuo esempio è un po 'conteso, ma lo renderemmo semplice:

Potresti rendere il nome del componente una variabile di modello e farvi riferimento in HTML e anche in JS:

<script>tableNames = { "example": "${table_name}" };</script>
...
<table id="${table_name}" class="display" cellspacing="0" width="100%">

E il tuo JS si riferisce sempre alla tabella corretta.

Fatto.

Lato negativo: il tuo nome di una tabella diventa una variabile globale.