è un modello di progettazione javascript valido quando sono richieste molte istanze?

5

Ho un codice che sto refactoring, in questo momento è solo un elenco di funzioni, principalmente jQuery.

Il codice è un generatore di moduli. L'utente aggiunge sezioni, domande ecc usando jqueryUI drag / drop / sort. Possono essere abbastanza lunghi nel raggio di > 1k domande. Ho discusso tra schemi, strutture, ecc. E mi sono basato su quello che ritengo possa essere il miglior miglioramento senza strappare tutto e iniziare completamente con qualcosa di angolare o di reazione.

Stavo anche considerando il modello del modulo, ma sono preoccupato di avere così tanti duplicati dei metodi in memoria (> 1k) e ho pensato che questo mi potesse servire meglio. C'è qualcosa che sto trascurando o trucchi che potrebbero causare un problema? Mi piace il fatto che sia tutto racchiuso in un IIFE e si sente incapsulato.

Esempio di modello:

var Question = (function() {

    function Question(name, type) {
        // enforces new
        if (!(this instanceof Question)) {
            return new Question(name,type);
        }

        // constructor body
        this.name = name || 'default' ;
        this.type = type || 'text';
    }

    Question.prototype.someMethod = function(arg) {
        // method body
    }

    return Question;
}());

sarebbe usato in questo modo:

Question question1 = new Question('name','picklist');
    
posta turbo2oh 16.07.2015 - 23:55
fonte

1 risposta

1

Lo schema che hai citato nel tuo esempio va bene, anche se nel tuo caso non è realmente necessario. L'idea del modello di modulo è di nascondere le cose che non si restituiscono esplicitamente. Quindi nel tuo caso, il tuo IIFE non sta realmente facendo nulla (se tu avessi degli aiutanti privati all'interno dei tuoi moduli, comunque, lo faresti).

Se disponi di metodi comuni condivisi tra i componenti (ad esempio, tutti gli elementi del modulo potrebbero avere un metodo getValue() , puoi utilizzare l'eredità prototipale di JavaScript per creare un oggetto principale e ereditare da esso i vari elementi del modulo:

function FormObject() {}
FormObject.prototype.getValue = function() { return 42; };

function Question() {
    // ...
}
Question.prototype = Object.create(FormObject);
Question.prototype.constructor = Question;

Questa bruttezza può essere risolta con la funzione class di ES6, che è lo zucchero sintattico per tutto ciò:

class FormObject {
    // FormObject generic implementation here
}
class Question extends FormObject {
    constructor() {
        // ...
    }
    someMethod() {
        // ...
    }
}
var question1 = new Question(...);

Inoltre, se ti piacciono i moduli, dai un'occhiata a Browserify e webpack . Per ES6 oggi, dai un'occhiata a Babel .

formObject.js

class FormObject {
    // FormObject generic implementation here
}
module.exports = FormObject;

question.js

var FormObject = require('./formObject');
class Question extends FormObject {
    constructor() {
        // ...
    }
    someMethod() {
        // ...
    }
}
module.exports = Question;

main.js

require('./question.js');
var question1 = new Question(...);
    
risposta data 07.09.2015 - 12:35
fonte

Leggi altre domande sui tag