Blogger Information
Blog 77
fans 0
comment 2
visits 55786
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
浅析 MVC
南瓜又个梦
Original
585 people have browsed it

MVC 三个对象分别做什么,给出伪代码示例

  • Model: 模型持有所有的数据、状态和程序逻辑.
  1. const model={
  2. const data:{数据},
  3. create:{},
  4. delete:{},
  5. updata(data):{
  6. object.assign(新数据,旧数据)//用新数据替换旧数据
  7. eventBus.trigger'新数据'//eventBus触发"新数据信息",通知view刷新页面
  8. },
  9. getdata:{数据a}
  10. }
  • View: 负责界面的布局和显示.
    1. const v={
    2. el:要刷新的元素
    3. html:`这里是HTML或者其他需要添加进去的元素`,
    4. init(container)
    5. v.el=$(conrainer
    6. },
    7. render(n){刷新页面}
    8. }
  • Controller: 负责模型和界面之间的交互
    1. const c = {
    2. init(container) {
    3. v.init()//初始化View
    4. v.render()//第一次渲染页面
    5. c.autoBindEvents()//自动的事件绑定
    6. eventBus.on('m:update',()=>{v.render()}//当enentsBus触发'm:update'是View刷新
    7. },
    8. events: {事件 }, //事件以哈希表的方式记录存储
    9. add() {+具体实现},
    10. minus() {-具体实现},
    11. mul() {*具体实现},
    12. div() {/具体实现},
    13. autoBindEvents() {自动绑定事件}
    14. }

EventBus 有哪些 API,是做什么用的,给出伪代码示例

像一个触发器的概念
一个开 EventBus.on
一个关 EventBus.off
一个监听 EventBus.trrger
利用继承,在需要知道是否被触发,触发了要做什么,是一个可以全局都用的一个方式,可以重写覆盖相关事件处理

表驱动编程是做什么的(可以自己查查资料)

  1. events: {
  2. 'click #add1' : 'add',
  3. 'click #minus1' : 'minus',
  4. 'click #mul2' : 'mul',
  5. 'click #divide2' : 'div'
  6. },
  7. add() {
  8. m.update( data: {n: m.data.n +1})
  9. },
  10. minus() {
  11. m.update( data: {n: m.data.n -1})
  12. },
  13. mul() {
  14. m.update( data: {n: m.data.n *2})
  15. },
  16. div() {
  17. m.update( data: {n: m.data.n /2})
  18. }

我是如何理解模块化的

1,方便代码维护,升级,互不干扰
2,更好合作
3,要注意命名,在导入的时候,不要重复而冲突
4.’.mjs.js’会比较好,

网速不可控在加载前的用户体验感的优化

1,加一个动画,加载完毕用JS删掉它
加一个骨架
加占位内容
2,在服务器端渲染计数。SSR

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post