design-patterns

design-patterns 概述

欢迎来到设计模式与编程范式站点，这里专门探索基于各种语言的设计模式与编程范式，力求打造最佳编程实践。

目录结构

23种经典设计模式源码实例

https://github.com/microwind/design-patterns

设计模式7大原则源码实例

https://github.com/microwind/design-patterns/tree/main/design-principles

几种编程范式实例详解

https://github.com/microwind/design-patterns/tree/main/programming-paradigm

分层架构设计模式实例详解

https://github.com/microwind/design-patterns/tree/main/mvx

MVC例子

mvc+mvp+mvvp DEMO例子

Java 版本

Java servlet MVC 版本，这里采用最基本的原理来测试，Spring或Struts道理类似

 // Model即业务实体对象，可以增添少许方法来处理数据 // src/mvc/Model.java public class Model { private String name; private Integer num; public Model() { } public Model(String name, Integer num) { this.name = name; this.num = num; } public String getName() { return this.name; } public Integer getNum() { return this.num; } } // Processing bussiness logic，业务逻辑处理，组织与处理Model，此类可选 // src/mvc/ModelService.java import java.util.Optional; public class ModelService { Model model; public Optional<Model> getModel() { if (this.model == null) { this.model = new Model("Thomas", 10); } // do something return Optional.of(this.model); } } // Controller，负责控制转发和模板映射。采用WebServlet注解，也可通过web.xml配置 // src/mvc/Controller.java import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet( name = "ModelServlet", urlPatterns = "/hello-model") public class Controller extends HttpServlet { private ModelService modelService = new ModelService(); private void processRequest( HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { modelService.getModel().ifPresent(s -> { request.setAttribute("helloModel", s); }); RequestDispatcher dispatcher = request.getRequestDispatcher( "/WEB-INF/template/model.jsp"); dispatcher.forward(request, response); } @Override protected void doGet( HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } @Override protected void doPost( HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } } // /WEB-INF/template/model.jsp // View，使用JSP <%@ page import="mvc.Model" %> <html> <head> <title>Hello Model</title> </head> <body> <h1>Hello Model</h1> <% if (request.getAttribute("helloModel") != null) { System.out.print(new Model()); Model model = (Model) request.getAttribute("helloModel"); %> <div>Name: <%= model.getName()%></div> <div>Num: <%= model.getNum()%></div> <% } %> </body> </html> // Java MVC版结束

JS 版本

