工厂函数就是可以return一个对象的函数
不需要构造函数的new属性,相对方便 ,而且各自不影响
字面量对象
var person = {
name : '1'
}
var person2 = {
name : '2'
}这是这是传统的字面量对象的形式,占用内存过大
工厂函数的形式
有简单到复杂
/* 1 简单的工厂函数 */
function createJelly() { return { type: 'jelly', colour: 'red', scoop: '3' }; } console.log(createJelly())
const firstJelly = createJelly() console.log('简单的工厂函数', firstJelly) firstJelly.colour = 'blue'; // 修改之后的 值不影响其他的函数值
console.log('简单的工厂函数', firstJelly) const secontJelly = createJelly() console.log('简单的工厂函数', secontJelly)
/* 2 带参数的工厂函数 */ function createIceCream(flavour = 'Vanilla') { return { type: 'icecream', scoop: 3, flavour } } const firstIceCream = createIceCream() console.log('带参数的工厂函数', firstIceCream) const secontIceCream = createIceCream() console.log('带参数的工厂函数', secontIceCream)
/* 3 组合的工厂函数 */ function createDessert() { return { type: 'dessert', bowl: [ createJelly(), createIceCream() ] }; }
var firstDessert = createDessert() console.log('工厂函数中的简单的组合函数', firstDessert)
/* 4 复杂的工厂函数的组合方式 */ function createTrifle() { return { type: 'trifle', layers: [ createJelly(), // createCustard(), createIceCream() ], topping: createDessert() }; } var firstTrifle = createTrifle() console.log('工厂函数中的组合函数', firstTrifle)
/* 5 异步的工厂函数模式
fetch 与 catch 也是请求后台数据的方式 和ajax axios 一样 */ function getMeal(menuUrl) { return new Promise((resolve, reject) => { fetch(menuUrl).then(result => { resolve({ type: 'meal', course: result.json() }) }).catch(reject); }) }
// 上述函数过于复杂 阅读性不好 修改为一下格式 function getMeal(menuUrl) { return fetch( menuUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ "pageNum": "1", "pageSize": +"-2"
}) } ).then(function (res) {
console.log(res) return res.json() })
.then(function (res) { console.log(res) return createMeal(res)
}); } function createMeal(course = []) { console.log(course) return { type: 'meal', course }; console.log({ type: 'meal', course: course.data.lest }) } var firstMeal = getMeal('http://192.168.197.12:8080/platform/api/getCustomer') console.log(firstMeal)
通常以create的前缀命名,表以区分与普通函数
还会以get前缀,表示动态获取数据的形式
以上代码仿照网友敲的,感谢网友