Chức năng ẩn danh tự thực hiện so với nguyên mẫu

Trong Javascript, có một vài kỹ thuật nổi bật rõ ràng để tạo và quản lý các lớp / không gian tên trong javascript.

Tôi tò mò không biết tình huống nào bảo đảm sử dụng một kỹ thuật so với kỹ thuật kia. Tôi muốn chọn một và gắn bó với nó di chuyển về phía trước.

Tôi viết mã doanh nghiệp được duy trì và chia sẻ trên nhiều nhóm và tôi muốn biết cách thực hành tốt nhất khi viết javascript duy trì là gì?

Tôi có xu hướng thích Tự thực hiện các chức năng ẩn danh tuy nhiên tôi tò mò không biết phiếu bầu của cộng đồng là gì đối với các kỹ thuật này.

Nguyên mẫu:

function obj()
{
}

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

Chức năng ẩn danh tự đóng:

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

Tôi cảm thấy rằng tôi nên đề cập rằng Hàm ẩn danh tự thực thi là mẫu được sử dụng bởi nhóm jQuery.

Cập nhật Khi tôi hỏi câu hỏi này, tôi không thực sự thấy tầm quan trọng của những gì tôi đang cố gắng hiểu. Vấn đề thực sự trong tay là liệu có nên sử dụng mới để tạo phiên bản của các đối tượng của bạn hay sử dụng các mẫu không yêu cầu các nhà xây dựng / sử dụng newtừ khóa.

Tôi đã thêm câu trả lời của riêng mình, vì theo tôi, chúng ta nên sử dụng các mẫu không sử dụng newtừ khóa.

Để biết thêm thông tin xin vui lòng xem câu trả lời của tôi.

Tự thực thi các hàm ẩn danh được sử dụng để tự động thực thi tập lệnh mà không cần nối vào các sự kiện bên ngoài (ví dụ window.onload).

Trong ví dụ này, nó được sử dụng để tạo mẫu Mô-đun cổ điển, mục đích chính của nó là giới thiệu một không gian tên vào môi trường toàn cầu và cung cấp đóng gói cho bất kỳ thuộc tính bên trong nào không được "xuất" hoặc gắn vào không gian tên.

Sửa đổi một nguyên mẫu đối tượng, mặt khác, được sử dụng để thiết lập sự kế thừa (hoặc mở rộng bản địa). Mẫu này được sử dụng để tạo ra các đối tượng 1: n với các phương thức hoặc thuộc tính phổ biến.

Bạn không nên chọn một mẫu theo sở thích khác, vì chúng thực hiện các nhiệm vụ khác nhau . Về mặt không gian tên, Chức năng Tự thực hiện là một lựa chọn thích hợp.

Đây là mẫu mà tôi mới bắt đầu sử dụng (đã sử dụng các biến thể của nó cho đến ngày hôm qua):

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

    // function implementations
    function myPublicFunction() {
    }

    function myPrivateFunction() {
    }

    // public declarations
    this.myPublicFunction = myPublicFunction;
}

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

Một vài suy nghĩ về điều này:

1. Bạn không nên lấy bất kỳ (anonymous)dấu vết nào trong ngăn xếp trình gỡ lỗi của mình dưới dạng mọi thứ được đặt tên (không có chức năng ẩn danh).
2. Đó là mẫu sạch nhất mà tôi từng thấy
3. Bạn có thể dễ dàng nhóm nhóm API được hiển thị của mình mà không cần triển khai chúng cùng với khai báo (có nghĩa là ai đó có thể dễ dàng tìm kiếm giao diện lớp công khai của bạn mà không cần phải cuộn)

Lần duy nhất tôi sử dụng prototypenữa thực sự là xác định tính kế thừa.

Tôi sử dụng các nguyên mẫu vì chúng sạch hơn và tuân theo các mẫu thừa kế tiêu chuẩn. Các chức năng tự gọi rất tốt cho phát triển trình duyệt hoặc trong trường hợp bạn không biết mã được thực thi ở đâu, nhưng nếu không thì đó chỉ là nhiễu.

Thí dụ:

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

Tôi sẽ sử dụng chức năng tự thực thi, nhưng có một chút khác biệt:

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

Nếu tìm cách tiếp cận này sạch hơn nhiều, khi tôi tách biến toàn cục được trả về khỏi bất kỳ tham số đầu vào nào (chẳng hạn như jQuery) (cách bạn viết nó tương đương với trả về void và sử dụng tham số ref trong C #, tôi thấy hơi bị tắt, hoặc chuyển một con trỏ đến một con trỏ và gán lại nó trong C ++). Nếu sau đó tôi sẽ đính kèm các phương thức hoặc thuộc tính bổ sung vào lớp thì tôi sẽ sử dụng kế thừa nguyên mẫu (ví dụ với phương thức $ .extend của jQuery, nhưng nó đủ dễ để cuộn phần mở rộng của riêng bạn ()):

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"

Bằng cách này, bạn có sự phân biệt rõ ràng giữa các phương thức được thêm vào và các phương thức ban đầu.

Ví dụ trực tiếp

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

Bạn có thể sử dụng IIFE để mô phỏng "phạm vi mô-đun" xung quanh mã của mình. Sau đó, bạn có thể chỉ cần sử dụng các đối tượng như bạn thường làm.

Không "mô phỏng" trạng thái riêng tư bằng cách sử dụng các bao đóng vì có hình phạt bộ nhớ lớn.

Nếu bạn viết một ứng dụng doanh nghiệp và muốn duy trì mức sử dụng bộ nhớ dưới 1GB, hãy tránh sử dụng các lần đóng để lưu trữ trạng thái.

Cập nhật Bây giờ tôi đã hiểu rõ hơn về javascript và cảm thấy tôi có thể giải quyết chính xác câu hỏi. Tôi nghĩ rằng đó là một chủ đề javascript kém, nhưng rất quan trọng để giải quyết.

Mẫu Chức năng ẩn danh tự thực thi không phải là mẫu yêu cầu sử dụng từ khóa mới nếu bạn tránh sử dụng hàm ngoài này. Tôi đồng ý với ý kiến ​​cho rằng sử dụng cái mới là một kỹ thuật cũ và thay vào đó chúng ta nên cố gắng sử dụng các mẫu tránh sử dụng cái mới.

Chức năng ẩn danh tự thực hiện đáp ứng tiêu chí này.

Câu trả lời cho câu hỏi này là chủ quan, bởi vì có rất nhiều kiểu mã hóa trong javascript. Tuy nhiên, dựa trên nghiên cứu và kinh nghiệm của tôi, tôi khuyên bạn nên chọn sử dụng Chức năng ẩn danh tự thực thi để xác định API của mình và tránh sử dụng mới bất cứ khi nào có thể.

Đây là cách tôi sẽ đi về điều này IIFE SelfExecutingFunctionđể mở rộng Myclassvới 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"