许式伟的架构课
许式伟
七牛云CEO
立即订阅
19895 人已学习
课程目录
已更新 71 讲 / 共 77 讲
0/4登录后,你可以任选4讲全文学习。
开篇词 (1讲)
开篇词 | 怎样成长为优秀的软件架构师?
免费
基础平台篇 (21讲)
01 | 架构设计的宏观视角
02 | 大厦基石:无生有,有生万物
03 | 汇编:编程语言的诞生
04 | 编程语言的进化
05 | 思考题解读:如何实现可自我迭代的计算机?
06 | 操作系统进场
07 | 软件运行机制及内存管理
08 | 操作系统内核与编程接口
09 | 外存管理与文件系统
10 | 输入和输出设备:交互的演进
11 | 多任务:进程、线程与协程
12 | 进程内协同:同步、互斥与通讯
13 | 进程间的同步互斥、资源共享与通讯
14 | IP 网络:连接世界的桥梁
15 | 可编程的互联网世界
16 | 安全管理:数字世界的守护
17 | 架构:需求分析 (上)
18 | 架构:需求分析 (下) · 实战案例
19 | 基础平台篇:回顾与总结
加餐 | 我看Facebook发币(上):区块链、比特币与Libra币
加餐 | 我看Facebook发币(下):深入浅出理解 Libra 币
桌面开发篇 (16讲)
20 | 桌面开发的宏观视角
21 | 图形界面程序的框架
22 | 桌面程序的架构建议
23 | Web开发:浏览器、小程序与PWA
24 | 跨平台与 Web 开发的建议
25 | 桌面开发的未来
26 | 实战(一):怎么设计一个“画图”程序?
27 | 实战(二):怎么设计一个“画图”程序?
28 | 实战(三):怎么设计一个“画图”程序?
29 | 实战(四):怎么设计一个“画图”程序?
30 | 实战(五):怎么设计一个“画图”程序?
31 | 辅助界面元素的架构设计
课外阅读 | 从《孙子兵法》看底层的自然法则
加餐 | 想当架构师,我需要成为“全才”吗?
32 | 架构:系统的概要设计
33 | 桌面开发篇:回顾与总结
服务端开发篇 (14讲)
34 | 服务端开发的宏观视角
35 | 流量调度与负载均衡
36 | 业务状态与存储中间件
37 | 键值存储与数据库
38 | 文件系统与对象存储
39 | 存储与缓存
40 | 服务端的业务架构建议
41 | 实战(一):“画图”程序后端实战
42 | 实战(二):“画图”程序后端实战
43 | 实战(三):“画图”程序后端实战
44 | 实战(四):“画图”程序后端实战
45 | 架构:怎么做详细设计?
46 | 服务端开发篇:回顾与总结
加餐 | 如何做HTTP服务的测试?
服务治理篇 (11讲)
47 | 服务治理的宏观视角
48 | 事务与工程:什么是工程师思维?
49 | 发布、升级与版本管理
50 | 日志、监控与报警
加餐 | 怎么保障发布的效率与质量?
51 | 故障域与故障预案
52 | 故障排查与根因分析
53 | 过载保护与容量规划
54 | 业务的可支持性与持续运营
55 | 云计算、容器革命与服务端的未来
56 | 服务治理篇:回顾与总结
架构思维篇 (8讲)
57 | 心性:架构师的修炼之道
用户故事 | 站在更高的视角看架构
58 | 如何判断架构设计的优劣?
59 | 少谈点框架,多谈点业务
60 | 架构分解:边界,不断重新审视边界
加餐 | 实战:“画图程序” 的整体架构
61 | 全局性功能的架构设计
62 | 重新认识开闭原则 (OCP)
许式伟的架构课
登录|注册

31 | 辅助界面元素的架构设计

