javascript中常见的三种开发模式

一、单例模式：

　　所谓单例模式，即保证一个类只有一个实例,并提供一个访问它的全局访问点。

　　

<script type="text/javascript">
            //一个类有某个实例，就用这个实例，没有的话，就新生成一个实例

            var singleTon = (function(){
                var _instance = null;

                function Foo(){
                    this.a = "**";
                    this.b = "**";
                }
                Foo.prototype.fn = function(){

                }

                return {
                    getInstance:function(){
                        if(!_instance){
                            _instance = new Foo();
                        }
                        return _instance;
                    }
                }
            })();
 console.log(singleTon.getInstance()==singleTon.getInstance());

        </script>

　　单例模式实现弹出层：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                height: 100px;
                width: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <input type="button" id="btn" value="弹出层" />

        <script type="text/javascript">
            (function(){
                var oBtn = document.getElementById("btn");
                var _instance = null;
                //创建弹窗类
                function PopBox(){
                    this.node = document.createElement("div");
                    document.body.appendChild(this.node);
                }
                oBtn.onclick = function(){
                    if(!_instance){
                        _instance = new PopBox;
                    }
                }

            })();
        </script>
    </body>
</html>

二、观察者模式：

　　所谓观察者模式，即（发布-订阅模式）：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

　　

<script type="text/javascript">
        var observer = {
            regist:function(eventName,callback){
                if(!this.obj){
                    this.obj = {};
                }
                if(!this.obj[eventName]){
                    this.obj[eventName] = [callback];
                }else{
                    this.obj[eventName].push(callback);
                }

            },
            emit:function(eventName){
                if(this.obj[eventName]){
                    for(var i = 0; i < this.obj[eventName].length; i++){
                        this.obj[eventName][i]();
                    }
                }
            },
            remove:function(eventName,callback){
                if(this.obj[eventName]){
                    for(var i = 0; i < this.obj[eventName].length;i++){
                        if(this.obj[eventName][i]==callback){
                            this.obj[eventName].splice(i,1);
                        }
                    }
                }
            }
        };

        //购物车模块注册的事件
        observer.regist("loginSucess",function(){
            console.log("购物车模块发生改变");
        });
        //个人信息模块注册的事件
        observer.regist("loginSucess",function(){
            console.log("个人信息模块发生改变");
        });

        observer.emit("loginSucess");//
    </script>

　　观察者模式常见面试题：

　　

<script type="text/javascript">
            var Event = {
                // 通过on接口监听事件eventName
                // 如果事件eventName被触发，则执行callback回调函数
                on: function(eventName, callback) {
                    //你的代码 注册事件
                    if(!this.obj){
                        Object.defineProperty(this,"obj",{
                            value:{},
                            enumerabel:false
                        })
                    }
                    if(!this.obj[eventName]){
                        this.obj[eventName] = [callback];
                    }else{
                        this.obj[eventName].push(callback);
                    }
                },
                // 触发事件 eventName
                emit: function(eventName) {
                    //你的代码 发布事件
                    if(this.obj[eventName]){
                        for(var i = 0; i < this.obj[eventName].length; i++){
                            this.obj[eventName][i](arguments[1]);
                        }
                    }
                }
            };

            // 测试1
            Event.on('test', function(result) {
                console.log(result);
            });
            Event.on('test', function() {
                console.log('test');
            });
            Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test'

            // 测试2
            var person1 = {};
            var person2 = {};

            Object.assign(person1, Event);
            Object.assign(person2, Event);

            person1.on('call1', function() {
                console.log('person1');
            });

            person2.on('call2', function() {
                console.log('person2');
            });

            person1.emit('call1'); // 输出 'person1'
            person1.emit('call2'); // 没有输出
            person2.emit('call1'); // 没有输出
            person2.emit('call2'); // 输出 'person2'

        </script>

三、组合模式：

　　组合模式又称部分-整体模式，将对象组合成树形结构以表示“部分整体”的层次结构。

<script type="text/javascript">
        //订单系统  票务系统  酒店系统

        function Ticket(){

        }
        Ticket.prototype.create = function(){
            console.log("创建了机票订单");
        }

        function Hotel(){

        }
        Hotel.prototype.create = function(){
            console.log("创建了酒店订单");
        }

        function Order(){
            this.orders = [];
        }
        Order.prototype.addOrder = function(order){
            this.orders.push(order);
            return this;
        }
        Order.prototype.create = function(){
            for(var i = 0; i < this.orders.length; i++){
                this.orders[i].create();
            }
        }

        var order = new Order();
        order.addOrder(new Ticket()).addOrder(new Ticket())
        .addOrder(new Hotel());

        order.create();
    </script>