欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

javascript中常见的三种开发模式

程序员文章站 2022-07-05 17:30:06
一、单例模式： 所谓单例模式，即保证一个类只有一个实例,并提供一个访问它的全局访问点。 单例模式实现弹出层： 二、观察者模式： 所谓观察者模式，即（发布-订阅模式）：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。 观察者模式常见面试题： 三、组合模式： ......

一、单例模式：

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

　　

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

 

上一篇： 算法与数据结构（二）三元组矩阵行列式的计算（用递归）

下一篇： html5 冒号分隔符对齐的实现

推荐阅读