许式伟 2019-08-06
你好,我是七牛云许式伟。
我们第二章 “桌面软件开发” 今天开始进入尾声。前面我们主要围绕一个完整的桌面应用程序,从单机到 B/S 结构,我们的系统架构应该如何考虑。并且,我们通过五讲的 “画图” 程序实战,来验证我们的架构设计思路。
这个实战有点复杂。对于编码量不多的初学者,理解起来还是有点复杂性的。为了减轻理解的难度,我们从原计划的上下两讲,扩大到了五讲。尽管如此,理解上的难度仍然还是有的,后面我们做总结时,会给出一个不基于 MVC 架构的实现代码。
今天我们不谈桌面应用的架构,而是来谈谈辅助界面元素的架构设计。
辅助界面元素非常常见,它其实就是通用控件,或者我们自定义的控件。例如在我们画图程序中使用了线型选择控件(menu.js#L105),如下:
<select id="lineWidth" onchange="onIntPropChanged('lineWidth')">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="9">9</option>
<option value="11">11</option>
</select>
还有颜色选择控件(menu.js#L115),如下:
<select id="lineColor" onchange="onPropChanged('lineColor')">
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="gray">gray</option>
</select>
<select id="fillColor" onchange="onPropChanged('fillColor')">
<option value="white">white</option>
<option value="null">transparent</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="gray">gray</option>
</select>
我们统一用通用的 select 控件实现了一个线型选择器、两个颜色选择器的实例。虽然这种方式实现的颜色选择器不够美观,但是它们的确可以正常工作。
不过,产品经理很快就提出反对意见,说我们需要更加用户友好的界面。赶紧换一个更加可视化的颜色选择器吧?比如像下图这样的:

辅助界面元素的框架

取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《许式伟的架构课》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(9)

  • humor
    膜拜大神,感觉难懂的原因是这个例子有点太大了,功能点比较多,不是一下子就能消化得了的,需要静下心来思考,尤其是不太懂js的同学。不经意看到了许老师的代码提交记录,有时候凌晨两三点,早上5点多还在为我们准备代码,认真负责的态度令人折服,许老师平时也是晚睡晚起的夜猫子类型么~
    2019-08-16
    1
    4
  • Frank
    感觉从实战开始 很多知识点都很晦涩 不好理解

    作者回复: 直接说说是哪些地方?

    2019-08-07
    1
    2
  • Geek_88604f
    这个厉害了,从来没有想过控件的开发也能和MVC架构扯上关系。看来不管多小的特性开发都要先想清楚代码的结构,麻雀虽小,五脏俱全。感谢许老师!
    2019-08-18
    1
  • Taozi
    v31分支代码有点问题(添加第1个shape时,post上去的changes部分是空的{"shapes":["1"],"changes":[],"ver":1}),果不其然删除这个shape程序就发生异常了

    作者回复: 多谢,我看下。
    补充回复:今天花时间复现了该bug。严格来说不算bug,之所以出现这类情况,是因为服务端被重启后丢失数据(目前服务端是mock的),而客户端的cache里面还有这份文档。而我们在生成文档的id的时候是固定的10001开始,所以导致两份文档有相同的id,客户端对changes的判断就出现了偏差。这个问题修复的方式可以是:
    1. 改程序。让服务端生成文档id不是10001这类,而是一个uuid。
    2. 不改程序,不把它当bug。那么最简单的就是清空浏览器 localhost:8888 的 localStorage。这个一般浏览器的开发者工具都可以做到。

    2019-08-14
    1
  • Geek_88604f
    哪个获得焦点就显示哪个的URL
    2019-08-08
    1
    1
  • 小乙哥
    做为后端同学看这几节课有点吃力,老师也什么好的建议吗?谢谢

    作者回复: 前端其实比后端要简单直接,可以适当实战感悟一下就容易理解。

    2019-10-23
  • 哈哈先森
    示例程序有点大,要是有个图描述下结构,可能就容易理解一些了
    2019-09-08
  • MinRong.Fu
    使用FireFox浏览器,为什么线宽、线的颜色和填充颜色出不来?

    作者回复: 我测试了 FireFox Quantum 69.0 (64 位) 版本,没有重现你的问题。考虑到这个只是demo,对于浏览器兼容性考虑不是很多,建议升级下浏览器版本。

    2019-08-15
    2
  • Aaron Cheung
    系统搞一搞js 打卡31
    2019-08-07
收起评论
9
返回
顶部