JavaScript设计模式——工厂模式

小灰灰 2021-08-24 19:11 438阅读 0赞

**介绍**

*  将 new 操作单独封装
 *  遇到 new 操作时，就要考虑是否使用工厂模式

来看代码：

class Product { 
    	constructor (name) { 
    		this.name = name
    	}
    	init() { 
    		console.log("这是初始化...")
    	}
    	getName() { 
    		console.log(this.name)
    	}
    }
    
    // 工厂
    function creator(name) { 
    		return new Product(name)
    }
    
    // 测试代码
    let creat = creator("肉夹馍");
    console.log(creat.name);      // 肉夹馍
    creat.init();				  // 这是初始化
    creat.getName();			  // 肉夹馍

可以由以上代码可以看出，工厂模式的用意就是通过工厂将用户和构造函数分离，我们不暴露对象是怎么创建的，里面还有哪些逻辑，而是将其封装在一个函数中。  
就类似于去饭店吃饭，你只管点餐用餐，你并不需要去关心这些菜都经过了哪几道步骤才做出来的。因为这些菜的做法已经是定义好了的。  
那在代码中也是一样，将这些“菜”的做法定义好，然后写（封装）在一个“菜单”（函数）中，需要“吃菜”的时候，直接“点餐”即可。

一个经典的例子就是jQuery中的$(‘div’)：

class jQuery { 
        constructor(selector){ 
            let slice = Array.prototype.slice
            // 用slice.call返回一个数组的形式
            let dom  = slice.call(document.querySelectorAll(selector))
            let len = dom ? dom.length : 0
            for (let i = 0; i < len; i++) { 
                // 把dom的每个元素变成实例的元素
                this[i] = dom[i]   
            }
            this.length = len
            this.selector = selector || ''
        }
        append(node) { 
            // ...
        }
        addClass(name) { 
            // ...
        }
        html(data) { 
            // ...
        }
    }
    
    window.$ = function(selector) { 
        // 工厂模式
        return new jQuery(selector);
    }

我们在使用jQuery的时候，并不是去new $(‘div’)，而是直接使用$(‘div’)，通过挂载在window对象上的$方法（工厂）来返回一个jQuery的实例。

公众号：Coder 杂谈，欢迎关注  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/c4eb7b4bdcbf4d169bfe5c19d3dd0002.png