Angular 变更检测 – 深入 OnPush

Photo by Manson Yim on Unsplash

普通策略组件中,引用和事件都会触发 Angular 变更检测。这种策略下,Angular 不会去判断是否应该做而是直接做,因此在一些数据变更比较频繁的场景会有效率问题。为了解决这个难题,OnPush 策略应运而生。在 OnPush 变更检测策略下,引用和部分事件的变化并不会引起变更检测,具体来说:

引用变化

若输入数据的引用没有发生改变,那么这个组件仍然不会触发变更检测更新视图。可以使用 immutable-js 来避免输入数据的引用没有发生变化,从而确保变更检测的发生。

事件触发

和采用 Default 策略的普通组件不同,在 OnPush 策略下,部分事件的触发,并不会主动触发变更检测。包括:setTimeout、setInterval、 Observable、Subscription、Promise.resolve().then() 、 Promise.reject().then() 。

继续阅读Angular 变更检测 – 深入 OnPush

Jenkins + Harbor 容器化持续集成

Photo by Rory McKeever on Unsplash

使用 Jenkins + Harbor 持续集成方案可以在代码仓库有提交时自动对代码进行编译并打包成容器,上传到本地 Harbor,之后 Jenkins 执行 SSH 命令远程控制生产环境从 Harbor 拉取最新容器并运行。

安装 Jenkins 与 Harbor

两者安装文档比较详细。目前主流都是通过 docker 进行部署。

流水线配置

Jenkins 流水线是将一系列动作放在一个配置中完成。在我的场景中我希望做到两点。一是流水线能够由 Git 仓库自动触发动作,自动完成代码的编译和镜像的制作上传。二是在流水线脚本中能够使用 SSH 命令远程访问生产环境主机做拉取容器镜像的操作。

继续阅读Jenkins + Harbor 容器化持续集成

最全 Node 项目 TypeScript 配置

Photo by Lucas Benjamin on Unsplash

此文包含:TypeScript 配置、Nodemon 配置、VSCode 调试配置。

TypeScript 配置

在配置文件 tsconfig.json 中可以指定目标输出、项目根目录路径等,指定 sourceMap 为真方便调试。

Nodemon 配置

可以单独开辟一个 nodemon.json 文件描述配置。这里采用 ts-node 和 path/register 来解决 tsconfig.json 中 baseUrl 不是当前目录的问题。

然后你可以在 NPM Script 中方便的使用 nodemon 来启动项目。

继续阅读最全 Node 项目 TypeScript 配置

模板驱动与响应式表单区别

Angular 提供了响应式与模板驱动两种方式来处理表单数据,两者的区别在于:

模板驱动表单

1.使用简单。模板上直接使用双向绑定即可。

2.由于第一点,因此组件上的代码就会相应减少。

3.适用于简单表单及简单场景。

4.不利于单元测试

响应式表单

1.使用比较麻烦。

2.代码集中于组件上。

3.适用于复杂表单及场景。

4.更利于单元测试。

参考链接

What are the practical differences between template-driven and reactive forms?

What are the differences between template driven forms and reactive forms in angular 2

Angular 路由——实现样式切换

在登陆界面可能我们想要样式 A,在登录后的仪表盘界面我们想要样式 B。在 Angular 中,我们可以通过路由机制来实现这个效果。

路由与子路由实现样式切换

路由的本质上是 URL 到组件的映射。对于不同样式,我们可以把它分别设计为不同的组件。然后可以把同一个样式的页面放到对应样式中作为子组件。最后通过路由进行映射,实现不同样式页面的共存。

具体来说,针对不同的样式编写不同的组件,顶层通过单个 <routoulet> 实现不同样式组件的导航。在样式组件中再次放置<routoulet>,并通过子路由的形式把相关的组件映射到这个样式组件中,如下所示。

这个在线例子通过这种方法实现不同样式间页面的切换。

参考链接

How to switch layouts in Angular2