工厂函数

269 阅读1分钟

工厂函数就是可以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前缀,表示动态获取数据的形式


以上代码仿照网友敲的,感谢网友