Selbstausführende anonyme Funktion vs. Prototyp

In Javascript gibt es einige klar hervorgehobene Techniken zum Erstellen und Verwalten von Klassen / Namespaces in Javascript.

Ich bin gespannt, welche Situationen es rechtfertigen, eine Technik gegen die andere einzusetzen. Ich möchte einen auswählen und dabei bleiben, um vorwärts zu kommen.

Ich schreibe Unternehmenscode, der von mehreren Teams verwaltet und gemeinsam genutzt wird, und ich möchte wissen, was die beste Vorgehensweise beim Schreiben von wartbarem Javascript ist.

Ich bevorzuge normalerweise selbstausführende anonyme Funktionen, bin jedoch gespannt, wie die Community über diese Techniken abstimmt.

Prototyp :

function obj()
{
}

obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();

Selbstschließende anonyme Funktion:

//Self-Executing Anonymous Function 
(function( skillet, $, undefined ) {
    //Private Property
    var isHot = true;

    //Public Property
    skillet.ingredient = "Bacon Strips";

    //Public Method
    skillet.fry = function() {
        var oliveOil;

        addItem( "\t\n Butter \n\t" );
        addItem( oliveOil );
        console.log( "Frying " + skillet.ingredient );
    };

    //Private Method
    function addItem( item ) {
        if ( item !== undefined ) {
            console.log( "Adding " + $.trim(item) );
        }
    }     
}( window.skillet = window.skillet || {}, jQuery ));   
//Public Properties      
console.log( skillet.ingredient ); //Bacon Strips  

//Public Methods 
skillet.fry(); //Adding Butter & Fraying Bacon Strips 

//Adding a Public Property 
skillet.quantity = "12"; console.log( skillet.quantity ); //12   

//Adding New Functionality to the Skillet 
(function( skillet, $, undefined ) {
    //Private Property
    var amountOfGrease = "1 Cup";

    //Public Method
    skillet.toString = function() {
        console.log( skillet.quantity + " " + 
                     skillet.ingredient + " & " + 
                     amountOfGrease + " of Grease" );
        console.log( isHot ? "Hot" : "Cold" );
     };     

}( window.skillet = window.skillet || {}, jQuery ));
//end of skillet definition


try {
    //12 Bacon Strips & 1 Cup of Grease
    skillet.toString(); //Throws Exception 
} catch( e ) {
    console.log( e.message ); //isHot is not defined
}

Ich denke, ich sollte erwähnen, dass die selbstausführende anonyme Funktion das vom jQuery-Team verwendete Muster ist.

Update Als ich diese Frage stellte, sah ich nicht wirklich, wie wichtig es war, was ich zu verstehen versuchte. Die eigentliche Frage ist, ob Sie new verwenden oder nicht, um Instanzen Ihrer Objekte zu erstellen, oder um Muster zu verwenden, für die keine Konstruktoren erforderlich sind, bzw. um das newSchlüsselwort zu verwenden.

Ich habe meine eigene Antwort hinzugefügt, da wir meiner Meinung nach Muster verwenden sollten, bei denen das newSchlüsselwort nicht verwendet wird .

Weitere Informationen finden Sie in meiner Antwort.

Selbstausführende anonyme Funktionen werden verwendet, um die Skriptausführung zu automatisieren, ohne externe Ereignisse (z. B. window.onload) zu berücksichtigen.

In diesem Beispiel wird es verwendet, um das klassische Modulmuster zu bilden, dessen Hauptzweck darin besteht, einen Namespace in die globale Umgebung einzufügen und eine Kapselung für interne Eigenschaften bereitzustellen , die nicht "exportiert" oder an den Namespace angehängt werden.

Das Ändern eines Objektprototyps wird dagegen zum Einrichten der Vererbung (oder zum Erweitern von Natives) verwendet. Dieses Muster wird verwendet, um 1: n-Objekte mit gängigen Methoden oder Eigenschaften zu erstellen.

Sie sollten nicht ein Muster dem anderen vorziehen , da diese unterschiedliche Aufgaben ausführen . In Bezug auf den Namespace ist die Self Executing Function eine geeignete Wahl.

Hier ist das Muster, mit dem ich gerade angefangen habe (ich habe bis gestern Variationen davon verwendet):

function MyClass() {
    // attributes
    var privateVar = null;

    // function implementations
    function myPublicFunction() {
    }

    function myPrivateFunction() {
    }

    // public declarations
    this.myPublicFunction = myPublicFunction;
}

MyClass.prototype = new ParentClass(); // if required

Ein paar Gedanken dazu:

1. Sie sollten keine (anonymous)Ablaufverfolgungen in den Ablaufverfolgungen Ihres Debugger-Stacks erhalten, da alles benannt ist (keine anonymen Funktionen).
2. Es ist das sauberste Muster, das ich je gesehen habe
3. Sie können Ihre exponierte API einfach gruppieren, ohne dass deren Implementierungen an die Deklaration gekoppelt sind (was bedeutet, dass jemand Ihre öffentliche Klassenschnittstelle problemlos durchsuchen kann, ohne einen Bildlauf durchführen zu müssen).

Die einzige Zeit, die ich wirklich nutzen würde, prototypeist die Definition der Vererbung.

Ich verwende Prototypen, weil sie sauberer sind und Standardvererbungsmustern folgen. Selbstaufrufende Funktionen eignen sich hervorragend für die Browserentwicklung oder für Situationen, in denen Sie nicht wissen, wo der Code ausgeführt wird, ansonsten jedoch nur Rauschen.

Beispiel:

var me;

function MyObject () {
    this.name = "Something";
}

