设计模式之学习笔记

1. 原型模式

/*
         * 模式作用：
         * 1. 原型对象本身就是有效地利用了每个构造器创建的对象
         * 注意事项：
         * 1. 浅拷贝 和 深拷贝 的问题，免得出现引用问题
         * 2. 现有的文献里查看原型模式的定义，没有针对JavaScript的，你可能会发现很多讲解的都是关于类的，但是现实情况是基于原型继承的JavaScript完全避免了类（class）的概念
         */

        var myobj = {
            str: 'mystring',
            num: 1,
            myarr: [30, {
                arrgo: 'i am arr'
            }],
            obj: {
                innerobj: {
                    test: 25
                },
                innerstr: 'myobjInnerstr'
            }
        }
        function clone(obj){
            var ret = {},k,b;
            /*
            * ========================= 深拷贝
            */
            // 判断传递进来的参数形式 是 数组 还 对象
            if((b=(obj instanceof Array)) || obj instanceof Object){
                // console.log('init');
                ret = b?[]:{}; // 自动赋值 为数据 或 对象
                for(k in obj){
                    if((obj[k] instanceof Array) || (obj[k] instanceof Object)){
                        ret[k] = clone(obj[k]);
                    }else{
                        ret[k] = obj[k];
                    }
                }
            }
            // 浅拷贝
            // for(k in obj){
            //     ret[k] = obj[k];
            // }
            return ret;
        }

        // var result = clone(myobj);
        // result.obj.innerstr = 'outter';
        // console.log(result);
        // console.log(myobj);

        // ===================== Object.create() 需要继承 函数的prototype
        function myobjfn(){
            // todo
        }
        // myobjfn.prototype = myobj;
        myobjfn.prototype.move = function(){
            console.log('我是moved');
        }
        function result(){
            // todo
        }
        // result.prototype = Object.create(myobj);
        // var _result = new result();
        // console.log(_result);

        result.prototype = Object.create(myobjfn.prototype);
        var _result = new result();
        // console.log(_result);
        _result.move();

        function test(){

        }
        test.prototype.p = function(){}
        var m = new test();
        // console.log(m);

        // ==================== Object.create() 简便型
        var o = Object.create(myobj);
        o.num = 3;
        console.log(myobj);
        console.log(o);
        // 理解 浅拷贝 与 深拷贝  ， Object.create() 应用

1. 工厂模式

        // 1. 工厂应该有厂长 来决定运行到底哪条产品线
        // 消费者 -》 子类
        var gongchang = {};
        gongchang.chanyifu = function(argument){
            this.gongren = 50;
            alert('我们有' + this.gongren);
        }
        gongchang.chanxie = function(){
            alert('产鞋子~');
        }
        gongchang.yunshu = function(){
            alert('运输');
        }
        gongchang.changzhang = function(para){
            // new    js我们说了  构造函数模式 单例模式
            return new gongchang[para]();
        }

        var me = gongchang.changzhang('chanyifu');
        alert(me.gongren);

        // 简单工厂模式
        var XMLHttpFactory = function(){};

        XMLHttpFactory.createXMLHttp = function(){
            var XMLHttp = null;
            if(window.XMLHttpRequest){
                XMLHttp = new XMLHttpRequest();
            }else if(window.ActiveXObject){
                XMLHttp = new ActiveXObject('Microsof.XMLHTTP');
            }
            return XMLHttp;
        };

        var AjaxHander = function(){
            var XMLHttp = XMLHttpFactory.createXMLHttp();
            // todo
        }

        // ===========  抽象工厂(提供接口,类似于Java中的接口，无实际代码实现)
        var XMLHttpFactory = function(){

        };
        XMLHttpFactory.prototype = { // 如果真的要调用这个方法会抛出一个错误，它不能被实例化，只能用来派生子类

            createFactory = function(){
                throw new Error('this is an abstract class');
            }
        }   // 派生子类， 

        var XHRHandler = function(){
            XMLHttpFactory.call(this);
        };
        XHRHandler.prototype = new XMLHttpFactory();
        XHRHandler.prototype.constructor = XHRHandler; // 重新定义 createFactory 方法

        XHRHandler.prototype.createFactory = function(){
            var XMLHttp = null;
            if(window.XMLHttpRequest){
                XMLHttp = new XMLHttpRequest();
            }
            else if(window.ActiveXObject){
                XMLHttp = new ActiveXObject('Microsof.XMLHTTP');
            }
            return XMLHttp;
        }