Javascriptデザインパターンシステムの説明とアプリケーション-研究ノート4アダプターパターン

アダプターモード

• 古いインターフェース形式はユーザーと互換性がありません
• 中央に適応変換インターフェースを追加する
  

class Adaptee {
    
    
  specificRequest() {
    
    
    return '德国标准的插头'
  }
}

class Target {
    
    
  constructor () {
    
    
    this.adaptee = new Adaptee()
  }
  request() {
    
    
    let info = this.adaptee.specificRequest()
    return `${
      
      info} -> 转换器 -> 中国标准的插头`
  }
}

// 测试
let target = new Target()
let res = target.request()
console.log(res)

シーン

• 古いインターフェースをカプセル化する
• vue computed

古いインターフェースをカプセル化する

// 自己封装的ajax, 使用方式如下：
ajax({
    
    
  url: '/getData',
  type: 'Post',
  dataType: 'json',
  data: {
    
    
    id: "123"
  }
})
.done(funciton(){
    
    })

// 但因历史原因：代码中全都是 $.ajax({...})
// 因此， 做一层适配器
const $ = {
    
    
  ajax: funciton (options) {
    
    
    return ajax(options)
  }
}

vue computed

<div id="example">
  <p>{
    
    {
    
     message }}</p>
  <p>{
    
    {
    
     reverseMessage }}</p>
</div>

var vm = new Vue({
    
    
  el: '#example',
  data: {
    
    
    message: 'Hello'
  },
  computed: {
    
    
    // 计算属性的getter   获取现有的信息，将其进行转换适配
    reverseMessage: funciton () {
    
    
      // this指向vm实例
      return this.message.split('').reverse().join('')
    }
  }
})

設計原理の検証

• 古いインターフェースをユーザーから分離する
• オープンおよびクローズド原則に準拠する