作者: Phodal Huang 2018年5月12日 11:40

结束了五一国庆的八天假期后，便开始着手为微信小程序《代码协作》制作一个图片识别代码的功能。这个需求的主要来源是，在有的公司、组织、团队上，代码是不能直接拷贝出来的。但是，拍照是允许的。为了协作方便，一般会拍照在微信群里讨论。对于我而言，因此这样一个真实需求的存在，我便想试试能不能做这样的一个功能。

作者: Phodal Huang 2018年5月12日 09:44

之前做过一个 Angular 下的路由重用，即记录 SPA 应用的上一个页面的内容。最开始的时候，并没有考虑 Lazyload，因此实现起来就比较简单： ``` export class SimpleReuseStrategy implements RouteReuseStrategy { public static handlers: { [key: string]: DetachedRouteHandle } = {}; public shouldDetach(route: ActivatedRouteSnapshot): boolean { return true; } public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { SimpleReuseStrategy.handlers[route.routeConfig.path] = handle; } public shouldAttach(route: ActivatedRouteSnapshot): boolean { return !!route.routeConfig && !!SimpleReuseStrategy.handlers[route.routeConfig.path]; } public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { if (!route.routeConfig) { return null; } return SimpleReuseStrategy.handlers[route.routeConfig.path]; } public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { return future.routeConfig === curr.routeConfig; } } ``` 后来项目中添加了 Lazyload，因此便添加了一个 reusePath 的参数来控制是否缓存，最后实现如下： ``` export class SimpleReuseStrategy implements RouteReuseStrategy { public static handlers: { [key: string]: DetachedRouteHandle } = {}; public shouldDetach(route: ActivatedRouteSnapshot): boolean { if (!!route.data && !!route.data.reusePath) { return true; } return false; } /** 当路由离开时会触发。按reusePath作为key存储路由快照&组件当前实例对象 */ public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { SimpleReuseStrategy.handlers[route.data.reusePath] = handle; } /** 若 path 在缓存中有的都认为允许还原路由 */ public shouldAttach(route: ActivatedRouteSnapshot): boolean { if (!!route.data.reusePath && !!SimpleReuseStrategy.handlers[route.data.reusePath]) { return true; } return false; } /** 从缓存中获取快照，若无则返回nul */ public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { if (!!route.data && !!route.data.reusePath) { return SimpleReuseStrategy.handlers[route.data.reusePath]; } return null; } /** 进入路由触发，判断是否同一路由 */ public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { if (future.data && curr.data && future.data.reusePath && curr.data.reusePath) { return future.data.reusePath === curr.data.reusePath; } return false; } } ``` 为了保存路由，需要单独额外的 在 Routing 里 添加一个 key ： ``` const routes: Routes = [ { data: { reusePath: 'hello/hello' }, path: 'hello/hello', loadChildren: './hello/hello.module#CheckinModule' } ] ```

作者: Phodal Huang 2018年5月11日 07:46

最近几天，博客所使用的 EC2 服务器一直不稳定。最开始，我以为是又双双叕叕叕敠被攻击了。

作者: Phodal Huang in 杂谈 2018年4月24日 21:33

前几天，在使用 Serverless 技术做一个微信小程序，期间遇到一个需要用户登录的接口。于是，便使用 Serverless 简单的写了一个中转 API。

作者: Phodal Huang in 杂谈 2018年4月23日 20:17

想来，我已经用 TypeScript 已经有一段时间了，它可以算得上是前端领域的一门 “平淡生活” 的语言。

平淡生活，我的意思是：生活可以从此多一点乐趣——毕竟 bug 少了一些。

作者: Phodal Huang in microservices 2018年4月10日 22:09

还在担心后端 API 变更对前端的影响？快来使用 mest

作者: Phodal Huang in 杂谈 2018年4月8日 21:01

在去年的一年里，我经历了一次 “升职”：从一个咨（cheng）询（xu）师（yuan）变成了一个高级咨询师。Title 变了，就意味着工作的内容也会发生一些变化。从拒绝升职，到被说服升职，我的一些想法发生了一些改变，开始考虑一些职业生涯的技能。

作者: Phodal Huang in microservices 2018年3月31日 11:26

Angular 基于 Component 的思想，可以让其在一个页面上同时运行多个 Angular 应用。而在这其中最麻烦的就是第三方模块冲突问题，那么 iframe 呢？

作者: Phodal Huang in microservices 2018年3月26日 23:04

Mooa 是一个为 Angular 服务的微前端框架，它是一个基于 single-spa，针对 IE 10 及 IFRAME 优化的微前端解决方案。

作者: Phodal Huang 2018年3月25日 11:14

过去的几周里，作为一个 “专业” 的咨询师，一直忙于在为客户设计一个应用拆分的服务化方案。主要是为了达成以下的设计目标：

• 构建插件化的 Web 开发平台，满足业务快速变化及分布式多团队并行开发的需求
• 构建服务化的中间件，搭建高可用及高复用的前端微服务平台
• 支持前端的独立交付及部署