当前位置：首页 > news >正文

JavaScript 设计模式之组合模式

news 来源：原创 2024/5/10 1:58:50

组合模式

在我们日常中肯呢个会将一个表单用这种模式来创建

const Car = function () { }
Car.prototype.getName = function () { throw new Error("需要重写该方法")
}
Car.prototype.getPrice = function () {throw new Error("需要重写该方法")
}
const Benz = function () { }
// 继承Car
Benz.prototype = new Car()
// 重写getName方法
Benz.prototype.getName = function () {return 'Benz'
}
const b = new Benz()
console.log(b.getName()) // Benz
console.log(b.getPrice()) // 需要重写该方法

先写一个基类,再继承该基类

const Benz = function (name, price) {Car.call(this)this.name = namethis.price = price
}
Benz.prototype = new Car
Benz.prototype.getPrice = function () {return this.price
}
Benz.prototype.getName = function () {return this.name
}
const benz = new Benz('奔驰', 50)
console.log(benz.getName()) // 输出：奔驰
console.log(benz.getPrice()) // 输出：50
const bmw = new Benz('宝马', 100)
console.log(bmw.getPrice()) // 输出：100

构建一个 Form 表单

首先我们创建一个基类

定义


const Base = function () { this.children = []this.element = null
}
Base.prototype = {init: function () {throw new Error('必须重写该方法')},add: function () {throw new Error('必须重写该方法')},remove: function () {throw new Error('必须重写该方法')},get: function () {throw new Error('必须重写该方法')}
}

接下来创建一个容器


const FormItem = function (id,parent) {Base.call(this)this.id = idthis.parent = parentthis.init()
}
FormItem.prototype = new Base()
FormItem.prototype.init = function () {this.element = document.querySelector('#form')this.element.id = this.id
}
FormItem.prototype.add = function (child) {this.children.push(child)this.element.appendChild(child.getDom())return this
}
FormItem.prototype.getDom = function () {return this.element
}
FormItem.prototype.show = function () { this.parent.appendChild(this. Element)
}

注意，这里的 show 方法就是用来将所有的 dom 追加到页面上

下面创建一系列的 form 相关 item 及一些dom


const FieldsetItem = function (selector, label) {Base.call(this)this.selector = selectorthis.label = labelthis.init()
}
FieldsetItem.prototype = new Base()
FieldsetItem.prototype.init = function () {this.element = document.createElement('fieldset')const legend = document.createElement('legend')legend.innerHTML = this.labelthis.element.appendChild(legend)
}
FieldsetItem.prototype.add = function (child) {this.children.push(child)this.element.appendChild(child.getDom())return this
}
FieldsetItem.prototype.getDom = function () {return this. Element
}const Group = function () {Base.call(this)this.init()
}
Group.prototype = new Base()
Group.prototype.init = function () {this.element = document.createElement('div')this.element.className = 'group'
}
Group.prototype.add = function (child) {this.children.push(child)this.element.appendChild(child.getDom())return this
}
Group.prototype.getDom = function () {return this.element
}const LabelItem = function (name, label) {Base.call(this)this.name = namethis.label = labelthis.init()
}
LabelItem.prototype = new Base()
LabelItem.prototype.init = function () {this.element = document.createElement('label')this.element.innerHTML = this.labelthis.element.htmlFor = this.name
}
LabelItem.prototype.add = function (child) {// 这里不需要添加，因为label后面直接跟输入框return this
}
LabelItem.prototype.getDom = function () {return this.element
}const InputItem = function (name) {Base.call(this)this.name = namethis.init()
}
InputItem.prototype = new Base()
InputItem.prototype.init = function () {this.element = document.createElement('input')this.element.name = this.namethis.element.style.marginLeft = '5px'
}
InputItem.prototype.add = function (child) {// 这里不需要添加，因为输入框后面直接跟标签return this
}
InputItem.prototype.getDom = function () {return this.element
}const CheckboxItem = function (name, value, label) {Base.call(this)this.name = namethis.value = valuethis.label = labelthis.init()
}
CheckboxItem.prototype = new Base()
CheckboxItem.prototype.init = function () {const span = document.createElement('span')this.element = document.createElement('label')const input = document.createElement('input')input.type = 'checkbox'span.innerHTML = this.labelinput.value = this.valueinput.style.marginRight = '5px'this.element.appendChild(input)this.element.appendChild(span)
}
CheckboxItem.prototype.add = function (child) {
}
CheckboxItem.prototype.getDom = function () {return this.element
}const SpanItem = function (name) {Base.call(this)this.name = namethis.init()
}
SpanItem.prototype = new Base()
SpanItem.prototype.init = function () {this.element = document.createElement('span')this.element.innerHTML = this.namethis.element.style.marginLeft = '5px'
}
SpanItem.prototype.add = function (child) {// 这里不需要添加，因为span前面直接跟输入框return this
}
SpanItem.prototype.getDom = function () {return this. Element
}

使用

假使页面中存在 dom

 <form id="form"></form><div id="content"></div>

var form = new FormItem('form', document.querySelector('#content'))
form.add(new FieldsetItem('account', '账号').add(new Group().add(new LabelItem('user_name', '用户名:')).add(new InputItem('user_name')).add(new SpanItem('4 到 6 位数字或字母'))
).add(new Group().add(new LabelItem('user_pwd', '密&emsp;码:')).add(new InputItem('user_pwd')).add(new SpanItem('6 到 12 位数字或字母'))
).add(new Group().add(new CheckboxItem('remember', true, '是否记住'))
)).show()

效果