ฟังก์ชั่นไม่ระบุชื่อตนเองที่ดำเนินการเทียบกับต้นแบบ

ใน Javascript มีเทคนิคที่เด่นชัดบางประการสำหรับการสร้างและจัดการคลาส / เนมสเปซในจาวาสคริปต์

ฉันอยากรู้ว่าสถานการณ์ใดที่รับประกันโดยใช้เทคนิคหนึ่งกับอีกเทคนิคหนึ่ง ฉันต้องการที่จะเลือกและติดกับมันก้าวไปข้างหน้า

ฉันเขียนรหัสองค์กรที่ได้รับการบำรุงรักษาและใช้งานร่วมกันในหลาย ๆ ทีมและฉันต้องการที่จะรู้ว่าวิธีที่ดีที่สุดในการเขียนจาวาสคริปต์คืออะไร?

ฉันมักจะชอบฟังก์ชั่นนิรนามที่ดำเนินการเอง แต่ฉันอยากรู้ว่าชุมชนโหวตให้กับเทคนิคเหล่านี้อย่างไร

ต้นแบบ:

function obj()
{
}

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

ฟังก์ชั่นไม่เปิดเผยตัวตนปิดตัวเอง:

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

ฉันรู้สึกว่าฉันควรพูดถึงว่าฟังก์ชั่นไม่เปิดเผยตัวตนเป็นรูปแบบที่ทีม jQuery ใช้

อัปเดต เมื่อฉันถามคำถามนี้ฉันไม่ได้เห็นความสำคัญของสิ่งที่ฉันพยายามเข้าใจ ปัญหาที่แท้จริงอยู่ที่ว่าจะใช้ใหม่หรือไม่เพื่อสร้างอินสแตนซ์ของวัตถุของคุณหรือใช้รูปแบบที่ไม่ต้องใช้ตัวสร้าง / การใช้newคำสำคัญ

ฉันเพิ่มคำตอบของตัวเองเพราะในความคิดของฉันเราควรใช้รูปแบบที่ไม่ใช้newคำหลัก

สำหรับข้อมูลเพิ่มเติมโปรดดูคำตอบของฉัน

ฟังก์ชั่นที่ไม่ระบุชื่อที่ดำเนินการเองจะใช้ในการดำเนินการสคริปต์โดยอัตโนมัติโดยไม่ต้องเชื่อมต่อกับกิจกรรมภายนอก (เช่น window.onload)

ในตัวอย่างนี้ใช้เพื่อสร้างรูปแบบโมดูลคลาสสิกจุดประสงค์หลักที่จะแนะนำเนมสเปซเข้ากับสภาพแวดล้อมโลกและจัดให้มีการห่อหุ้มสำหรับคุณสมบัติภายในใด ๆ ที่ไม่ใช่ "ส่งออก" หรือแนบกับเนมสเปซ

ในทางกลับกันการดัดแปลงวัตถุต้นแบบนั้นถูกใช้เพื่อสร้างการสืบทอด (หรือขยายแบบดั้งเดิม) รูปแบบนี้ใช้เพื่อสร้างวัตถุ 1: n ด้วยวิธีการหรือคุณสมบัติทั่วไป

คุณไม่ควรเลือกรูปแบบหนึ่งในการตั้งค่าไปที่อื่น ๆ เนื่องจากพวกเขาดำเนินการที่แตกต่างกันงาน ในแง่ของการกำหนดเนมฟังก์ชั่นการดำเนินการด้วยตนเองเป็นตัวเลือกที่เหมาะสม

นี่คือรูปแบบที่ฉันเพิ่งเริ่มใช้ (ใช้รูปแบบของมันจนถึงเมื่อวาน):

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

    // function implementations
    function myPublicFunction() {
    }

    function myPrivateFunction() {
    }

    // public declarations
    this.myPublicFunction = myPublicFunction;
}

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

ความคิดบางอย่างเกี่ยวกับเรื่องนี้:

1. คุณไม่ควรได้รับการ(anonymous)ติดตามใด ๆในการติดตามสแต็คของ debugger เป็นชื่อทุกอย่าง (ไม่มีฟังก์ชั่นที่ไม่ระบุชื่อ)
2. มันเป็นลวดลายที่สะอาดที่สุดที่ฉันเคยเห็น
3. คุณสามารถจัดกลุ่ม API ที่เปิดเผยของคุณได้อย่างง่ายดายโดยไม่ต้องมีการติดตั้งใช้งานควบคู่กับการประกาศ

