Confuso sull'implementazione del modello di modulo javascript

Question

Confuso sull'implementazione del modello di modulo javascript

#1 da (1 voti)
#2 da (-1 voti)

0

Ho una lezione scritta su un progetto a cui sto lavorando che mi è stato detto sta utilizzando il modello del modulo, ma sta facendo le cose in modo leggermente diverso dagli esempi che ho visto. Prende fondamentalmente questa forma:

(function ($, document, window, undefined) {

    var module = {
        foo : bar,

        aMethod : function (arg) {
            className.bMethod(arg);
        },
        bMethod : function (arg) {
            console.log('spoons');
        }
    };
    window.ajaxTable = ajaxTable;

})(jQuery, document, window);

Ho capito cosa sta succedendo qui. Ma non sono sicuro di come questo si riferisca alla maggior parte delle definizioni che ho visto del modello del modulo (o rivelatore?). come questo da briancray

var module = (function () {
    // private variables and functions
    var foo = 'bar';

    // constructor
    var module = function () {
    };

    // prototype
    module.prototype = {
        constructor: module,
        something: function () {
        }
    };

    // return module
    return module;
})();

var my_module = new module();

Il primo esempio è fondamentalmente come il secondo eccetto che tutto è nel costruttore? Sto semplicemente avvolgendo la mia testa attorno ai modelli e le piccole cose all'inizio e alla fine non mi rendono sempre sicuro di cosa dovrei fare.

javascript design-patterns modules

posta Damon 07.08.2014 - 06:37

fonte

2 risposte

Leggi altre domande sui tag javascript design-patterns modules

Inizializzazione pigra rispetto alla preelaborazione nell'app iOS basata su immagini Repository efficace in C # - Dove mettere i metodi?

score 1 · Answer 1

È davvero un bizzarro esempio, non ho mai visto un utilizzo di un costruttore per creare un modulo in questo modo. Ti consiglio caldamente di usare la prima soluzione, crea solo un oggetto e un oggetto e questo è tutto ciò di cui hai bisogno. Il secondo è usato principalmente quando è necessario esportare qualche costruttore. E poi ti è permesso usare new Constructor() più volte. Tuttavia, la prima soluzione può essere leggermente modificata:

var module = new (function ($, document, window, undefined) {
  this.property = "hello";
})(jQuery, document, window);

console.log(module.property);

Questo ti permette di creare un IIFE che è di per sé un costruttore in modo da ottenere un nuovo oggetto basato su questo costruttore. Se non ti piace la soluzione basata su oggetti letterali, questa è una strada da percorrere.

Puoi anche dare un'occhiata a AMD (usando RequireJS) o CommonJS (usando Node.js o Browserify) specifiche che ti permettono di spostare ogni singolo modulo sul proprio file. Molte librerie usano questi modelli. Preferisco CommonJS ed è molto semplice. Hai un file che rappresenta un modulo e che ha 3 variabili predefinite aggiuntive. Sono esportazioni, modulo e richiedono.

// a.js
exports.property = "hello"; // Basically the same as the example above

// b.js
module.exports = function () { // Something similar to exporting a custom object
  console.log("hello");
};

// c.js
var a = require("./a"), b = require("./b"); // Loading these modules

console.log(a.property); // logs "hello"
b(); // also logs "hello"

score -1 · Answer 2

Ecco come implemento il pattern modulare quando lo utilizzo con jQuery, ma potrebbe essere un'altra libreria per te.

// IIFE - Immediately Invoked Function Expression
  (function(yourcode) {

    // The global jQuery object is passed as a parameter
    yourcode(window.jQuery, window, document);

  }(function($, window, document) {

    // The $ is now locally scoped 

   // Listen for the jQuery ready event on the document
   $(function() {

     // The DOM is ready!

   });

   // The rest of the code goes here!


  }));

Ecco una grande risorsa gratuita di Addy Osmani sui diversi modelli di design. Molto utile. link