JavaScript 设计模式之享元模式

享元

将一部分共用的方法提取出来作为公用的模块

javascript 复制代码
const Car = {
  getName: function () {
    return this.name
  },
  getPrice: function (price) {
    return price * 30
  }
}

const BMW = function (name, price) {
  this.name = name
  this.price = price
}
BMW.prototype = Car
const bmw = new BMW('BMW', 1000000)
console.log(bmw.getName()) // BMW
console.log(bmw.getPrice(1000000)) // 3000000

const Benz = function (name, price) {
  this.name = name
  this.price = price
}
Benz.prototype = Car
const benz = new Benz('Benz', 2000000)
console.log(benz.getName()) // Benz
console.log(benz.getPrice(2000000)) // 6000000

享元模式的应用目的是为了提高程序的执行效率与系统的性能。因此在大型系统开发中应用是比较广泛的,有时可以发生质的改变。它可以避免程序中的数据重复。有时系统内存在大量对象,会造成大量存占用,所以应用享元模式来减少内存消耗是很有必要的。

模板方法

假使我们有如下的样式

css 复制代码
.panel {
  width: 200px;
  min-height: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  padding: 10px;
  margin: auto
}

.btn-content {
  display: flex;
  justify-content: space-around;
}
.btn-content.right{
  flex-direction: row-reverse;
}

创建一个弹窗的基类

javascript 复制代码
const Alert = function (data) {
  if (!data) return
  this.content = data.content
  this.panel = document.createElement('div')
  this.contentNode = document.createElement('p')
  this.confirmBtn = document.createElement('span')
  this.closeBtn = document.createElement('b')
  this.footerBtn = document.createElement('div')
  this.footerBtn.className = 'btn-content'
  this.panel.className = 'panel'
  this.confirmBtn.className = 'btn-confirm'
  this.closeBtn.className = 'btn-close'
  this.confirmBtn.innerHTML = data.confirm || '确认'
  this.closeBtn.innerHTML = data.close || '关闭'
  this.contentNode.innerHTML = data.content || ''
  this.success = data.success || function () { }
  this.cancel = data.cancel || function () { }
}


Alert.prototype = {
  init: function () {
    this.panel.appendChild(this.contentNode)
    this.footerBtn.appendChild(this.confirmBtn)
    this.footerBtn.appendChild(this.closeBtn)
    this.panel.appendChild(this.footerBtn)
    document.body.appendChild(this.panel)
    this.bindEvent()
    this.show()
  },
  bindEvent: function () {
    this.confirmBtn.onclick = () => {
      this.success()
      this.hide()
    }
    this.closeBtn.onclick = () => {
      this.cancel()
      this.hide()
    }
  },
  show: function () {
    this.panel.style.display = 'block'
  },
  hide: function () {
    this.panel.style.display = 'none'
  }
}

基类主要用来实现一些常规的样式布局

定义一个标准的提示框

javascript 复制代码
const TitleAlert = function (data) {
  Alert.call(this, data)
  this.title = data.title
  this.titleDom = document.createElement('h3')
  this.titleDom.style.textAlign = 'center'
  this.titleDom.innerHTML = this.title
  this.panel.className += ' title-panel'
}
TitleAlert.prototype = new Alert
TitleAlert.prototype.init = function () {
  this.panel.insertBefore(this.titleDom, this.panel.firstChild)
  Alert.prototype.init.call(this)
}

确认按钮位置在左/右

javascript 复制代码
const LeftAlert = function (data) {
  TitleAlert.call(this, data)
  this.panel.className += ' left-panel'
  this.footerBtn.className += ' left'
}
LeftAlert.prototype = new Alert
LeftAlert.prototype.init = function () {
  TitleAlert.prototype.init.call(this)
}

const RightAlert = function (data) {
  TitleAlert.call(this, data)
  this.panel.className += ' right-panel'
  this.footerBtn.className += ' right'
}
RightAlert.prototype = new Alert
RightAlert.prototype.init = function () {
  TitleAlert.prototype.init.call(this)
}

使用

javascript 复制代码
new LeftAlert({
  title: '提示',
  content: '这是一个自定义的右上角弹窗',
  btnText: '确定',
  success: function () {
    console.log('点击了确定按钮');
  },
  cancel: function () {
    console.log('点击了取消按钮');
  }
}).init();

效果

模板方法的核心在于对方法的重用,它将核心方法封装在基类中,让子类继承基类的方法,实现基类方法的共享,达到方法共用。

相关推荐
老码沉思录42 分钟前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
Dread_lxy6 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
奔跑草-7 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与7 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
前端郭德纲7 小时前
浏览器是加载ES6模块的?
javascript·算法
JerryXZR7 小时前
JavaScript核心编程 - 原型链 作用域 与 执行上下文
开发语言·javascript·原型模式