Analysis of MVC

Madagascar algorithm 2021-05-03 13:22:18
analysis mvc


MVC What do the three objects do ?

MVC It's a design pattern , All pages are available MVC To optimize the code structure ,MVC There are three types of objects , Separate them to improve flexibility and reusability .

Model model: It is used to encapsulate the data related to the business logic of the application and the processing method of the data , There will be one or more views listening to the model . Once the data in the model changes , The model will inform the relevant view .

View view: It's a representation on the screen , It depicts model Current state . When the data in the model changes , The view gets a chance to refresh itself accordingly .

controller controller: Define how the user interface responds to user input , It plays an organizational role between different levels , Processes for controlling applications , It deals with user behavior and data model Change on .

Pseudo code

const m ={
data: data
update(){
Update of data
}
}
const v = {
html: Page loading
init() { Initialization data }
render(){
Refresh the view when the data changes
}
}
const c = {
The binding event , Respond to user actions
}
 Copy code 

Code

import $ from 'jquery'
const eventBus = $(window)
// Data correlation is all in m
const m = {
data: {
n: parseInt(localStorage.getItem('n'))
},
create() {},
delete() {},
update(data) {
Object.assign(m.data, data)
eventBus.trigger('m:updated')
localStorage.setItem('n', m.data.n)
},
get() {}
}
// All views are related to v
const v = {
el: null,
html: `
<div>
<div class="output">
<span id="number">{{n}}</span>
</div>
<div class="actions">
<button id="add1">+1</button>
<button id="minus1">-1</button>
<button id="mul2">*2</button>
<button id="divide2">÷2</button>
</div>
</div>
`,
init(container) {
v.el = $(container)
},
render(n) {
if (v.el.children.length !== 0) v.el.empty()
$(v.html.replace('{{n}}', n))
.appendTo(v.el)
}
}
// Everything else is on the table c
const c = {
init(container) {
v.init(container)
v.render(m.data.n) // view = render(data)
c.autoBindEvents()
eventBus.on('m:updated', () => {
v.render(m.data.n)
})
},
events: {
'click #add1': 'add',
'click #minus1': 'minus',
'click #mul2': 'mul',
'click #divide2': 'div',
},
add() {
m.update({n: m.data.n + 1})
},
minus() {
m.update({n: m.data.n - 1})
},
mul() {
m.update({n: m.data.n * 2})
},
div() {
m.update({n: m.data.n / 2})
},
autoBindEvents() {
for (let key in c.events) {
const value = c[c.events[key]]
const spaceIndex = key.indexOf(' ')
const part1 = key.slice(0, spaceIndex)
const part2 = key.slice(spaceIndex + 1)
v.el.on(part1, part2, value)
}
}
}
 Copy code 

EventBus What are they? API, What is it for ?

EventBus Mainly used for communication between objects ,EventBus Basic API Yes on( Monitoring events ),trigger( Triggering event ), off( Cancel monitoring ) Method .

// Pseudo code
eventBus.trigger('xxx') // Triggering event xxx
eventBus.on('xxx', function()) // Listen to the xxx perform function()
eventBus.off('xxx') // Cancel monitoring xxx
 Copy code 

What table driven programming does ?

The so-called table driven method (Table-Driven Approach), It means to get the value by looking up the table directly , Not through (if else) logic , Separation of logic and data . in fact , Anything that can be selected by logical statements , You can choose by looking up the table . For the simple case , It's easier and more straightforward to use logical statements . But as the logical chain becomes more complex , The look-up table method becomes more and more attractive .

// The code example is as follows
bindEvents(){
const pause = () => {}
const play = () => {}
const slow = () => {}
const normal = () => {}
const fast = () => {}
document.querySelector('#btnPause').onclick = pause
document.querySelector('#btnPlay').onclick = play
document.querySelector('#btnSlow').onclick = slow
document.querySelector('#btnNormal').onclick = normal
document.querySelector('#btnFast').onclick = fast
}
// Simplify code with table driven method , Easy to extend and reuse , Just change the table data
events:{
'#btnPause':'pause',
'#btnPlay':'play',
'#btnSlow':'slow',
'#btnNormal':'normal',
'#btnFast':'fast'
},
bindEvents: () => {
for(let key in player.events){
if(player.events.hasOwnProperty(key)){
document.querySelector(key).onclick = player[player.events[key]]
}
}
}
 Copy code 

