Prototip ile Kendiliğinden Çalışan Anonim İşlev

Javascript'te, javascript'te sınıfları / ad alanlarını oluşturmak ve yönetmek için açıkça öne çıkan birkaç teknik vardır.

Bir durumu diğerine karşı hangi durumlarda kullanmak istediğini merak ediyorum. Bir tane seçip ilerlemeye devam etmek istiyorum.

Birden fazla ekip tarafından tutulan ve paylaşılan işletme kodunu yazıyorum ve korunabilir javascript yazarken en iyi uygulamanın ne olduğunu bilmek istiyorum?

Kendiliğinden Çalışan Anonim İşlevleri tercih etme eğilimindeyim, ancak topluluk oylarının bu tekniklerde ne olduğunu merak ediyorum.

Prototip:

function obj()
{
}

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

Kendiliğinden Kapanan Anonim İşlev:

//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
}

Kendiliğinden Çalışan Anonim İşlev'in jQuery ekibi tarafından kullanılan kalıptan bahsetmem gerektiğini düşünüyorum.

Güncelle Bu soruyu sorduğumda anlamaya çalıştığım şeyin önemini gerçekten görmedim. Eldeki asıl mesele nesnelerinizin örneklerini oluşturmak için yeniyi kullanıp kullanmamak veya newanahtar kelime yapıcıları / kullanımı gerektirmeyen kalıpları kullanmaktır .

Kendi cevabımı ekledim, çünkü bence newanahtar kelimeyi kullanmayan kalıpları kullanmalıyız .

Daha fazla bilgi için lütfen cevabımı görün.

Kendiliğinden çalışan anonim işlevler, harici olaylara (örn. Window.onload) takılmadan komut dosyası yürütülmesini otomatikleştirmek için kullanılır.

Bu örnekte, temel amacı küresel ortama bir ad alanı tanıtmak ve "dışa aktarılmayan" ya da ad alanına eklenmemiş herhangi bir iç özellik için enkapsülasyon sağlamak olan klasik Modül modelini oluşturmak için kullanılır .

Bir nesnenin prototipini değiştirmek, diğer yandan, miras oluşturmak (veya yerlileri uzatmak) için kullanılır. Bu desen, ortak yöntem veya özelliklere sahip 1: n nesneler üretmek için kullanılır.

Sen bir desen tercih edilmemelidir tercihi yaptıkları beri, diğerine farklı görevler. Ad alanı açısından, Kendi Kendine Yürütme İşlevi uygun bir seçimdir.

İşte kullanmaya başladığım model şu: (Düne kadar varyasyonları kullanıyordum):

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

    // function implementations
    function myPublicFunction() {
    }

    function myPrivateFunction() {
    }

    // public declarations
    this.myPublicFunction = myPublicFunction;
}

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

Bununla ilgili birkaç düşünce:

1. (anonymous)Hata ayıklayıcı yığın izlerinizde, her şeyin adı olduğu gibi hiçbir iz yakalamamalısınız (adsız işlev yok).
2. Bu şimdiye kadar gördüğüm en temiz kalıp
3. Açıklamalı API’nizi, uygulamalarını bildirime eşlik etmeden kolayca gruplandırabilirsiniz (yani, birileri genel sınıf arabiriminizi kaydırma yapmadan kolayca kaldırabilir)

prototypeArtık kullanabileceğim tek zaman, mirası tanımlamak.

Kullandığım prototipler onlar daha temizdir ve standart kalıtım çünkü. Kendi kendine arama işlevleri, tarayıcı geliştirme veya kodun nerede yürütüldüğünü bilmediğiniz bir durum için mükemmeldir, ancak aksi takdirde sadece gürültüden oluşur.

Örnek:

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

Kendi kendine çalışan fonksiyonu ile giderdim, ancak küçük bir farkla:

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

Bu yaklaşımı daha temiz bulursam, döndürülen global değişkeni herhangi bir girdi parametresinden (örneğin, jQuery gibi) ayırdığımdan (bunu yazdığınız şekilde, boşa döndürme ve biraz kapalı bulduğum C # 'ta bir ref parametresi kullanmaya eşdeğerdir) veya bir göstericiye bir göstericiye geçme ve C ++ 'a yeniden atama). O zaman sınıfa ek yöntemler ya da özellikler ekleyeceksem prototip kalıtım kullanırdım (jQuery'nin $ .extend yöntemiyle örnek, ama kendi extend'ini () eklemek yeterince kolaydı:

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"

Bu şekilde, eklenen yöntemler ile orijinal olanlar arasında açık bir fark vardır.

Canlı Örnek

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

Kodunuzun etrafında "modül kapsamını" taklit etmek için bir IIFE kullanabilirsiniz. Sonra normalde yaptığınız gibi sadece nesneleri kullanabilirsiniz.

Özel hanehalkını büyük bir hafıza cezasına sahip olduğu için kapama kullanarak "taklit etmeyin".

Eğer bir kurumsal başvuru yazıyorsanız ve hafıza kullanımınızı 1GB'ın altında tutmak istiyorsanız, saklamak için gereksiz yere kapak kullanmaktan kaçının.

Güncelleme Artık javascript hakkında daha iyi bir anlayışa sahibim ve soruyu doğru bir şekilde çözebileceğimi hissediyorum. Bence kötü ifade edilmiş, ancak ele alınması gereken çok önemli bir javascript konusu.

Kendiliğinden Yürütülen Anonim İşlev kalıbı, işlevlerin dışında kullanılmasını engellerseniz, yeni anahtar kelimenin kullanılmasını gerektiren bir model değildir. Yeni kullanmanın eski bir teknik olduğu fikrine katılıyorum ve bunun yerine yeni kullanımdan kaçınan kalıpları kullanmaya çalışmalıyız.

Kendiliğinden Çalışan Anonim İşlev bu ölçütleri karşılar.

Bu sorunun cevabı özneldir, çünkü javascript'te çok fazla kodlama stili vardır. Ancak araştırma ve deneyimlerime dayanarak, API'lerinizi tanımlamak ve mümkün olduğunda yenilerini kullanmaktan kaçınmak için Kendiliğinden Çalışan Anonim İşlevini kullanmayı seçmenizi tavsiye ederim.

İşte bu konuda giderdim nasıl IIFE SelfExecutingFunctionuzatmak Myclassile 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"