资讯专栏INFORMATION COLUMN

前端设计模式

jackzou / 3095人阅读

摘要:当一个对象的改变需要同时改变其他对象,而且他不知道具体有多少对象需要改变时,此时建议使用订阅发布模式。指定发布者,类似于一个对象表示事件的名称,是一个数组发布消息后,遍历的数组,依次执行订阅者的回调函数。

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是浏览器的窗口变量名,已存在于浏览器内部。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101591.html

相关文章

  • JavaScript系列(四) - 收藏集 - 掘金

    摘要:函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言 面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言,然而,近几年,函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此,...

    cfanr 评论0 收藏0
  • JavaScript - 收藏集 - 掘金

    摘要:插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins译者:jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

    izhuhaodev 评论0 收藏0
  • 前端框架模式的变迁

    摘要:现在在前端的框架都是的模式,还有像和之类的变种独特的单向数据流框架。只要将数据流进行规范,那么原来的模式还是大有可为的。我们可以来看一下,框架的图示从图中,我们可以看到形成了一条到,再到,之后是的,一条单向数据流。 前言 前端框架的变迁,体系架构的完善,使得我们只知道框架,却不明白它背后的道理。我们应该抱着一颗好奇心,在探索框架模式的变迁过程中,体会前人的一些理解和思考 本篇将讲述的是...

    ssshooter 评论0 收藏0
  • 前端开发者手册2019

    摘要:年,和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后,前端开发者可以从浏览器开发中学习到,编写代码不需要考虑浏览器引擎的限制。 前端开发者手册2019 Cody Lindley 编著 原文地址 本手册由Frontend Masters赞助,通过深入现代化的前端工程课程来提高你的技能。 下载:PDF ...

    church 评论0 收藏0
  • 前端开发者手册2019

    摘要:年,和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后,前端开发者可以从浏览器开发中学习到,编写代码不需要考虑浏览器引擎的限制。 前端开发者手册2019 Cody Lindley 编著 原文地址 本手册由Frontend Masters赞助,通过深入现代化的前端工程课程来提高你的技能。 下载:PDF ...

    xiao7cn 评论0 收藏0
  • 前端开发者手册2019

    摘要:年,和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后,前端开发者可以从浏览器开发中学习到,编写代码不需要考虑浏览器引擎的限制。 前端开发者手册2019 Cody Lindley 编著 原文地址 本手册由Frontend Masters赞助,通过深入现代化的前端工程课程来提高你的技能。 下载:PDF ...

    邹立鹏 评论0 收藏0

发表评论

0条评论

jackzou

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<