高级任务6---前端设计模式

1、写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。

构造函数模式

<script type="text/javascript">
    function Person(name,age) {
        this.name=name;
        this.age=age;
    }
    Person.prototype.sayName=function () {
        console.log(this.name);
    }
    var person1=new Person("Lucy",23);
    person1.sayName();
</script>

混合模式

<script type="text/javascript">
    function inherit(parent,sun) {
        sun.prototype=Object.create(parent.prototype);
        sun.prototype.constructor=sun;
    }
    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;
    }
    inherit(Person,Student);
    Student.prototype.sayScore=function () {
        console.log(this.score);
    }
    var student1=new Student("lucy",24,100);
    student1.sayScore();
    student1.sayName();
</script>

模块模式

<script type="text/javascript">
    var person=(function () {
        var name="lucy",
            age=23;
        function sayName() {
            console.log(name);
        }
        return{
            name:name,
            age:age,
            sayName:sayName
        }
    })();
    person.sayName();
</script>

工厂模式

<script type="text/javascript">
    // 缺点：无法知道实例是由哪个构造函数创建的
    function Person(name,age) {
        var temp={};
        temp.name=name;
        temp.age=age;
        temp.sayName=function () {
            console.log(this.name);
        }
        return temp;
    }
    var person1=Person("Lucy",23);
    person1.sayName();
</script>

单例模式

<script type="text/javascript">
    var Person=(function () {
        var temp;
        function init(name,age) {
            return {
                name:name,
                age:age,
                sayName:function () {
                    console.log(this.name);
                }
            }
        }
        return {
            createPerson:function (name,age) {
                if(!temp){
                    temp=init(name,age);
                }
                return temp;
            }
        }
    }());
    var person1=Person.createPerson("lucy",23);
    var person2=Person.createPerson("lily",24);
</script>

发布订阅模式

<script type="text/javascript">
    var EventCenter=(function () {
        var events={};
        function on(evt,handler) {
            events[evt]=events[evt]||[];
            events[evt].push({
                handler:handler
            })
        }
        function off(evt) {
            delete events[evt];
        }
        function fire(evt,args) {
            if(!events[evt]){
                return;
            }
            for(var i=0;i<events[evt].length;i++){
                events[evt][i].handler(args);
            }
        }
        return {
            on:on,
            off:off,
            fire:fire
        }
    })();
    EventCenter.on('change', function(val){
        console.log('change...  now val is ' + val);
    });
    EventCenter.fire('change', '饥人谷'); //change...  now val is 饥人谷
    EventCenter.off('change');

2、使用发布订阅模式写一个事件管理器，可以实现如下方式调用

Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饥人谷');
Event.off('changer');

代码：

<script type="text/javascript">
    var EventCenter=(function () {
        var events={};
        function on(evt,handler) {
            events[evt]=events[evt]||[];
            events[evt].push({
                handler:handler
            })
        }
        function off(evt) {
            delete events[evt];
        }
        function fire(evt,args) {
            if(!events[evt]){
                return;
            }
            for(var i=0;i<events[evt].length;i++){
                events[evt][i].handler(args);
            }
        }
        return {
            on:on,
            off:off,
            fire:fire
        }
    })();
    EventCenter.on('change', function(val){
        console.log('change...  now val is ' + val);
    });
    EventCenter.fire('change', '饥人谷'); //change...  now val is 饥人谷
    EventCenter.off('change');