ครั้งเดียวที่ฉันจะใช้prototypeอีกต่อไปจริงๆคือการกำหนดมรดก

ฉันใช้ต้นแบบเพราะสะอาดกว่าและทำตามรูปแบบการสืบทอดมาตรฐาน ฟังก์ชั่นการเรียกใช้ตัวเองนั้นยอดเยี่ยมสำหรับการพัฒนาเบราว์เซอร์หรือสถานการณ์ที่คุณไม่รู้ว่าโค้ดนั้นกำลังถูกประมวลผลที่ไหน

ตัวอย่าง:

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

ฉันจะไปกับฟังก์ชั่นการทำงานด้วยตัวเอง แต่มีความแตกต่างเล็กน้อย

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

หากพบว่าวิธีนี้สะอาดกว่ามากฉันแยกตัวแปรโกลบอลที่ส่งคืนจากพารามิเตอร์อินพุตใด ๆ (เช่น jQuery) (วิธีที่คุณเขียนจะเท่ากับโมฆะที่ส่งคืนและใช้พารามิเตอร์ ref ใน C # ซึ่งฉันหาบิตหรือ ผ่านในตัวชี้ไปยังตัวชี้และกำหนดใหม่ใน C ++) ถ้าฉันจะแนบวิธีการหรือคุณสมบัติเพิ่มเติมกับคลาสฉันจะใช้การสืบทอดต้นแบบ (ตัวอย่างด้วยวิธี $ .extend ของ jQuery แต่ง่ายพอที่จะม้วนส่วนขยายของคุณเอง):

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"

วิธีนี้ทำให้คุณมีความแตกต่างที่ชัดเจนระหว่างวิธีการเพิ่มเติมและวิธีดั้งเดิม

ตัวอย่างสด

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

คุณสามารถใช้ IIFE เพื่อเลียนแบบ "ขอบเขตโมดูล" รอบรหัสของคุณ จากนั้นคุณสามารถใช้วัตถุได้ตามปกติ

อย่า "เลียนแบบ" สถานะส่วนตัวโดยใช้การปิดที่มีการลงโทษหน่วยความจำขนาดใหญ่

หากคุณเขียนแอปพลิเคชันระดับองค์กรและต้องการให้การใช้งานหน่วยความจำของคุณต่ำกว่า 1GB หลีกเลี่ยงการใช้การปิดเพื่อเก็บสถานะโดยไม่จำเป็น

อัปเดต ตอนนี้ฉันเข้าใจ JavaScript ได้ดีขึ้นและรู้สึกว่าฉันสามารถตอบคำถามได้อย่างถูกต้อง ฉันคิดว่ามันเป็นหัวข้อที่พูดไม่ดี แต่สำคัญมากสำหรับการจัดการกับจาวาสคริปต์

รูปแบบฟังก์ชั่นไม่ระบุชื่อที่ดำเนินการด้วยตนเองไม่ใช่สิ่งที่ต้องใช้คำหลักใหม่หากคุณหลีกเลี่ยงการใช้ฟังก์ชันนี้นอก ฉันเห็นด้วยกับความคิดที่ว่าการใช้ใหม่เป็นเทคนิคแบบเก่าและเราควรพยายามใช้รูปแบบที่หลีกเลี่ยงการใช้สิ่งใหม่

ฟังก์ชั่นไม่ระบุชื่อดำเนินการด้วยตนเองตรงตามเกณฑ์นี้

คำตอบสำหรับคำถามนี้เป็นอัตนัยเพราะมีรูปแบบการเข้ารหัสจำนวนมากในจาวาสคริปต์ อย่างไรก็ตามจากการวิจัยและประสบการณ์ของฉันฉันขอแนะนำให้เลือกใช้ Self Executing Function เพื่อกำหนด API ของคุณและหลีกเลี่ยงการใช้งานใหม่ทุกครั้งที่ทำได้

นี่คือวิธีที่ฉันจะไปเกี่ยวกับเรื่องนี้IIFE SelfExecutingFunctionเพื่อขยายMyclassด้วย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"