好文推薦

localStorage的別樣用法
借助npm包統(tǒng)一包管理器

角色分類

在js版本的訪問者模式中孝扛，我們將角色分為了訪問者、元素和集合矛市，實際上宣增，完整的角色分類應(yīng)該類似下面這樣：

1-VIsitor：抽象的訪問者，定義了對Element的訪問行為
2-ConcreteVisitor：具體的訪問者封断，定義了對Elemeny的具體的訪問行為
3-Element：抽象的元素類斯辰，它包含一個accept方法，表示可被訪問者訪問
4-ConcreteElement：具體的元素類坡疼，定義accept的具體實現(xiàn)
5-ObjectStructure：集合類（對象結(jié)構(gòu)類）彬呻，用于迭代元素并進(jìn)行訪問者訪問

需求說明

寫一段轉(zhuǎn)換代碼，將對象轉(zhuǎn)換為對應(yīng)的html代碼

{
  type:string,//對應(yīng)html中的標(biāo)簽名稱
  data:{
    [other:string]:any
  }
}

角色定義

• 抽象訪問者

abstract class V{
  abstract visitorPElement(e:PElement):void;
  abstract visitorDivElement(e:DivElement):void;
  abstract visitorSpanElement(e:SpanElement):void;
}

• 具體訪問者類

實現(xiàn)對具體元素的處理柄瑰，比如p元素拿到text拼接闸氮，img元素拿url做拼接

class HtmlVisitor extends V{
  htmlStr=''
  visitorPElement(e:PElement){
    const { text } = e.data
    this.htmlStr += `<p>${text}</p>`
  }
  visitorDivElement(e:DivElement){
    const { text } = e.data
    this.htmlStr += `<div>${text}</div>`
  }
  visitorSpanElement(e:SpanElement){
    const { text } = e.data
    this.htmlStr += `<span>${text}</span>`
  }
}

• 抽象元素

abstract class E{
  abstract type:string
  abstract data:{
    [o:string]:any;
  }
  abstract accept(visitor:V):void;
}

• 具體的元素類

class PElement extends E{
  type='p'
  data={
    text:'這是一個段落'
  }
  accept(visitor:HtmlVisitor){
    visitor.visitorPElement(this)
  }
}

class DivElement extends E{
  type='p'
  data={
    text:'這是一個div'
  }
  accept(visitor:HtmlVisitor){
    visitor.visitorDivElement(this)
  }
}

class SpanElement extends E{
  type='p'
  data={
    text:'這是一個span'
  }
  accept(visitor:HtmlVisitor){
    visitor.visitorSpanElement(this)
  }
}

• 集合

class Collect{
  elements:E[]=[]
  add(e:E){
    this.elements.push(e)
  }
  accept(visitor:V){
    this.elements.forEach(e=>{
      e.accept(visitor)
    })
  }
}

使用

const c = new Collect()
c.add(new DivElement())
c.add(new PElement())
c.add(new SpanElement())
c.accept(new HtmlVisitor())

需求迭代

現(xiàn)在，要求在保留原有html轉(zhuǎn)換的基礎(chǔ)上教沾，還可以做md文檔的轉(zhuǎn)換蒲跨，此時，在訪問者模式下授翻，我們只需要新創(chuàng)建一個新的具體的訪問者類即可或悲，對其其余的四個角色不需要進(jìn)行關(guān)注或修改孙咪，偽代碼如下

class MdVisitor extends V{
  mdStr=''
  visitorPElement(e:PElement){
    //todo
  }
  visitorDivElement(e:DivElement){
    //todo
  }
  visitorSpanElement(e:SpanElement){
    //todo
  }
}
//只需要采用MdVisitor作為訪問者即可
c.accept(new MdVisitor())