几年前我还是一名设计师，那时候刚毕业，作品集基本是导出PDF，或是放在比如Behance和国内一些设计网站上，当时还不知道如何更好地向面试官展示自己的作品集，看到国内外一些设计师可以说是开发设计内外兼修，能不受产品经理和运营的束缚，自己写个设计风格独特的网站，再放上自己的作品，别提有多羡慕了。
后来我就阴差阳错地成为了一名前端开发，觉得自己有能力写一个作品集网站了！但我又不是一名设计师了，把网站设计得再好看也白搭。不过偶尔还是会想起这个事，干脆就一不做二不休，写了MacSim这个网页，恰好也可以把自己开发过的东西放上去给面试官参考。
太久没碰设计，终归是无从下手，此时手持macbook，看着Dock入神，不如直接写个网页版的Dock，于是从Dock开始写起，一点点完成了这个网站：MacSim
（这里建议各位尽量使用PC端全屏体验，移动端减少了很多动效，并且一些App并没有适配网页端，体验效果大打折扣）
MacSim的设计上并没有完全跟macOS一模一样，其实是随心而写，没有提前画设计稿，基本想到哪就是哪，但主要参考了Dock和标题栏圆形按钮的设计，只看Dock其实还有那么点味道了。
为了开发过程各部分 UI 统一，项目几乎开发了一个小型 UI 组件库(EphraimUI)，除了系统相关的组件外，还有按钮/图表/分割线/空状态/图标/图片/对话框/浮窗/遮罩轻提示/文件上传/瀑布流和动态表单等等，因为使用的是Angular框架，在Typescript强类型要求下基本所有组件都有够用的属性，想要投入生产，其实就差写个UI组件库文档了。
花费在Dock上的开发时间比较多，大概是用了两天左右，一直在不断调整Dock的放大波浪动效。仅用css的话，最多只能做到鼠标移在图标上，单个图标放大，这样的效果跟macOS上的Dock相比，差别非常大，macOS上的放大效果，是非常顺滑的，且连带其他图标一块放大，有一度我甚至怀疑网页真的有办法实现macOS的Dock波浪效果吗？实际上研究了一下Angular的动画实现，其实并不算特别复杂，无非是不断监听鼠标在Dock上的移动，各个图标根据自身位置和缩放公式不断调整自己的大小。
另外Dock还有一个最小化动画，在macOS叫「神奇效果」，以我的能力是没法靠css实现这个效果了，不过至少还是做了点击窗口最小化按钮，精确将App窗口最小化到Dock上的图标（完成这个效果后心情真的无比舒畅，可能是把坑踩完后另外成就感满满，各位看到这里不妨先体验一下Dock的波浪效果和最小化动画：MacSim）
MacSim上的App，都是放在一个叫AppFrame的组件内运行，编写一个新的App只需要编写App的内部逻辑，诸如窗口缩放、拖动、最小化/最大化、窗口动画、激活层级判断、App运行状态等等，都交给AppFrame以及AppService控制，实际操作一下能感受到各个App窗口逻辑的高度统一。另外AppFrame内可放其他网页，也就实现了在MacSim上能把一些神奇的网页放到App里，比如实现在P图（Photopea），写代码（vscode），玩游戏，我甚至写了个简单的浏览器，支持多标签管理和历史记录等等，另外还写了一个App专门放我之前做设计师时候的作品集，算是圆了一个小小的梦吧。
MacSim中的App之间能够通过AppService互相协作，比如在待办事项App中添加的待办事项，可以在日历App中同步，这里还简单做了一个类似任务管理器的App，可以监控本页面的资源占用情况（window.performance.memory中的数据）以及正在运行/未运行的App，甚至还有一个有意思的终端！
实际上，你真的能在MacSim中写点代码，P点图，而且功能相当完善，甚至可以玩玩贪吃蛇游戏。另外各位读者如果有类似好用的网站，比如vscode和photopea这样的，不妨在评论中告知，有意思的网页我会加入MacSim，感谢！
在MacSim中，可以打开浏览器再次访问MacSim，然后再次访问MacSim，无限套娃...
考虑到成本问题，MacSim并没有真正的接口请求，取而代的是 MockDatabase 服务，服务定义了 insert、delete、select、update 等用于增删查改的方法，每次操作都更新本地缓存。另有用于管理接口的 Api 服务，Api 服务中定义了项目需要使用的接口，模拟后端给前端提供的 Api 接口和前请求调用的流程。所以刷新下网页可以发现，在MacSim中操作的用户信息，壁纸，待办事项等等，其实都是有保留数据的。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。