1. MVC Basic JS版: 最基本版MVC，与后端MVC类似, M与C分离。事件绑定和数据更新均通过Controller来设置和转发。

 !(function(win, doc) { // View class View { constructor($el, tpl) { this.$el = $el this.tpl = tpl } render(data) { this.$el.innerHTML = this.compile(data) } compile(data) { return this.tpl || `<div><b>${data.name}</b> <em>${data.num}</em></div>` } } // Model class Model { constructor() { this.data = { name: 'MVC Basic', num: 1 } } update(value, cb) { const fn = (res) => { this.data.num += value cb(this.data) } fetch('./').then(fn).catch(fn) } change(name, cb) { this.data.name = name cb(this.data) } } // Controller class Controller { constructor(view, model) { this.view = view this.model = model } init() { this.view.$el.addEventListener('click', evt => { this.model.data.name = 'Click to add:Event dispatch.' this.model.update(1, data => this.view.render(data)) }) this.view.$el.addEventListener('mouseout', evt => { this.model.change('Click to add', data => this.view.render(data)) }) this.view.render(this.model.data) } } const model = new Model() const view = new View(doc.querySelector('#mvc-basic-view')) const controller = new Controller(view, model) controller.init() })(window, document)

2. MVC:前端MVC，与后端MVC并不太一样，View与Model是绑定的。在View中监测Model的行为通知来更新视图，Model更新则通过Controller注册转发

 !(function(win, doc) { class Observer { constructor() { this.observers = [] } register(callback) { this.observers.push(callback) } notify(args) { for (let i = 0, l = this.observers.length; i < l; i++) { this.observers[i](args) } } } // View class View { constructor($el, model, tpl) { this.$el = $el this.model = model this.tpl = tpl this.onAdd = new Observer(this) this.onChange = new Observer(this) this.model.onUpdate.register(value => this.render()) this.model.onChange.register(name => this.render()) this.$el.addEventListener('click', evt => this.onAdd.notify(1)) this.$el.addEventListener('mouseout', evt => this.onChange.notify('Click to add')) } render() { this.$el.innerHTML = this.compile(this.model.data) } compile(data) { return this.tpl || `<div><b>${data.name}</b> <em>${data.num}</em></div>` } } // Model class Model { constructor() { this.data = { name: 'MVC', num: 1 } this.onUpdate = new Observer(this) this.onChange = new Observer(this) } update(value) { const fn = (res) => { this.data.num += value this.onUpdate.notify(value) } fetch('./').then(fn).catch(fn) } change(name) { this.data.name = name this.onChange.notify(name) } } // Controller class Controller { constructor(view, model) { this.view = view this.model = model } init() { this.view.onAdd.register(value => { this.model.data.name = 'Click to add:Event dispatch.' this.model.update(value) }) this.view.onChange.register(name => this.model.change(name)) this.view.render() } } const model = new Model() const view = new View(doc.querySelector('#mvc-view'), model) const controller = new Controller(view, model) controller.init() })(window, document)

3. MVP:Contorller升级为Presenter，将View与Model分离。通过Presenter来绑定View事件和代理双方行为

 !(function(win, doc) { // View class View { constructor($el, tpl) { this.$el = $el this.tpl = tpl } render(data) { this.$el.innerHTML = this.compile(data) } compile(data) { return this.tpl || `<div><b>${data.name}</b> <em>${data.num}</em></div>` } } // Model class Model { constructor() { this.data = { name: 'MVP', num: 1 } } update(value) { const fn = (res) => { this.data.num += value return res } return fetch('./').then(fn).catch(fn) } change(name) { this.data.name = name } } // Presenter class Presenter { constructor(view, model) { this.view = view this.model = model view.$el.addEventListener('click', evt => this.add(1)) view.$el.addEventListener('mouseout', evt => this.change('Click to add')) } init() { this.render(this.model.data) } render(data) { this.view.render(data) } add(value) { this.model.data.name = 'Click to add:Event proxy.' this.model.update(value).then(res => { this.render(this.model.data) }) } change(name) { this.model.change(name) this.render(this.model.data) } } const view = new View(doc.querySelector('#mvp-view')) const presenter = new Presenter(view, new Model()) presenter.init() })(window, document)

4. MVP+Observer: 增加Observer，View与Model分离。事件由View绑定，Presenter增加对应函数，代理View与Model全部行为

 !(function(win, doc) { class Observer { constructor() { this.observers = [] } register(callback) { this.observers.push(callback) } notify(args) { for (let i = 0, l = this.observers.length; i < l; i++) { this.observers[i](args) } } } // View class View { constructor($el, tpl) { this.$el = $el this.tpl = tpl this.onAdd = new Observer(this) this.onChange = new Observer(this) this.$el.addEventListener('click', evt => this.onAdd.notify(1) ) this.$el.addEventListener('mouseout', evt => this.onChange.notify('Click to add')) } render(data) { this.$el.innerHTML = this.compile(data) } compile(data) { return this.tpl || `<div><b>${data.name}</b> <em>${data.num}</em></div>` } } // Model class Model { constructor() { this.data = { name: 'MVP+Observer', num: 1 } this.onUpdate = new Observer(this) this.onChange = new Observer(this) } update(value) { const fn = (res) => { this.data.num += value this.onUpdate.notify(value) return res } return fetch('./').then(fn).catch(fn) } change(name) { this.data.name = name this.onChange.notify(name) } } // Presenter class Presenter { constructor(view, model) { this.view = view this.model = model this.view.onAdd.register(value => this.add(value)) this.view.onChange.register(name => this.change(name)) this.model.onUpdate.register(res => this.render()) this.model.onChange.register(res => this.render()) } init() { this.render() } render() { this.view.render(this.model.data) } add(value) { this.model.data.name = 'Click to add:Event proxy.' this.model.update(value) } change(name) { this.model.change(name) } } const $el = doc.querySelector('#mvp-observer-view') const presenter = new Presenter(new View($el), new Model()) presenter.init() })(window, document)

5. MVP+Dispatch: 轻量级的MVP，与最基本MVC也类似，将View与Model分离，通过Presenter注册Model行为，但不增加代理函数，直接将View与Model绑定

 !(function(win, doc) { class Observer { constructor() { this.observers = [] } register(callback) { this.observers.push(callback) } notify(args) { for (let i = 0, l = this.observers.length; i < l; i++) { this.observers[i](args) } } } // View class View { constructor($el, tpl) { this.$el = $el this.tpl = tpl this.onAdd = new Observer(this) this.onChange = new Observer(this) } render(data) { this.$el.innerHTML = this.compile(data) } compile(data) { return this.tpl || `<div><b>${data.name}</b> <em>${data.num}</em></div>` } } // Model class Model { constructor() { this.data = { name: 'MVP+Dispatch', num: 1 } this.onUpdate = new Observer(this) this.onChange = new Observer(this) } update(value) { const fn = (res) => { this.data.num += value this.onUpdate.notify(value) } fetch('./').then(fn).catch(fn) } change(name) { this.data.name = name this.onChange.notify(name) } } // Controller class Controller { constructor(view, model) { this.view = view this.model = model } init() { this.view.$el.addEventListener('click', evt => this.view.onAdd.notify(1)) this.view.$el.addEventListener('mouseout', evt => this.view.onChange.notify('Click to add')) this.view.onAdd.register(value => { this.model.data.name = 'Click to add:Event dispatch.' this.model.update(value) }) this.view.onChange.register(name => this.model.change(name)) this.model.onUpdate.register(value => this.view.render(this.model.data)) this.model.onChange.register(name => this.view.render(this.model.data)) this.view.render(this.model.data) } } const model = new Model() const view = new View(doc.querySelector('#mvp-dispatch-view')) const controller = new Controller(view, model) controller.init() })

6. 前端MVVM模式，通过观察者模式将数据与视图进行双向绑定，然后由数据驱动更改

 !(function(win, doc) { class Agent { constructor(target, watch) { const handle = { set(obj, prop, value) { if (obj[prop] !== value && obj.hasOwnProperty(prop)) { obj[prop] = value watch && watch(obj, prop, value) } return Reflect.set(obj, prop, value) }, get(obj, prop) { if (typeof obj[prop] === 'object' && obj[prop] !== null) { return new Proxy(obj[prop], handle) } else { return Reflect.get(obj, prop) } } } return new Proxy(target, handle) } } // View class View { constructor($el, tpl) { this.$el = $el } compile(data) { return this.tpl || ` <div><b>${data.name}</b> <em>${data.num}</em></div>` } render(data) { this.$el.innerHTML = this.compile(data) } } // Model class Model { constructor() { this.data = { name: 'MVVM', num: 1 } } update(data) { const fn = (res) => { data.num += 1 return data } return fetch('./').then(fn).catch(fn) } } // Controller class ViewModel { constructor({ $el, view, model }) { this.view = view this.data = new Agent(model.data, (obj, prop, value) => { this.view.render(this.data) }) this.model = model this.init() } init() { console.log('render:', this.data) this.view.$el.addEventListener('click', (evt) => this.add(evt)) this.view.$el.addEventListener('mouseout', (evt) => this.change(evt)) this.view.render(this.data) } change(evt) { this.data.name = 'Click to add' } add(evt) { this.data.name = 'Click to add:Watch data.' this.model.update(this.data) } } const viewModel = new ViewModel({ view: new View(doc.querySelector('#mvvm-view')), model: new Model() }) })(window, document)

7. 前端MVVM最简版框架模式，增加事件标记提取绑定和Watch行为变化，通过观察者模式将数据与视图进行双向绑定，然后由数据驱动更改

 !(function(win, doc) { class Observer { constructor(vm) { this.vm = vm this.observers = [] } register(callback) { this.observers.push(callback) } notify(args) { for (let i = 0, l = this.observers.length; i < l; i++) { this.observers[i](args) } } } class Watcher { constructor(vm, cb) { this.vm = vm this.cb = cb return this.run.bind(this) } run(obj, prop, value) { console.log('watch:', arguments) if (this.vm.watch[prop]) { (this.vm.watch[prop]).call(this.vm.data, value, this.vm) } this.cb.call(this.vm, obj, prop, value, this) } } class Agent { constructor(target, observer) { const handle = { set(obj, prop, value) { if (obj[prop] !== value && obj.hasOwnProperty(prop)) { obj[prop] = value observer && observer.notify(obj, prop, value) } return Reflect.set(obj, prop, value) }, get(obj, prop) { if (typeof obj[prop] === 'object' && obj[prop] !== null) { return new Proxy(obj[prop], handle) } else { return Reflect.get(obj, prop) } } } return new Proxy(target, handle) } } function template(strings, ...keys) { return function(...values) { const dict = values[values.length - 1] || {} const result = [strings[0]] keys.forEach((key, i) => { let value = dict[key] result.push(value, strings[i + 1]) }) return result.join('') } } // View class View { constructor($el, tpl) { this.$el = $el this.tpl = tpl this.events = [] } compile(data) { const content = this.tpl(data) let reg = new RegExp('e-([a-z]+)\=\"([a-z0-9]+)' + '\"', 'igm') const result = content.match(reg) || [] result.forEach((item) => { const [evt, fn] = item.split('=') this.events.push([evt.substr(2), fn.substr(0, fn.length - 1).substr(1)]) }) return content } render(data) { this.$el.innerHTML = this.compile(data) } } const Model = { name: 'Tiny MVVM Framework', num: 1 } // ViewModel class TinyMVVM { constructor({ $el, tpl, data, methods = {}, watch = {}, computed = {} }) { this.view = new View($el, tpl) this.observer = new Observer(this) this.watcher = new Watcher(this, (obj, prop, value) => { this.render() }) this.observer.register(this.watcher) this.data = new Agent(data(), this.observer) this.methods = methods this.watch = watch this.computed = computed this.init() } render() { const data = Object.assign({}, this.data) for (let attr in this.computed) { data[attr] = (this.computed[attr]).call(this.data, this) } this.view.render(data) } init() { this.render() this.mount() } mount() { this.view.events.forEach((item) => { this.view.$el.addEventListener(item[0], (evt) => (this.methods[item[1]].bind(this))(evt)) }) } } new TinyMVVM({ $el: doc.querySelector('#mvvm-watch-view'), tpl: template` <div e-click="add" e-mouseout="change"><b>${'name'}</b> <em>${'num'}</em> | ${'computedProp'}</div>`, data() { return Model }, methods: { fetch(value) { const fn = (res) => { this.data.num += value return this.data } return fetch('./').then(fn).catch(fn) }, change(evt) { this.data.name = 'Click to add' }, add(evt) { this.data.name = 'Click to add:Watch data.' this.methods.fetch.bind(this)(1) } }, computed: { computedProp: function(vm) { return this.name + ' computed.' } }, watch: { num(value, vm) { this.name = 'Click to add:Watch data.' } } }) })(window, document)
This site is open source. Improve this page.