前言
今天在项目学习中get到了一种巧妙的封装方式，应用了工厂函数的机制，可以有效进行大型项目解耦合。
工厂函数
所谓工厂函数，就是指这些内建函数都是类对象，当你调用他们时，实际上是创建了一个类实例”。意思就是当我调用这个函数，实际上是先利用类创建了一个对象，然后返回这个对象。由于 Javascript 本身不是严格的面向对象的语言（不包含类，ES6相关工厂函数可参考链接2），实际上来说，Javascript 并没有严格的“工厂函数”，但是在 Javascript中，我们能利用函数模拟类。来看下面一个例子：
function person(firstName, lastName, age) {
const person = {};
person.firstName = firstName;
person.lastName = lastName;
person.age = age;
return person;
}
上述代码，创建一个新对象，并将传递参数作为属性附加到该对象上并返回新对象。 这是一个简单的 JavaScript 工厂函数。
总结：
- 它是一个函数。
- 它用来创建对象。
- 它像工厂一样，“生产”出来的函数都是“标准件”（拥有同样的属性）
代码Demo
const factoryFunction = ({thirdParameter}) => {
const firstParameter = "We can define our firstParameter here!"
//inject firstParameter
const otherFunction = (thirdParameter) => {
//TODO We can do some other processing here
console.log("otherFunction");
return {
first: firstParameter,
third: thirdParameter
}
}
const result = otherFunction(thirdParameter);
return result;
}
const myFunction = ({result}, {secondParameter}) => {
console.log("first:",result.firstParameter);
console.log("second:",secondParameter);
}
const myFunctionWrapper = ({manyParameter}) => {
const factory = factoryFunction({
//TODO get what we need in manyParameter to deal as thirdParameter
});
return {
//TODO get what we need in manyParameter ad secondParameter
...factory(myFunction({secondParameter}))
};
}
myFunctionWrapper({manyParameter});
-
myFunctionWrapper({manyParameter}); -> 整体调用，里面可以包含多个不同的
myFunction，图中以一个为例 -
factoryFunction -> 从所有参数中取一部分自己内部函数需要的参数作为thirdParameter，同时可在内部定义需要注入的参数firstParameter，输出一个处理后的对象
- 可以在此写一些监控逻辑
-
myFucntion -> 接收到factoryFunction处理后的对象，里面可以拿到内部已注入的参数和其他参数处理结果，所以只需要传入自己需要的secondParameter即可。
可以从代码里看到神奇的事，在调用的时候我们只需要传入一个参数就可以了（可是真正的函数却可能需要用到其他很多参数！）
这个是怎么实现的？
我们使用factoryFunction注入了第一个参数，而外层根本不需要知道实现细节，也不需要重复传入，在myFunction中就可以自由使用了，从而有效地实现了代码解耦合。
试想我们有多个页面组件，每个页面都需要传入一堆不同参数，同时有些页面需要进行监控（即内部函数需要使用到其他的复杂配置）。我们就可以利用这种方式，将复杂配置相关的第一个参数全部剥离到这样的factory中进行定义，内部直接调用返回。而在外层调用时候只需要传入我们需要的第二个参数就可以了，当遇到监控相关的逻辑，就可以直接调用工厂函数return的对象，从而获取。
