设计模式之原型模式

原型模式是快速创建重复对象的一种最佳模式。 这里所说的原型是我们要创建的实例的原始模型，不是js中某个方法或对象的原型属性。

在javaScript中因为需要渲染各种数据，尤其是在使用基于数据驱动的vue或react等框架进行开发时经常会遇到需要数据拷贝的情况。除此之外，关于前端的数据缓存方法的封装等也常常需要考虑到数据的拷贝，原型模式其实在不知不觉间就被使用了。

class ProtypeMain {
    constructor() {
        this.map = new Map();
    }
    setItem(name, item) {
        this.map.set(name, item);
    }
    getItem(name) {
        return this.cloneItem(this.map.get(name));
    }
    cloneItem(obj) {
        let objClone = Array.isArray(obj) ? [] : {};
        if (obj && typeof obj === "object") {
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    if (obj[key] && typeof obj[key] === "object") {
                        objClone[key] = this.cloneItem(obj[key]);
                    } else {
                        objClone[key] = obj[key];
                    }
                }
            }
        }
        return objClone;
    }
    static isEqual(obj1, obj2) {
        return obj1 === obj2;
    }

}

let pInstance = new ProtypeMain();

let helloStr = "hello world";

let Obj1 = {
    name: "jack", age: 32, child: {
        name: "mike",
        age: 2
    }
}

let obj2 = [2, 3, 5, 7];

pInstance.setItem("hello", helloStr);

pInstance.setItem("jack", Obj1);

pInstance.setItem("mlist", obj2);

let mItem1 = pInstance.getItem("jack");
let mItem2 = pInstance.getItem("jack");

console.log(ProtypeMain.isEqual(mItem1, mItem2)); // false

上边的cloneItem使用了一段自己封装的clone方法，实际开发中尽管es6也给我们提供了Object.assign这样的方法，但是由于其浅复制特性和兼容性问题，被真正使用的并不多。不过好在我们也有$.extend这样经典又好用的工具方法。