JavaScript之模式

JS中有许多种模式,被用来解决不同的问题,下面就总结一下。

一、工厂模式
工厂模式用来实例化对象和返回对象,它可以解决创建多个对象的问题,但是所创建的对象类型都一致,没办法区分对象的类型。
操作实例:

 function Factory(n,s){
        //创建一个对象
        var obj={};
        obj.name=n;
        obj.sex=s;
        obj.sleep=function (){
            return this.name+"睡觉";
        }
        return obj;
    }

    console.log(Factory("李四", "男"));
    console.log(Factory("张三", "男"));

二、构造函数模式
构造函数模式:直接定义函数、this(指针), 指向当前实例的对象
里面的方法和属性直接写 this.***,没有明显的创建对象 ,没有返回值
操作实例:

function Page(){
        this.nowpage=1;
        this.totlepage=20;
        this.data=null;
        this.createpageLi=function (){
            console.log("构造函数模式的方法");
        }
    }

    //实例化对象
    var page=new Page();
    //直接调用方法

三、原型模式
原型模式中原型对象上所有的属性和方法共享。
操作实例:

function Person() {

    }
    //原型独享的属性和方法的
    Person.prototype = {
        name: "",
        sex: "",
        sleep: function (m) {
            return this.name + "睡觉" + m;
        }
    }
    var per1 = new Person();
    per1.name = "张三";
    per1.sex = "男";
    console.log(per1);
    console.log(per1.sleep("打呼噜"));
    var per2 = new Person();
    per2.name = "李四";
    per2.sex = "男";
    console.log(per2);
    console.log(per2.sleep("不踏实"));

四、单例模式
“单”指的是返回一个对象,一个功能就是一个单体。
一个类仅提供一个实例,并且暴露出一个全局访问点。
操作实例:

var getObject = (function () {
     var instance = null;
     return function (info) {
     if (!instance) {
     instance = new Person(info);
     }
     return instance;
     }
     //返回一个单独的对象
     })();
     //调用单例模式
     console.log(getObject("张三").getName());//张三
     console.log(getObject("李四").getName());//张三
     console.log(getObject("王五").getName());//张三

五、策略模式
策略模式是将算法和 算法的使用分离。
操作实例:

//按照分数增加比重   70    sabcd
    //策略
    var levelable={
        S:8,
        A:6,
        B:4,
        C:2,
        D:0
    }
    //策略使用   策略集合
    var levelScore={
        baseScore:70,
        S:function (){

            return this.baseScore+levelable["S"];
        },
        A:function (){
            return this.baseScore+levelable["A"];
        },
        B:function (){
            return this.baseScore+levelable["B"];
        },
        C:function (){
            return this.baseScore+levelable["C"];
        },
        D:function (){
            return this.baseScore+levelable["D"];
        }
    }
    //得分情况
    function getScore(score,level)
    {   levelScore.baseScore=score;
        console.log(levelScore[level]());
    }

    getScore(60,"S");
    getScore(80,"A");
    getScore(70,"B");
    getScore(50,"C");
    getScore(90,"D");

六、观察者模式/订阅模式
这是原生JS里面的一个事件(最简单的订阅模式)。
操作实例:

var observer = {
        subscribes: [],//订阅集合
        //订阅
        subscribe: function (types, fn) {
            //检测有没有订阅过
            if (!this.subscribes[types]) {
                //添加订阅
                this.subscribes[types] = [];
            }
            //处理订阅fn
            typeof fn == "function" && this.subscribes[types].push(fn);//简写
            console.log(this.subscribes);
        },
        //发布信息
        publish: function () {
            var types =[].shift.call(arguments),//获取订阅者
                    fns = this.subscribes[types];
            //检测是否存在订阅
            if (!fns || fns.length == 0) {
                return;
            }
            //发布信息
            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) {
                fns.length = 0;
                return;
            }
            //检测fn
            if (typeof fn !== "function") {
                return;
            }
            //删除订阅的函数
            for (var i = 0; i < fns.length; i++) {
                if (fns[i] === fn) {
                    fns.splice(i, 1);
                }
            }
        }

    }

    // 订阅岗位列表
    function jobListForA(jobs) {
        console.log('A类工作', jobs);
    }
    function jobListForB(jobs) {
        console.log('B类工作', jobs);
    }

    //订阅上面的岗位列表方法
    observer.subscribe("maodou", jobListForA);
    observer.subscribe("maodou", jobListForB);

    //订阅自定义的函数
    observer.subscribe("personA", function (score) {
        console.log("成绩:" + score);
    });

    observer.subscribe("personB", function () {
        //获取当前时间
        console.log(new Date().toLocaleString());
    });


    //发布消息调用
    observer.publish("maodou", ["Java", "Web"]);
    observer.publish("personA", 100);

    //删除订阅
    observer.remove("maodou", jobListForB);

    observer.publish("maodou", ["Java", "Web"]);
    observer.publish("personB");

七、总结
灵活运用JS里面的这几种模式,可以使代码更加的精炼。

发布了29 篇原创文章 · 获赞 1 · 访问量 563

猜你喜欢

转载自blog.csdn.net/Always_Love/article/details/104962427