js设计模式---工厂模式

Posted 2020-10-12 雨中伞

感觉是个老生常谈的问题，

我这里写这篇文章是为了记录一下我学习设计模式中的一点内容，之前写的最多的是入门操作之类的，今天突然想写点理论上的东西。

问：为什么会有设计模式？

答：回答这个问题之前要先了解什么是设计模式（Design pattern）---设计模式是一套被反复使用、多人知晓的、经过分类编目的、代码设计经验的总结。

我们学习设计模式其实是为了写出复用性、可读性、可靠性都高的代码，同时也是为了看懂别人的代码。设计模式也是软件工程的基石。

设计模式很多种我现在讲讲我们常用的几种吧

1、工厂模式

一、工厂模式

　　定义：一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。{ 简单的来说就是轮胎厂生产什么类型的轮胎让，下游产业（自行车厂、汽车厂）告诉他是生产什么类型的轮胎 }

　　讲解：假如我们需要插入一个元素，但是这个元素个类型不固定，可能是图片、链接、文本。用工厂模式的方式来定义，我们需要定义一个工厂类和对应类型元素的子类。

var node = {}
node.createNode = {}

//创建图片的第一个子类
node.createNode.Image = function(){
    this.appendTo = function(parentNode){
        var im = document.createElement(‘img‘);
        parentNode.appendChild(im)
    }
}
//创建图片的第一个子类
node.createNode.Text = function(){
    this.appendTo = function(parentNode){
        var text = document.createTextNode();
        parentNode.appendChild(text)
    }
}
//创建图片的第一个子类
node.createNode.Link = function(){
    this.appendTo = function(parentNode){
        var link = document.createElement(‘a‘);
        parentNode.appendChild(link)
    }
}

//工厂类
var createNodeByFactory = function(nodeType){
    return new node.createNode[nodeType]
}

var dom = createNodeByFactory(‘Image‘)
dom.appendTo(‘父元素‘)