作者: Phodal Huang in 杂谈 2018年8月8日 22:42

为了在我的编辑器中使用 Angular，我用 Angular 编写了一个重命名功能。而为了使用它，我得再次使用一次 customEvent，而在这个微前端架构的系统中，其事件通讯机制已经相当的复杂。在这部分的代码进一步恶化之前，我得尝试有没有别的方式。于是，我想到了之前在其它组件中使用的 Web Components 技术，而 Angular 6 正好可以支持。

作者: Phodal Huang in 杂谈 2018年8月5日 15:34

微应用化即在开发和运行时，应用都是以单一、微小应用的形式存在。

微应用化与微前端架构相当的类似，它们在开发时都是独立应用，在构建时又可以按照需求单独加载。如果以微前端的单独开发、单独部署、运行时聚合的基本思想来看，微应用化就是微前端的一种实践。只是使用微应用化意味着：我们只能使用唯一的一种前端框架。如果从框架不限的角度来定义，怕是离微前端有些远，不过大团队怕是不会想同时支持多个前端框架。

作者: Phodal Huang in 杂谈 2018年7月30日 20:44

最近，我在写一个新的 markdown 内容，过程中发现没有合适的 markdown 客户端。于是，我希望为自己定制一款全新的编辑器，原因有许多吧，大抵是没有一个编辑器能满足我的需求。

作者: Phodal Huang 2018年7月15日 19:58

在之前那篇《实施前端微服务化的六七种方式》中，介绍了在实施微前端的过程中，我们采用的一些不同方案的架构方案。在这篇文章中，我将总结如何依据不同的情况来选择合适的方案。

作者: Phodal Huang 2018年7月12日 20:52

这一系列的问题，让我觉得特别不开心，我浪费了大把地青春在等后端写代码。而联想起很早以前的全功能型团队，我不禁要写一篇文章吐槽一下，WTF，前后端分离团队的资源浪费。

作者: Phodal Huang 2018年7月9日 20:03

每年，在这个时候，充满了悲欢离合，也总能看到各种活蹦乱跳的小鲜肉。我们毕业了，我们开始赚钱了，我们踏上了一条不归路……。结束一段旅程，开始填新的坑，或者挖一个坑。我总习惯性的会做一些“反省”、总结的文章，它可以帮助我重新回到 “正轨” 上，指出到下一阶段我所需要的内容。

作者: Phodal Huang 2018年7月2日 20:50

微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

本文将继 《实施微前端的六种方式（上）：三种借助路由微服务化前端应用 》后，介绍其中的三种方式。

作者: Phodal Huang in 翻译 2018年7月2日 20:37

微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

作者: Phodal Huang in DSL 2018年6月25日 21:22

最近的一些日子里，又陷入了平凡、无聊、繁琐的业务代码开发中，生活变得无比的枯燥。每天面对着大量重复、而又没有办法得胜的代码，总会陷入忧虑之中。

而在实现几个重复的业务代码时，我发现了一个更好的方式，使用领域特定语言。

作者: Phodal Huang in 杂谈 2018年6月20日 20:30

在前端应用中，动画是一个常见的场景。在使用了一系列的动画库之后，终于需要自己来实现一个动画了。这次的动画则是基于 Angular 框架。我的场景是一个类似于添加购物车的动画。在这个场景里，需要两个动画，一个是购物车数量的增加动画，一个则是折叠页面元素的动画。 在实现的过程上，我采用了两种不同的 Angular 动画的方式： - 使用 TypeScript 控制动画 - 使用 @Component 中的 animations Angular 动画基础 --- 如 Angular 官网中的示例那样，要在 Angular 应用中添加动画是比较简单的一件事——前提是我们懂得添加的法则。如下是官网的示例： ``` @Component({ selector: 'app-hero-list-basic', template: `

• {{hero.name}}

`, styleUrls: ['./hero-list.component.css'], animations: [ trigger('heroState', [ state('inactive', style({ backgroundColor: '#eee', transform: 'scale(1)' })), state('active', style({ backgroundColor: '#cfd8dc', transform: 'scale(1.1)' })), transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out')) ]) ] }) ``` 要使用动画，需要在模板中使用 ``[@heroState]``语法，这里的 ``heroState`` 对应着 ``@Component`` 中的 ``heroState`` 相关的动画。 - 在这个 ``trigger`` 中，我们定义了 ``inactive`` 和 ``active`` 两个不同的 ``state``。即当模板中的 ``hero.state`` 发生变化的时候，我们就会找到对应的 ``state`` 的样式等等的内容。 - 在这个 ``trigger`` 中，我们还定义了两个 ``transition``，即当我们的 ``state`` 从 ``inactive => active`` 或者 ``active => inactive`` 时，我们就会执行后面的动画。 原理上，大概就是这么多了。然后，我就开始了我的动画之旅。 购物车数量增加动画 --- 对于我的场景来说，要添加这个动画并不难。无非就是上一个值淡出，新的值淡入： ``` trigger('count', [ transition('void => current', [ animate( '400ms 150ms', keyframes([ style({ opacity: 0.6, transform: 'translateY(0)', offset: 0 }), style({ opacity: 0.3, transform: 'translateY(-15px)', offset: 0.5 }), style({ opacity: 0, transform: 'translateY(-30px)', offset: 1 }) ]) ) ]), transition('void => last', [ animate( 250, keyframes([ style({ opacity: 0, transform: 'translateY(100%)', offset: 0 }), style({ opacity: 0.3, transform: 'translateY(15px)', offset: 0.5 }), style({ opacity: 0.8, transform: 'translateY(0)', offset: 1.0 }) ]) ) ]) ]) ``` 代码就是这么简单，这里用到了关键帧 ``keyframes``，来进行一些简单的动画转换。 页面缩放动画 --- 随后，我需要做的就是对页面的元素进行缩放等效果，这个时候就需要用到 AnimationBuilder 来实现了： ``` const myAnimation = this.animationBuilder.build([ animate( 1000, keyframes([ style({ opacity: 0.8, transform: 'scale(0.8)', offset: 0.3 }), style({ opacity: 0.3, transform: 'scale(0.3)', offset: 0.5 }), style({ opacity: 0.2, transform: 'scale(0.2) translate(12000px, 8000px)', offset: 1 }) ]) ) ]); const player = myAnimation.create(forkFormComponent); player.play(); player.onDone(() => { const nativeElement = this.cartContainer.nativeElement; nativeElement.removeChild(nativeElement.childNodes[0]); this.renderer.setStyle(nativeElement, 'display', 'none'); }); ``` 在那之前，我先复制了页面元素： ``` const formElement = this.formElement.nativeElement; const forkFormComponent = this.cartContainer.nativeElement; forkFormComponent.appendChild(formElement.cloneNode(true)); this.renderer.setStyle(forkFormComponent, 'display', 'block'); this.renderer.setStyle(forkFormComponent, 'position', 'absolute'); this.renderer.setStyle(forkFormComponent, 'top', '-300px'); this.renderer.setStyle(forkFormComponent, 'left', '0'); ``` 这样一来，就能复制页面的 DOM，然后实现缩放效果了。