esse é um padrão de design de javascript válido quando muitas instâncias são necessárias?

5

Eu tenho algum código que estou refatorando, agora é apenas uma lista de funções, principalmente jQuery.

O código é um construtor de formulários. O usuário adiciona seções, perguntas etc usando jqueryUI arrastar / soltar / ordenar. Eles podem ficar bastante longos no intervalo de > 1k perguntas. Eu estive debatendo entre padrões, frameworks, etc. e decidi sobre o que acredito ser a melhor melhoria sem arrancar tudo e começar completamente com algo como angular ou reagir.

Eu também estava considerando o padrão de módulo, mas estou preocupado em ter tantos duplicados dos métodos na memória (> 1k) e pensei que isso poderia me servir melhor. Existe algo que eu esteja negligenciando ou que possa causar um problema? Eu gosto que tudo é envolvido dentro de um IIFE e se sente encapsulado.

Exemplo de padrão:

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;
}());

seria usado assim:

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

1 resposta

1

O padrão que você citou em seu exemplo é bom, embora no seu caso, não seja realmente necessário. A ideia do padrão de módulo é esconder as coisas que você não retorna explicitamente. Portanto, no seu caso, o seu IIFE não está realmente fazendo nada (se você tivesse ajudantes particulares dentro de seus módulos, no entanto, você faria).

Se você tiver métodos comuns que são compartilhados entre componentes (por exemplo, todos os elementos de formulário podem ter um método getValue() , você pode usar a herança prototypal do JavaScript para criar um objeto pai e ter vários elementos de formulário herdados dele:

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

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

Essa fealdade pode ser resolvida com o recurso class do ES6, que é o açúcar sintático de tudo isso:

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

Além disso, se você estiver em módulos, dê uma olhada em Browserify e webpack . Para ES6 hoje, dê uma olhada no 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(...);
    
por 07.09.2015 / 12:35
fonte