Come si può estendere un modulo Javascript definito con AMD?

Question

In primo luogo un po 'di storia, abbiamo un motore che è composto da molti file javascript che sono essenzialmente moduli. Questi moduli restituiscono una singola classe che viene assegnata all'ambito globale, anche se in uno spazio dei nomi specificato.

Il motore stesso viene utilizzato per visualizzare contenuti di eLearning, con ogni corso di eLearning diverso che richiede esigenze leggermente diverse, che è il punto in cui includiamo i file javascript nella pagina in base alle funzionalità necessarie. (C'è solo una pagina di entrata).

Ho cercato di valutare se vale la pena di passare a AMD, require.js e r.js o se è meglio rimanere con il nostro sistema attuale che include tutto ciò che è necessario sulla pagina e lo riduce a icona in uno script.

Uno dei miei maggiori problemi con l'AMD sarebbe che sembra essere più difficile estendere facilmente una classe. Ad esempio, a volte dobbiamo modificare leggermente il comportamento della classe originale. Quindi aggiungiamo un altro script include sulla pagina che estende la classe originale copiando il prototipo originale, esegui la funzione originale che viene sovrascritta con apply e quindi esegui qualsiasi codice aggiuntivo richiesto.

È possibile estendere un modulo AMD senza adattare il file originale? O mi manca il punto e stiamo meglio stare con quello che stiamo facendo in questo momento?

Answer 1

Recentemente ho iniziato un progetto che utilizza RequireJS, e il metodo che uso per estendere la sottolineatura si riduce a qualcosa di simile:

Rilevante struttura di directory:

• /script
• /scripts/underscore.js
• /scripts/base/underscore.js

La biblioteca di sottolineatura reale va a /scripts/base/underscore.js.

Le mie estensioni vanno in /scripts/underscore.js.

Il codice in /scripts/underscore.js assomiglia a questo:

define(['./base/underscore'], function (_) { 
    'use strict'; 

    var exports = {}; 

    // add new underscore methods to exports 

    _.mixin(exports); // underscore's method for adding methods to itself 

    return _; // return the same object as returned from the underscore module 
}); 

Per una normale estensione, potrebbe sembrare più simile a questo:

define(['underscore', './base/SomeClass'], function (_, SomeClass) { 
    'use strict'; 

    _.extend(SomeClass.prototype, { 
     someMethod: function (someValue) { 
      return this.somethingOrOther(someValue * 5); 
     } 
    }); 

    return SomeClass; 
}); 

Nota sulla sottolineatura: Altrove Ho usato lo shim-config RequireJS per ottenere il carattere di sottolineatura da caricare come un modulo AMD, ma questo non dovrebbe avere alcun effetto su questo processo con moduli AMD senza spessori.

Answer 2

È possibile avere moduli che contengono le funzioni del costruttore. quando questi moduli vengono inclusi, sono pronti per l'uso. quindi puoi creare oggetti da loro in seguito.

esempio richiede:

//construction.js 
define(function(){ 

    //expose a constructor function 
    return function(){ 
     this.... 
    } 
}); 

//then in foo.js 
define([construction],function(Construction){ 
    var newObj = new Construction; //one object using constructor 
}); 

//then in bar.js 
define([construction],function(Construction){ 

    //play with Construction's prototype here then use it 

    var newObj = new Construction; 
});