MyObject.prototype.speak = function speak () {
    return "Hello, my name is " + this.name;
};

me = new MyObject();
me.name = "Joshua";
alert(me.speak());

Ich würde mit der selbstausführenden Funktion gehen, aber mit einem kleinen Unterschied:

MyClass = (function() {
     var methodOne = function () {};
     var methodTwo = function () {};
     var privateProperty = "private";
     var publicProperty = "public";

     return function MyClass() {
         this.methodOne = methodOne;
         this.methodTwo = methodTwo;
         this.publicProperty = publicProperty;
     };
})();

Wenn Sie diesen Ansatz viel sauberer finden, trennen Sie die zurückgegebene globale Variable von allen Eingabeparametern (wie z. B. jQuery) (die Art und Weise, wie Sie sie geschrieben haben, entspricht der Rückgabe von void und der Verwendung eines ref-Parameters in C # Zeiger an Zeiger übergeben und in C ++ neu zuweisen). Wenn ich dann zusätzliche Methoden oder Eigenschaften an die Klasse anhängen würde, würde ich eine prototypische Vererbung verwenden (Beispiel mit der $ .extend-Methode von jQuery, aber es ist einfach genug, Ihre eigene extend () zu rollen):

var additionalClassMethods = (function () {
    var additionalMethod = function () { alert('Test Method'); };
    return { additionalMethod: additionalMethod };
})();

$.extend(MyClass.prototype, additionalClassMethods);

var m = new MyClass();
m.additionalMethod(); // Pops out "Test Method"

Auf diese Weise können Sie klar zwischen den hinzugefügten und den ursprünglichen Methoden unterscheiden.

Live-Beispiel

(function _anonymouswrapper(undefined) {

    var Skillet = {
        constructor: function (options) {
            options && extend(this, options);
            return this; 
        },
        ingredient: "Bacon Strips",
        _isHot: true,
        fry: function fry(oliveOil) {
            this._addItem("\t\n Butter \n\t");
            this._addItem(oliveOil);
            this._addItem(this.ingredient);
            console.log("Frying " + this.ingredient);
        },
        _addItem: function addItem(item) {
            console.log("Adding " + item.toString().trim());
        }
    };

    var skillet = Object.create(Skillet).constructor();

    console.log(skillet.ingredient);
    skillet.fry("olive oil");

    var PrintableSkillet = extend(Object.create(Skillet), {
        constructor: function constructor(options) {
            options && extend(this, options);
            return this;
        },
        _amountOfGrease: "1 Cup",
        quantity: 12,
        toString: function toString() {
            console.log(this.quantity + " " +
                        this.ingredient + " & " +
                        this._amountOfGrease + " of Grease");
            console.log(this._isHot ? "Hot" : "Cold");
        }
    });

    var skillet = Object.create(PrintableSkillet).constructor();

    skillet.toString();

    function extend(target, source) {
        Object.getOwnPropertyNames(source).forEach(function (name) {
            var pd = Object.getOwnPropertyDescriptor(source, name);
            Object.defineProperty(target, name, pd);
        });
        return target;
    }
}());

Sie können ein IIFE verwenden, um "Modulbereich" um Ihren Code zu emulieren. Dann können Sie Objekte wie gewohnt verwenden.

"Emulieren" Sie nicht den privaten Status mithilfe von Closures, da dies einen großen Speicherbedarf mit sich bringt.

Wenn Sie eine Unternehmensanwendung schreiben und die Speichernutzung unter 1 GB halten möchten, sollten Sie keine unnötigen Verschlüsse zum Speichern des Status verwenden.

Update Ich verstehe Javascript jetzt viel besser und habe das Gefühl, dass ich die Frage richtig beantworten kann. Ich denke, es war ein schlecht formuliertes, aber sehr wichtiges Javascript-Thema.

Das Muster "Selbstausführende anonyme Funktion" erfordert nicht die Verwendung des neuen Schlüsselworts, wenn Sie die Verwendung dieses außerhalb von Funktionen vermeiden. Ich stimme der Idee zu, dass die Verwendung von Neu eine alte Technik ist und wir uns stattdessen bemühen sollten, Muster zu verwenden, die die Verwendung von Neu vermeiden.

Die selbstausführende anonyme Funktion erfüllt diese Kriterien.

Die Antwort auf diese Frage ist subjektiv, weil es in Javascript so viele Codierungsstile gibt. Aufgrund meiner Forschung und Erfahrung würde ich jedoch empfehlen, die selbstausführende anonyme Funktion zu verwenden, um Ihre APIs zu definieren und die Verwendung neuer zu vermeiden, wann immer dies möglich ist.

Hier ist , wie ich über diese gehen würde IIFE SelfExecutingFunctiondas verlängern Myclassmit Myclass.anotherFunction();

MyClass = (function() {
     var methodOne = function () {};
     var methodTwo = function () {};
     var privateProperty = "private";
     var publicProperty = "public";

    //Returning the anonymous object {} all the methods and properties are reflected in Myclass constructor that you want public those no included became hidden through closure; 
     return {
         methodOne = methodOne;
         methodTwo = methodTwo;
         publicProperty = publicProperty;
     };
})();

@@@@@@@@@@@@@@@@@@@@@@@@
//then define another IIFE SEF to add var function=anothermethod(){};
(function(obj){
return obj.anotherfunction=function(){console.log("Added to Myclass.anotherfunction");};
})(Myclass);

//the last bit : (function(obj){})(Myclass); obj === Myclass obj is an alias to pass the Myclass to IIFE

var myclass = new Myclass();
myclass.anotherfunction(); //"Added to Myclass.anotherfunction"