js中的几种设计模式

来源：互联网发布：用excel做统计图的数据编辑：程序博客网时间：2024/06/03 22:07

设计者模式

1.特点

提高代码的重用性，可读性，使代码更容易的维护和扩展

2.原则

设计模式有六大原则：
开闭原则。就是说模块应对扩展开放，而对修改关闭。
里氏代换原则。如果调用的是父类的话，那么换成子类也完全可以运行。
依赖倒转原则。把父类都替换成它的子类，程序的行为没有变化。
接口隔离原则，每一个接口应该是一种角色，不多不少，不干不该干的事，该干的事都要干。
单一职责原则。
迪米特法则。最少知识原则。

3.单例设计模式

定义:保证一个类仅有一个实例,并提供一个访问它全局的点

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../my_ajax.js"></script></head><body><form action="">    <input type="text" name="user">    <input type="password" name="pwd">    <input type="submit" value="登录"></form><script type="text/javascript">    var submitObj = {        form : document.forms[0],        submitUrl : "data2.php",        _init : function () {            this.handSubmit();        },        handSubmit : function () {            var that = this;            this.form.onsubmit = function (e) {                e.preventDefault();         //阻止表单提交默认行为                if(!that.checkForm()) return;                that.ajaxSubmit();            }        },        checkForm : function () {            return true;     //可使用正则表达式验证        },        ajaxSubmit : function () {            my_ajax.post(this.submitUrl,new FormData(this.form),this.submitResult)        },        submitResult : function (result) {            console.log(result);        }    }    submitObj._init();</script></body></html>

4.适配器模式

定义:适配器模式（Adapter）是将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类（对象）可以一些工作。俗称包装器（wrapper）。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../my_ajax.js"></script></head><body><p id="p1"></p><p id="p2"></p><script type="text/javascript">    //适配器模式:在不修改旧的模式的前提下,来适应新的变化    my_ajax.get("data3.json",function (result) {        showMsg(JSON.parse(result),p1);    })    my_ajax.get("data4.json",function (result) {        showMsgAdapter(JSON.parse(result),p2);    })    function showMsg(obj,p) {        p.innerHTML = obj.name;    }    function showMsgAdapter(arr,p) {        showMsg(arr[0],p2);    }</script></body></html>

5.观察者模式

定义:观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><button id="btn1">发布信息</button><button id="btn2">删除订阅者</button><script>    var publisher = {        //注册订阅者信息        register: function (event, subscriber) {    //event为publisher的一个属性            //判断subscriber是否是函数            if (typeof subscriber != "function")  return;            //判断指定事件是否存在            if (!this[event]) this[event] = [];            this[event].push(subscriber);     //存储订阅者的信息函数        },        //向订阅者发送消息        publish: function (event, msg) {            if (!this[event])  return;   //判断指定事件是否存在            for (var sub of this[event]) {                sub(msg);            }        },        //删除订阅者        remove: function (event, sub) {            if (!this[event] || this[event].indexOf(sub) == -1)   return;            this[event].splice(this[event].indexOf(sub), 1);        }    }    //向订阅者发布信息,订阅者使用函数充当    var f = function (msg) {        console.log("第一条消息是" + msg);    }    publisher.register("500", f);    publisher.register("600", function (msg) {        console.log("第二条消息是" + msg);    })    publisher.register("500", function (msg) {        console.log("第三条消息是" + msg);    })    publisher.register("700", function (msg) {        console.log("第四条消息是" + msg);    })    btn1.onclick = function () {        publisher.publish("500", "最新消息500");//        publisher.publish("700","最新消息700");    }    btn2.onclick = function () {        publisher.remove("500", f);    }</script></body></html>

利用观察者模式定义三次点击事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><button id="btn1">按钮一</button><button id="btn2">按钮二</button><script type="text/javascript">    //给button的原型添加方法    HTMLButtonElement.prototype.addMyEventListener = function (event,f) {        if(!this[event])   this[event] = [];        this[event].push(f);        this.times = [];        //设置鼠标点击的监听事件        this.addEventListener("mousedown",function handleClick() {            //点击事件间隔很长的时候            if(this.times.length == 3){                // [100, 200, 300]                this.times.shift();            }            this.times.push(new Date().getTime());            //当三次点击间隔很短的时候            if(this.times.length == 3){                if(this.times[2] - this.times[0]<500){                this.times.length = 0;   //清空时间数组                    for (var tc of this.three){                        tc();           //调用函数,即f                    }                }            }        })    }    btn1.addMyEventListener("three",function (){        console.log("你点击了按钮一共三次");    })    btn2.addMyEventListener("three",function (){        console.log("你点击了按钮二共三次");    })</script></body></html>

阅读全文

0 0