设计模式

最新推荐文章于 2024-07-17 09:44:02 发布

奈何故里无故人

最新推荐文章于 2024-07-17 09:44:02 发布

阅读量80

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46910841/article/details/107166123

版权

1、单例模式

一个类提供一个实例，并且暴露出一个全局访问点也就是闭包

案列：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function ts(name){
        this.name=name;
    }
    //给上面的方法添加原型属性或方法
    ts.prototype.getName=function(){
        return this.name;
    };
    //自执行  执行函数  返回闭包的对象
    /*
     * 这个就是一个单例方法
     * */
    var object=(function(){
        var instance = null;
        return function (name) {
            if (!instance) {
                instance = new ts(name);
            }
            //该函数的返回值对象   返回一个单独的对象
            return instance;
        }
    })();
    //调用单例模式
    console.log(object("张三").getName());//张三
    console.log(object("李四").getName());//张三
    console.log(object("王麻子").getName());//张三
</script>
</body>
</html>

结果：

设置多个类对象将单例的方法抽象为一个共享方法

callback为回调函数，这个共享方法不适用自执行

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function ts(name){
        this.name=name;
    }
    //给上面的方法添加原型属性或方法
    ts.prototype.getName=function(){
        return this.name;
    };
    var getInstance = function (callback) {
        var instance = null;
        return function () {
            if (!instance) {
                //实例化对象
                //apply  替换函数内部的this指针  执行前面的函数
                //this   指向window  可以可不写
                //console.log(this);
                instance = callback.apply(null, arguments);
            }
            return instance;
        }
    };

    console.log(getInstance(function () {
        console.log(arguments);
        var per = new ts("李四");
        return per;
    })().getName());
    console.log(getInstance(function () {
        var per = new ts("王麻子");
        return per;
    })().getName());


    function animale(name,age){
        this.name=name;
        this.age=age;
    }
    animale.prototype.getName=function (){
        return this.name;
    };

    console.log(getInstance(function () {
        var name = arguments[0];
        var age = arguments[1];
        var dog = new animale(name, age);
        return dog;
    })("小狗", 2).getName());
</script>
</body>
</html>

2、策略模式

将算法和算法的使用分离开来

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var level = {
        S: 8,
        A: 6,
        B: 5,
        C: 3,
        D: 1
    };

    //策略的使用
    var levelScore = {
        base: 60,
        S: function () {
            return this.base + level["S"];
        },
        A: function () {
            return this.base + level["A"];
        },
        B: function () {
            return this.base + level["B"];
        },
        C: function () {
            return this.base + level["C"];
        },
        D: function () {
            return this.base + level["D"];
        }
    };
    //计算得分情况
    function getScore(score, levela) {
        levelScore.base = score;
        return levelScore[levela]();
    }
    console.log(getScore(90, "S"));
    console.log(getScore(80, "A"));
    console.log(getScore(70, "B"));
    console.log(getScore(60, "C"));
    console.log(getScore(50, "D"));
</script>
</body>
</html>

结果：

3、使用策略模式写表单验证

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //错误信息提示
    var errormessage={
        format:"输入格式不正确!",
        minlength:"输入过短!",
        number:"输入数字!",
        empty:"输入不能为空!",
        maxlength:"输入过长!"
    };
    //策略集
    var rule={
        format:function(value,error){
            if(!/^\w+$/.test(value)){
                return error||errormessage["format"];
            }
        },
        minlength:function(value,length,error){
            if(value.length<length){
                return error||errormessage["minlength"];
            }
        },
        number:function(value,error) {
            if (!/^\d+$/.test(value)) {
                return error || errormessage["number"];
            }
        },
        empty:function(value,error){
            if(value ==""){
                return error|| errormessage["empty"];
            }
        },
        maxlength:function(value,length,error){
            if(value.length>length){
                return error||errormessage["maxlength"];
            }
        }
    };
    //写一个验证类
    function storage(){
        this.item=[];//存储验证的函数
    }
    storage.prototype={
        constructor:storage,
        add:function(value,rules,error){
            var arg=[value];

            //找是否有：
            if(rules.indexOf(":")!==-1){
                var arr=rules.split(":");//以冒号截断
                arg.push(arr[1]);
                rules=arr[0];
            }
            arg.push(error);
            //开始验证
            this.item.push(function () {
                return rule[rules].apply(this, arg);
            });
        },
        start: function () {
            for (var i = 0; i < this.item.length; i++) {
                var error = this.item[i]();
                if (error) {
                    console.log(error);
                }
            }
        }
    };
    //实例化验证的对象
    //添加验证规则
    var ts = new storage();
    ts.add("1234", "minlength:5", "长度不小于5位！");
    ts.add("1234567891011", "maxlength:10", "长度在5-10位之间！");
    ts.add("", "empty", "输入的值不能为空！");
    ts.add("abc1245", "number", "输入的值必须为数字！");
    ts.add("abc1245as+", "format", "输入的格式必须为数字、字母、下划线！");
    ts.start();



</script>
</body>
</html>

结果：

4、订阅模式

观察者模式原生js里面的事件就是订阅模式

观察者