How to understand modularity ?

Modularization is to divide the whole with more functions into smaller functional modules , Each module is independent , Mutual indifference , This kind of code is easier to maintain , There's no need to know how the whole is , Just need to know the knowledge of this module , It's also more reusable .

版权声明
本文为[Madagascar algorithm]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210503131222104B.html

  1. Compressing JavaScript code with makefile
  2. FastAPI + Vue 前后端分离 接口自动化测试工具 apiAutoTestWeb
  3. Apiautotestweb, an automated testing tool for front end and back end separation interface of fastapi + Vue
  4. 后端Go语言+前端Angular2项目启动模板
  5. Review of vue2.0
  6. Back end go language + front end angular2 project startup template
  7. Adaptive layout scheme and source code implementation of px2rem loader enhanced version
  8. [troubleshooting series] nodejs service suspected "memory leak" caused by DNS query
  9. 大型前端项目架构优化探索之路-腾讯文档表格
  10. The way to optimize the architecture of large front end projects Tencent document form
  11. 通过simple-redux理解React.js的Redux工作原理
  12. Understand the Redux working principle of react.js through simple Redux
  13. 历时10个多月,学习了这132 个CSS 特效,还不来学习
  14. Less than 3 thousand of the online number of people carrying goods exceeds 500 thousand, and the live broadcast of origin is becoming Kwai Fu's cargo outlet.
  15. It took more than 10 months to learn these 132 CSS special effects, but I haven't come to learn them yet
  16. 小白前端入门笔记(七),HTML5中的main标签
  17. The main tag in HTML5
  18. restful http架构实战
  19. Restful HTTP architecture
  20. 为什么GitLab选择Vue.js?
  21. Why did gitlab choose vue.js?
  22. HTTP-RPC: 轻量跨平台REST服务
  23. 继全面采用Node.js以后,PayPal分享大幅度踩坑GraphQL心得 - Mark Stuart
  24. vue组件化开发实战之滚动/轮播的实现
  25. Http-rpc: lightweight cross platform rest Service
  26. Following the full adoption of node.js, PayPal shares a great deal of graphql experience mark Stuart
  27. Implementation of rolling / carousel in Vue component development
  28. CSS是什么?这一篇全解,绝对有你想要的
  29. What is CSS? This is a complete solution, there is absolutely what you want
  30. 04-HTML5常用标签-HTML5极速入门
  31. 04-html5 common tags
  32. WEB前端全套零基础视频教程+软件2021最新编程视频
  33. Web front end full set of zero basic video tutorial + software 2021 latest programming video
  34. 使用Node, Mongo, React, Redux实现Token认证
  35. Using node, Mongo, react and Redux to realize token authentication
  36. 体面编码之CSS和HTML
  37. CSS and HTML for decent coding
  38. 使用Playwright基于多浏览器进行javascript自动化测试的简单教程- Applitools
  39. A simple tutorial for JavaScript automatic testing based on multi browser using playwright - applitools
  40. Minimum distance to target element
  41. 浅谈 React 中的 XSS 攻击
  42. XSS attack in react
  43. 自学前端教程整理,附不容错过的前端100篇文章合集
  44. Self taught front-end tutorial collation, with a collection of 100 front-end articles that can not be missed
  45. 使用OpenTracing跟踪Go中的HTTP请求延迟
  46. Using opentracing to track HTTP request latency in go
  47. Encapsulating databinding allows you to write less than 10000 lines of code
  48. 03-HTML5标签-HTML5极速入门
  49. 03-html5 tag-html5 quick start
  50. LayUI - 极易上手拿来即用的前端 UI 框架
  51. Layui - easy to use front end UI framework
  52. Interpretation of lodash source code (1)
  53. Why is the first parameter of node family callback error?
  54. 报告:JavaScript 开发者达1380 万,C#超越 PHP,Rust 增长最快
  55. Report: Javascript developers reach 13.8 million, C surpasses PHP, and rust grows fastest
  56. 小白前端入门笔记(10),怎么设置网站内部的超链接?
  57. How to set up hyperlinks inside the website?
  58. Using node and socket to realize online chat room
  59. The core competitiveness of Vue: data bidirectional binding
  60. React configuration agent