26 | 实战（一）：怎么设计一个“画图”程序？

许老师，我想问一下，学go的话要不要去学一下，设计模式，有的话，您有没有什么资料可以推荐一下？

这一章看的有点卡，主要是因为对前端知识不熟悉。我看到js代码里面出现class关键字一度怀疑用的是什么语言。另外提一个建议，老师讲的时候能不能按照软件设计的过程来展开。比如开始做需求分析，这个画图程序要提供哪些功能，支持哪些图形等。然后列出平台对画图的支持，再描述在平台上直接硬写会写成什么样的程序，最后按mvc模式重构。我感觉这样能更好的表现设计的思路。

由Controller来创建具体Shape这样会不会，model和controller又耦合了呢

下载源码并切换到 v26 分支，用浏览器打开 index.html 文件，可使用开发者工具进行断点调试。 绘制矩形的过程：  1. 点击 `Creat Rect` 按钮，激活 react.js(Controller);  2. view.js(View) 接收到 drawing 的 onmousedown 事件，传递给事件的实现者 react.js；  3. react.js 接收到 onmousedown 事件，记录起始点 p1；  4. 同理，react.js 接收到 onmousemove 事件，记录 p2, 并调用全局函数 invalidate 绘制；  5. invalidate 交给 qview.invalidateRect 处理（为什么不直接调用 qview.invalidateRect？)；  6. qview.invalidateRect 调用 qview.onpaint，在 onpaint 中调用当前激活的 rect.js 的 onpaint 方法；  7. rect.js 中 onpaint 调用 buildShape() 创建 QRect(Model) 实例，然后调用该实例的 onpaint 方法绘制；  8. 绘制结束时 react.js 接收到 onmouseup 事件，把当前 model 实例存入 doc（Model)，保证重绘时能够再次绘制原来的图形； MVC 角色的通信过程： V -> C -> V -> C -> M

五讲画图程序已经讲完了，第一次只是泛泛而读，这次打算精读，并整理一下自己的理解。 第一讲的重点架构思想包括：  1. 为了避免 Model 知道 View 的实现细节，可以让 Model 耦合 GDI 接口。模块间通信如果避免不了耦合，就耦合稳定的模块，这个模块最好是系统的，因为系统模块相对于业务模块通常更加稳定；  2. ViewModel 持有 Model，并由 Controller 来更新 Model/ViewModel；  3. ViewModel 定义 Controller 的行为规则，但并不关心 Controller 的具体行为。Controller 可以选择性的接管 ViewModel 的事件；  4. ViewModel 协调 Model 和 Controller，启到承上启下的作用，所以 ViewModel 职责的划分对程序的结构有比较大的影响；  5. Model 的结构稳定，容易做到平台无关，ViewModel 会跟平台强关联；  6. 避免 Controller 之间的耦合，可以使用 ViewModel 作为通信中介者；  7. 相同的 Model 可能在 Controller 层有不同的展现方法； 本讲中 View 应该理解为 ViewModel，View 是不应该持有 Model 数据的，文中老师也说了网页的 View 是由浏览器实现的，个人觉得从严格意义上将，这不算是 MVC 模式，也不像 MVVM，应该叫 MVMC？ 下载源码并切换到 v26 分支，用浏览器打开 index.html 文件，可使用开发者工具进行断点调试。

看了几遍捋一下思路:view接收到用户事件，把事件处理委托给controller，由controller来操作model。是这样的吗，老师？

浏览器打开index.htm，首先创建canvas画布对象，后面的画图操作都是在画布对象上进行的。 接着加载dom对象，注意这里并没有实例化dom对象。 然后加载view对象，并且实例化view对象和dom对象。view对象中定义了事件处理规则，接管画布的事件处理，将onpaint委托给了doc和contraller，注意doc的onpaint和contraller的onpaint绘制的是不同的内容，还有就是定义了contraller的操作规则。 接下来就是加载contraller，调用view的方法注册自己，并将事件处理委托给contraller。 最后加载和显示菜单，定义contraller的鼠标点击事件，在点击事件中指定当前contraller。这样当鼠标在画布上移动时，通过层层委托（画布——view——contraller）最终触发contraller的invalidate，invalidate触发onpaint，onpaint触发doc.onpaint。

最大的收获还是解耦。首先将应用程序进行抽象/分层，然后通过中间的view层将model层和controller层串联在一起。 controller的使用，就像java中的interface，其有多重实现方式。 这是第二次读这篇文章了，因为没有接触过前端，不知道前端的实习方式。后面看懂了代码，但是如果能有个流程图样的粗略解释可能会更有利于理解吧。

看了一些评论，得到一个理解，不知道对不对：这里的mvc只讨论分工，相当于是把领域的功能按职责分工。model是业务的核心，它与平台无关。controller是领域服务，即根据具体的也许行为提供调度服务。view层则是针对具体的可视化平台响应操作。 v调用c调用m

老师，可能我习惯了web开发那套mvc，对于文章里提的mvc总感觉对不上号。这里边说的mvc是指一个类里边分别对应视图控制器模型的归类吗？