我见过以下三个代码块作为 JavaScript 模块模式的示例。有什么区别，为什么我会选择一种模式而不是另一种模式？

模式一

function Person(firstName, lastName) {
    var firstName = firstName;
    var lastName = lastName;

    this.fullName = function () {
        return firstName + ' ' + lastName;
    };

    this.changeFirstName = function (name) {
        firstName = name;
    };
};

var jordan = new Person('Jordan', 'Parmer');

模式二

function person (firstName, lastName) { 
    return {
        fullName: function () {
            return firstName + ' ' + lastName;
        },

        changeFirstName: function (name) {
            firstName = name;
        }
    };
};

var jordan = person('Jordan', 'Parmer');

模式三

var person_factory = (function () {
    var firstName = '';
    var lastName = '';

    var module = function() {
        return {
            set_firstName: function (name) {
                               firstName = name;
                           },
            set_lastName: function (name) {
                              lastName = name;
                          },
            fullName: function () {
                          return firstName + ' ' + lastName;
                      }

        };
    };

    return module;
})();

var jordan = person_factory();

据我所知，JavaScript 社区一般似乎支持模式 3 是最好的。它与前两个有何不同？在我看来，这三种模式都可以用来封装变量和函数。

注:This post实际上并没有回答这个问题，我不认为它是重复的。

最佳答案

我不认为它们是模块模式，而是更多的对象实例化模式。我个人不会推荐您的任何示例。主要是因为我认为除了方法重载之外，为其他任何东西重新分配函数参数都不好。让我们回头看看在 JavaScript 中创建对象的两种方式:

原型(prototype)和新运算符

这是在 JavaScript 中创建对象的最常见方式。它与模式 1 密切相关，但将函数附加到对象原型(prototype)，而不是每次都创建一个新函数:

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
};

Person.prototype.fullName = function () {
    return this.firstName + ' ' + this.lastName;
};

Person.prototype.changeFirstName = function (name) {
    this.firstName = name;
};

var jordan = new Person('Jordan', 'Parmer');

jordan.changeFirstName('John');

Object.create 和工厂函数

引入 ECMAScript 5 Object.create它允许以不同的方式实例化对象。您不使用 new 运算符，而是使用 Object.create(obj) 来设置原型(prototype)。

var Person =  {
    fullName : function () {
        return this.firstName + ' ' + this.lastName;
    },

    changeFirstName : function (name) {
        this.firstName = name;
    }
}

var jordan = Object.create(Person);
jordan.firstName = 'Jordan';
jordan.lastName = 'Parmer';

jordan.changeFirstName('John');

如您所见，您必须手动分配属性。这就是为什么创建一个工厂函数来为您进行初始属性分配是有意义的:

function createPerson(firstName, lastName) {
    var instance = Object.create(Person);
    instance.firstName = firstName;
    instance.lastName = lastName;
    return instance;
}

var jordan = createPerson('Jordan', 'Parmer');

像往常一样，我必须引用 Understanding JavaScript OOP这是关于 JavaScript 面向对象编程的最佳文章之一。

我还想指出我自己的小图书馆 UberProto我在研究 JavaScript 中的继承机制后创建的。它提供 Object.create 语义作为更方便的包装器:

var Person = Proto.extend({
    init : function(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    },

    fullName : function () {
        return this.firstName + ' ' + this.lastName;
    },

    changeFirstName : function (name) {
        this.firstName = name;
    }
});

var jordan = Person.create('Jordan', 'Parmer');

最后，这并不是关于“社区”似乎喜欢什么，而是更多关于理解语言提供什么来完成特定任务(在您的情况下创建新对象)。从那里您可以更好地决定您喜欢哪种方式。

模块模式

模块模式和对象创建似乎有些混淆。即使它看起来相似，它也有不同的职责。由于 JavaScript 只有函数作用域，模块用于封装功能(并且不会意外创建全局变量或名称冲突等)。最常见的方法是将您的功能包装在一个自执行函数中:

(function(window, undefined) {
})(this);

因为它只是一个函数，所以你最好在最后返回一些东西(你的 API)

var Person = (function(window, undefined) {
    var MyPerson = function(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    };

    MyPerson.prototype.fullName = function () {
        return this.firstName + ' ' + this.lastName;
    };

    MyPerson.prototype.changeFirstName = function (name) {
        this.firstName = name;
    };

    return MyPerson;
})(this);

这就是 JS 中的大部分模块。它们引入了一个包装函数(相当于 JavaScript 中的新作用域)并(可选)返回一个对象，该对象是模块 API。

关于javascript - JavaScript 中的这三种模块模式实现有什么区别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13807332/