前端设计模式

绝地灬酷狼 2022-03-19 14:26 218阅读 0赞

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

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

模块模式代码：

**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如下：

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

来源：[https://segmentfault.com/a/1190000018127390][https_segmentfault.com_a_1190000018127390]

[https_segmentfault.com_a_1190000018127390]: https://segmentfault.com/a/1190000018127390