js的设计模式_前端数据加密的三种方式

　　起源：

　设计模式并非是软件开发中的专业术语。实际上‘模式’最早诞生于建筑学。20世纪30年代，哈佛大学建筑学博士和他的研究团队花了约20年的时间，

研究了为解决同一问题而设计出不同结构建筑，从中发现了那些高质量设计中的相似性，并且用‘模式’来指代相似性。

设计模式：在面向对象软件设计中针对特定问题的简洁而优雅的解决方案。

单例模式：

　　保证一个类只有一个实例，并提供一个访问它的全局访问点，如window对象。当我们单击登录按钮的时候，页面出现

一个登录浮窗，这个悬浮窗是唯一的，无论点击多少次登录按钮，这个浮窗都只会被创建一次，这个登录的浮窗就适合用单例模式创建。

　　var CreateDiv=(function(){
                var instance;
                var CreateDiv=function(html){
                     console.log(instance)
                    if(instance){ //instance参数，如果没有则执行下面的，如果有则直接返回
                        return instance;
                    }
                    this.num=html;//this.num 为CreateDiv对象的一个属性   html为实例化的时候传进的参数
                    this.init();
                    console.log(this)
                    return instance = this;//返回CreateDiv对象
                }
                CreateDiv.prototype.init=function(){
                    var div=document.createElement('div');
                    div.innerHTML=this.num;//将num属性写在div里面
                    document.body.appendChild(div);
                }
                return CreateDiv;
            })();
            var a = new CreateDiv('a');
            var b = new CreateDiv('b');//因为只会被创建一次，所以实例化b的时候a已经实例化过了，所以CreateDiv对象是没有变化的
            a==b;//true
            a===b;//true

代理模式定义

为一个对象提供一个代用品或占用符，以便控制对它的访问。很多明星都有自己的经纪人，比如开演唱会经纪人会代替明星细节和谈好薪酬之后

再跟明星签合同。即核心是当客户不方便直接访问一个对象或者不满足需要的时候，提供一个替身对象控制了这个对象的，替身对象对请求最初一些

处理之后再把请求转交给本体请求。

　　var myImage=(function(){
                var imgNode=document.createElement('img');
                document.body.appendChild(imgNode);
                return {
                    setSrc:function(src){
                        imgNode.src=src;
                    }
                }
            })();
            var proxyImage=(function(){
                var img=new Image();
                img.onload=function(){
                    myImage.setSrc(this.src)//传入的图片路径
                };
                return{
                    setSrc:function(src){
                        myImage.setSrc('load.gif');
                        img.src=src;//把传入的图片路径传给真正的对象，显示在页面上
                    }
                }
            })()
            proxyImage.setSrc();

命令模式

　　命令模式中的命令指的是一个执行某些特定事情的指令，有时候需要向某些特定事情的指令。常见的应用场景有时候需要向某些对象发送请求，

但是并不知道请求的接受者是谁，也不知道被请求的操作是什么。假如我们去快餐店，我们可以点餐取消餐，但是我们并不用关心厨师是谁，怎么做。

    var makeCommand=function(receiver,state){
                return function(argument){
                    receiver[state]();//调用方法
                }
            }
            var Ryn={  //对象上面的三个属性
                attack:function(){
                    console.log('攻击')
                },
                defense:function(){
                    console.log('防御');
                },
                crouch:function(){
                    console.log('蹲下');
                }
            }
            var command=makeCommand(Ryn,'attack');
            command();//攻击

发布订阅模式

　　发布订阅模式又称观察者模式，它定义对象间的一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。现实生活中，

如我们去售楼中心，服务人员A接待了我们，然后再有客户找到A，这个时候暂时没房了，等到有房的时候不可能服务人员A挨个打电话通知，而是订阅A的

公共服务提醒。

　　　　　　(function($){
                var o = $({});
                $.subscribe=function(){
                    o.on.apply(o,arguments);
                }
                $.unsubscribe=function(){
                    o.off.apply(o,arguments);
                }
                $.publish=function(){
                    o.trigger.apply(o,arguments);
                }
            })(jQuery)

职责链模式

使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系，将这些关系连成一条链，并沿着这条链传递该请求，直到一个对象处理它为止。

现实生活中，如我们坐公交车人太多，我们把公交卡交给售票员，让前面的人不停的往前递，直到售票员刷卡结束。

　　　　var fn1=function(data){
                if(data==1){
                    console.log('fn1->'+data);
                }else{
                    return 'next';
                }
            }
            var fn2=function(data){
                    console.log('fn2->'+data);
                    return 'next';
            }
            var fn3=function(data){
                    console.log('fn3->'+data);
                    console.log('done');
            }
            Function.prototype.after=function(fn){
                var self=this;
                return function(){
                    var ret=self.apply(this,arguments);// 当前函数本身
                    if(ret=='next'){
                        return fn.apply(this,arguments); //fn下一个要直执行的函数
                    }
                    return ret;
                }
            }
            var order=fn1.after(fn2).after(fn3);
            order(3);

今天的文章js的设计模式_前端数据加密的三种方式分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/46947.html

js的设计模式_前端数据加密的三种方式

相关推荐

发表回复