博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端设计模式
阅读量:6704 次
发布时间:2019-06-25

本文共 4664 字,大约阅读时间需要 15 分钟。

1、模块模式

在立即执行函数表达式中定义的变量和方法,在该函数外部是访问不到的,只能通过该函数提供的接口,"有限制的"进行访问;通过函数的作用域,解决了属性和方法的封装问题。
最常见的立即执行函数写法有以下两种:

(function(){ /* code */ }())或者(function(){ /* code */ })()

模块模式代码:

let Person = (function(){        var age = "12";        var name = "jerry";        function getAge(){            return age;        }        function getName(){            return name;        }        return {            getAge: getAge,            getName: getName        }    })()    console.log(age, 'age'); // 报错: Uncaught ReferenceError: age is not defined    console.log(name, 'name'); // 空字符串,为啥不报错?看底部备注    console.log(Person.age); // undefined    console.log(Person.name); // undefined    // 只能通过Person提供的接口访问相应的变量    console.log(Person.getName()); // jerry    console.log(Person.getAge()); // 12

2、构造函数模式

function Person(name,age){        this.name = name;        this.age = age;    }    Person.prototype.printName = function(){        console.log(this.name)    }    Person.prototype.printAge = function(){        console.log(this.age)    }    function Student(name,age){        // 继承 Person 的属性        Person.call(this,name,age)    }    function create(prototype){        function F(){}        F.prototype = prototype        return new F()    }    // 让Student的原型指向一个对象,该对象的原型指向了Person.prototype,通过这种方式继承 Person 的方法    Student.prototype = create(Person.prototype)    Student.prototype.printAge = function(){        console.log(this.age)    }    let student = new Student('jerry',12)    student.printName() // "jerry"    student.printAge() // "12"

3、混合模式

function Person(name,age){        this.name = name        this.age = age    }    Person.prototype.printName = function(){        console.log(this.name)    }    function Student(name,age){        // 继承 Person 的属性        Person.call(this, name, age)    }    function create(prototype){        function F(){}        F.prototype = prototype        return new F()    }    // 让Student的原型指向一个对象,该对象的原型指向了Person.prototype,通过这种方式继承 Person 的方法    Student.prototype = create(Person.prototype)    Student.prototype.printAge = function(){        console.log(this.age)    }    let student = new Student('jerry', 12)    student.printName() // "jerry"    student.printAge() // 12

4、工厂模式

function Person(name, age){        let person = new Object()        person.name = name        person.age = age        person.printName = function(){            console.log(this.name)        }        person.printAge = function(){            console.log(this.age)        }        return person    }    let person = Person('jerry',12)    person.printName()    person.printAge()

5、单例模式

let Singleton = (function(){        let instantiated        function init(){            /*定义单例代码*/            return{                publicMethod: function(){                    console.log("Hello World");                },                publicProperty: "Test"            }        }        return{            getInstance: function(){                if(!instantiated){                    instantiated = init()                }                return instantiated            }        }    }())    Singleton.getInstance().publicMethod()

单例之间的通讯:

建立两个独立的对象:jim&&lily,两者之间通过door直接通讯,如果没有新建door,有直接通讯。代码如下:

let jim = (function(argument){        let door        let jimHome = function(msg){            this.doorbell = msg        }        let info = {            sendMessage: function(msg){                if(!door){                    door = new jimHome(msg)                }                return door            },            coming: function(){                return "來了來了"            }        }        return info    }())    let lily = {        callJim: function(msg){            let _xw = jim.sendMessage(msg)            alert(_xw.doorbell)            console.log(_xw.doorbell)            _xw = null // 等待垃圾回收            let coming = jim.coming()            console.log(coming)        }    }    lily.callJim("叮咙")

6、发布-订阅模式

订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身主题变化时,会通知所有订阅者对象,使他们能够自动更新自己的状态。
将一个系统分割成一系列相互协作的类有一个很不好的副作用:需要维护相应对象间的一致性,这样会给维护、扩展和重用都带来不便。当一个对象的改变需要同时改变其他对象,而且他不知道具体有多少对象需要改变时,此时建议使用订阅发布模式。
应用场景:
DOM事件。DOM事件是一种典型的发布-订阅模式,对一个DOM节点的DOM事件进行监听;当操作DOM节点时,触发相应的事件并执行函数。
自定义时间。指定发布者,类似于一个对象(key:value);key表示事件的名称,value是一个数组;发布消息后,遍历value的数组,依次执行订阅者的回调函数。
应用Demo如下:

let 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

备注:console.log(name, 'name')没有报错,是因为name是浏览器的窗口变量名,已存在于浏览器内部。

转载地址:http://bbblo.baihongyu.com/

你可能感兴趣的文章
bat 文件清楚当前目录下的所有目录及文件
查看>>
iOS 关闭键盘
查看>>
设非主键为聚集索引
查看>>
SQL 将一个字段内用逗号分隔的内容分成多条记录
查看>>
lucene 使用教程<转>
查看>>
邮件服务器脱离域灾难恢复
查看>>
关于C++ const 的全面总结
查看>>
IoC容器Autofac(3) - 理解Autofac原理,我实现的部分Autofac功能(附源码)
查看>>
vmware复制fedora16出现网络启动错误
查看>>
Python错误: SyntaxError: Non-ASCII character
查看>>
modern.IE – 微软发布的 IE 兼容性测试工具和资源
查看>>
部分博文目录索引
查看>>
Debian镜像使用帮助
查看>>
忘记Oracle数据库管理员密码的解决办法
查看>>
linux下mysql的卸载、安装全过程
查看>>
路径原因[置顶] Android导入项目后报错红色的感叹号或者重新启动eclipse也报红色的感叹号...
查看>>
查找关键字算法:静态查找表(Static Search Table)
查看>>
指针常量C语言关键字const再理解
查看>>
使用mencoder转换flv为ipad/iphone下能播放的mp4格式
查看>>
Quartz学习详解
查看>>