工厂函数和模块模式有什么区别？ （更多下文）

Question

So I'm trying to wrap my head around the concept of constructors, factory functions, IIFE, closures, module patterns and I find it really confusing when should I use which one. What caught my eye is that factory functions and module patterns are really similar, take this for example:

//module pattern
const calculator = (function(){
  const add = (a,b) => (a+b);
  const sub = (a,b) => (a-b);
  const mul = (a,b) => (a*b);
  const div = (a,b) => (a/b);

  return {add, sub, mul, div}
})();

console.log(calculator.add(3,6));


// same with factory functions

 function calc (){
  const add = (a,b) => a+b;
  const sub = (a,b) => a-b;
  return {add, sub}
}

const calculator2 = calc()
console.log(calculator2.add(3,6))

Can anyone can tell me what is the practical difference? Any help appreciated!

Answer 1

If you are familiar with constructors, then you already know the concept of inheritance and prototypes, or giving our objects access to the methods and properties of another object. There are a few easy ways to accomplish this while using factories. Check this one out:

const Person = (name) => {
const sayName = () => console.log(`my name is ${name}`)
return {sayName}
}

const Nerd = (name) => {
// simply create a person and pull out the sayName function with destructuring assignment syntax!

const {sayName} = Person(name)
const doSomethingNerdy = () => console.log('nerd stuff')
return {sayName, doSomethingNerdy}
}

const jeff = Nerd('jeff')
jeff.sayName() //my name is jeff
jeff.doSomethingNerdy() // nerd stuff

This pattern is great because it allows you to pick and choose which functions you want to include in your new object.

Modules are essentially a syntax for importing and exporting code between different JavaScript files. Modules are actually very similar to factory functions. The main difference is how they're created. for example:

const calculator = (() => {
const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;
return {
add,
sub,
mul,
div,
}
})();
calculator.add(3,5) // 8
calculator.sub(6,2) // 4
calculator.mul(14,5534) // 77476

The concepts are exactly the same as the factory function. However, instead of creating a factory that we can use over and over again to create multiple objects, the module pattern wraps the factory in an IIFE (Immediately Invoked Function Expression).

Answer 2

The concepts are exactly the same as the factory function. However, instead of creating a factory that we can use over and over again to create multiple objects, the module pattern wraps the factory in an IIFE (Immediately Invoked Function Expression).

factory: use over and over again to create multiple object

module: Immediately Invoked Function

Reference

---

Module very useful whenever we want to hide certain parts of an object and only expose an interface to the user of the module. ( source )

Example

 // we used an immediately invoked function expression // to create a private variable, counter var counterIncrementer = (function() { var counter = 0; return function() { return ++counter; }; })(); // prints out 1 console.log(counterIncrementer()); // prints out 2 console.log(counterIncrementer()); // prints out 3 console.log(counterIncrementer());

As you can see, by using the IIFE, we have tied the counter variable to a function which was invoked and closed but can still be accessed by the child function that increments it. Since we cannot access the counter variable from outside of the function expression, we made it private through scoping manipulation.

---

Factory With a factory function, you can create as many user objects as you want. If you're building a chat app, for instance, you can have a user object representing the current user, and also a lot of other user objects representing all the other users who are currently signed in and chatting, so you can display their names and avatars, too. ( source )

Example:

 const createUser = ({ userName, avatar }) => ({ userName, avatar, setUserName(userName) { this.userName = userName; return this; } }); console.log(createUser({ userName: 'echo', avatar: 'echo.png' }));