1、集合存储订阅（就是一个人订阅一个或者订阅多个）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var observer = {
        subscribes: [],//订阅集合
        //订阅的方法
        subscribe: function (types, fn) {
            //检测types有没有订阅
            if (!this.subscribes[types]) {
                //创建订阅
                this.subscribes[types] = [];
            }
            //处理订阅的fn
            /*if(typeof fn=="function")
             {
             this.subscribes[types].push(fn);
             }*/
            typeof fn == "function" && this.subscribes[types].push(fn);
        },
        //执行订阅
        publish: function () {
            //检测当前的订阅是否存在
            var types = [].shift.call(arguments);//获取订阅着
            var fns = this.subscribes[types];
            //var name = [].shift.call(arguments).name;//获取订阅函数名称
            if (!fns || fns.length == 0) {
                return;
            }
            //开始执行
            var args = arguments;
            fns.forEach(function (handle) {
                console.log(handle.name);
                //handle.name  获取当前函数名称
                /* handle.name == name &&*/ handle.apply(this, args);
            });
            /*  for (var i = 0; i < fns.length; i++) {
             fns[i].apply(this, arguments);
             }*/
        },
        //删除订阅
        remove: function (types, fn) {
            //检测types  不存在  直接全部订阅移除
            if (!types) {
                this.subscribes = [];
                return;
            }
            //获取当前的订阅集合
            var fns = this.subscribes[types];

            if (!fns || fns.length == 0) {
                return;
            }
            //检测fn
            if (typeof  fn !== "function") {
                return;
            }
            //删除订阅
            fns.forEach(function (handle, index) {
                if (handle == fn) {
                    fns.splice(index, 1);
                }
            });
        }
    };

    /*
     * 模拟  maodou  定飞机票   火车票
     * */
    function getPiao(res) {
        console.log("订购:", res);
    }
    function getHose(res) {
        console.log("订：", res, "酒店");
    }
    observer.subscribe("maodou", getPiao);
    observer.subscribe("maodou", getHose);
    observer.subscribe("maodou", function () {
        console.log("先去吃饭！");
    });

    console.log(observer.subscribes);

    //执行订阅
    observer.publish("maodou", ["飞机票", "火车票"]);
    observer.publish("maodou", "速8");

    observer.remove("maodou", getHose);
    console.log(observer.subscribes);
</script>
</body>
</html>

结果：

2、代练代打案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    /*
     * 订阅模式
     * */
    function Observer(name, level) {
        this.name = name;
        this.level = level;
        this.list = [];//订阅集合
    }
    //使用原型方法
    Observer.prototype.subscribe = function (target,fn) {
        //直接订阅
        target.list.push(fn);
    };
    //执行订阅
    Observer.prototype.publish = function (money) {
        this.list.forEach(function (handle) {
            handle.call(this, money);
        });
    };

    //实例化猎人
    var per1=new Observer("小蓝","白金");
    var per2=new Observer("小白","黄金");
    var per3=new Observer("小黑","王者");
    var per4=new Observer("小黄","青铜");//这个打一个怪  打不过  悬赏200金  找人打

    //订阅任务
    per1.subscribe(per4,function (money){
        console.log("小蓝"+(money>200?"愿意接单！":"不愿接单！"));
    });
    per2.subscribe(per4,function (money){
        console.log("小白"+(money>100?"愿意接单！":"不愿接单！"));
    });
    per3.subscribe(per4,function (money){
        console.log("小黑"+(money>300?"愿意接单！":"不愿接单！"));
    });

    console.log(per4.list);

    //执行订阅
    per4.publish(200);


</script>
</body>
</html>

结果：

简单的发布订阅：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    /*
     * 事件
     * */
    var ts = {
        kobe: [],
        //订阅
        addEventListener: function (type, callback) {
            if (!this.kobe[type]) {
                this.kobe[type] = [];
            }
            typeof  callback == "function" && this.kobe[type].push(callback);
        },
        //执行
        click: function () {
            var fns = this.kobe["click"];
            for (var i = 0; i < fns.length; i++) {
                fns[i]();
            }
        }
    };

    ts.addEventListener("click",function (){
        console.log("ts 的单机事件");
    });
    ts.addEventListener("click",function (){
        console.log("ts 的单机事件1");
    });
    ts.click();
</script>
</body>
</html>

结果：

简单的拷贝继承

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    /*
     * 父类
     * */
    function Person(){
        this.name="张三";
        this.age=18;
    }
    Person.prototype={
        constructor:Person,
        sleep:function (){
            return "睡觉"
        }
    };


    /*
     * 子类
     * */
    function Child(){
        this.age=20;
        //复制  不能拷贝到你的构造上面
    }
    Child.prototype={
        constructor:Child,
        eat:function (){
            return "吃饭";
        }
    };

    var c=new Child();
    console.log(c instanceof  Child);
    console.log(c instanceof  Person);

    console.log(c);

</script>
</body>
</html>

结果：

奈何故里无故人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设计模式

1、单例模式一个类提供一个实例，并且暴露出一个全局访问点也就是闭包案列：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> function ts(name){ this.name=name;
复制链接

扫一扫