美文网首页
前端设计模式

前端设计模式

作者: saintkl | 来源:发表于2017-08-29 09:00 被阅读0次
    1. 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
    //构造函数模式:new一个实例
      function Person(name, age) {
          this.name=name;
          this.age=age;
      }
     Person.prototype.sayName= function () {
        console.log(this.name)
      };
     var person1 = new Person("lisa",30);
    
    //混合模式
        function Person(name, age) {
            this.name=name;
            this.age=age;
        }
        Person.prototype.sayName= function () {
            console.log(this.name)
        };
        function Student(name,age,score) {
            Person.call(this,name,age);
            this.score=score;
        }
        Student.prototype=Object.create(Person.prototype);
        Student.prototype.sayScore = function () {
            console.log(this.score)
        }
        var stuent1= new Student("andy","12","100");
    
        //模块模式:通过闭包实现一个模块
        var Person = (function () {
            var name = "ruoyu";
            function sayName() {
                console.log(this.name)
            }
            return {
                name:name,
                sayName:sayName
            }
        })();
        Person.sayName();
    
    //工厂模式:每次返回一个对象;
    function CreatePerson(name) {
            var person={
                name:name,
                sayName:function () {
                    console.log(this.name)
                }
            };
            return person;
        }
    CreatePerson("ruoyu").sayName();
    
    //单例模式:应用场景=》弹窗
        Person = (function() {
            var instance;
            function init(name) {
                return {name:name}
            }
        return {
            createPerson:function (name) {
                if(!instance){
                    instance =  init(name);
                }
                return instance
            }
        }
    
        })();
        Person.createPerson("andy");//{name: "andy"}
        Person.createPerson("lili");//{name: "andy"}
    
    //发布订阅模式
        var EventCenter = (function () {
            var events={};
            function on(evt,handler) {
                events[evt] =   events[evt] || [];
                events[evt].push({
                    handler:handler
                });
            }
            function fire(evt,args) {
                if(!events[evt]){
                    return
                }
                for(var i =0 ; i<events[evt].length;i++){
                    events[evt][i].handler(args);
                }
            }
            function off(name) {
               delete events[name]
            }
            return {
                on:on,
                fire:fire,
                off:off
            }
        })();
        EventCenter.on("hello",function (name) {
           alert(name)
        });
        EventCenter.fire("hello","456");//alert=>456
        EventCenter.fire("hello","123");//alert=>123
        EventCenter.off("hello");//解除事件
        EventCenter.fire("hello","123");//没有弹框
    
    1. 使用发布订阅模式写一个事件管理器,可以实现如下方式调用
    Event.on('change', function(val){
        console.log('change...  now val is ' + val);  
    });
    Event.fire('change', '饥人谷');
    Event.off('changer');
    
    var Event = (function () {
            var events={};
            function on(evt,handler) {
                events[evt] =   events[evt] || [];
                events[evt].push({
                    handler:handler
                });
            }
            function fire(evt,args) {
                if(!events[evt]){
                    return
                }
                for(var i =0 ; i<events[evt].length;i++){
                    events[evt][i].handler(args);
                }
            }
            function off(name) {
               delete events[name]
            }
            return {
                on:on,
                fire:fire,
                off:off
            }
        })();
        Event.on('change', function(val){
            console.log('change...  now val is ' + val);
        });
        Event.fire('change', '饥人谷'); //change...  now val is 饥人谷
        Event.off('change');//移除事件
    
    

    相关文章

      网友评论

          本文标题:前端设计模式

          本文链接:https://www.haomeiwen.com/subject/uvhgdxtx.html