当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript中常见的三种开发模式

javascript中常见的三种开发模式

2019年03月27日  | 移动技术网IT编程  | 我要评论

一、单例模式：

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

　　

<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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网