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

Angular 路由——实现认证登录

Angular 路由 CanActive 属性可以帮助我们在此实现一些逻辑,来决定用户是否可以访问这个路由。它也是路由守卫的一种。

CanActive

CanActive 属性对应的是一个实现了 CanActive 接口的服务。这里是 AuthGuard。

AuthGuard 在实现 CanActive 接口中返回一个布尔值(或相关其他重载)来告诉 Angular 是否应该激活这个路由。

参考链接

CanActive 官方文档

Angular 自定义双向绑定

ngModal 是 Angular 最常用接触到的双向绑定的语法。但是如何自定义一个双向绑定?在 Angular 中,我们可以很方便地使用内置语法来实现。

自定义双向绑定

双向绑定其实是属性绑定和事件绑定的语法糖。。若我们在组件中定义了这样两个形式的变量: @Input() xxx 和 @Output() xxxChange。

那么我们采用如下方式在这个组件上使用双向绑定语法。

Angular 在模板解析的时候会自动将此语法展开,如下所示。

(完)

参考链接

Create your own two-way data binding in Angular

前端工程师移动应用开发入门指南

前端工程师开发移动应用,首先需要厘清的就是当前移动应用开发的技术路线。目前主流的方法有渐进式 Web 应用和混合应用两种方式。

渐进式 Web 应用

渐进式 Web 应用( Progressive Web Application,简称 PWA )是一种完全基于浏览器的技术。通常在浏览器首次访问 PWA 之后,用户只要将页面固定在移动端桌面上,下次直接从桌面打开进行访问即可。但是 PWA 和普通 Web 应用的不同点在于,它在离线模式下仍能进行访问。其中的关键技术是 Web App ManifestService Worker。前者用于管理应用的资源,后者用于管理应用系统的缓存,以达到离线加载的目的。

混合应用

混合应用(Hybrid)是一种依托于 WebView (一种全屏的内置浏览器)和原生应用容器的开发技术。原生应用容器用来承载 WebView, 而 WebView 用来展现 HTML/CSS/JS 组合而成的前端内容。Ionic 就是目前流行的、用来开发混合应用的框架。

参考链接

Progressive Web Apps

TensorFlow Node 环境搭建入门

Photo by Artur Łuczka on Unsplash

准备工作

代理设置

大陆开发者若想使用 TensorFlow 的 Node 版本—— tfjs-node 不是件容易的事情。这是因为在 npm 安装过程中,需要 TF 的二进制文件。而由于此文件挂载在 Google Cloud Storage 上,因此需要设置代理方能下载。假如使用 VSCode,可以按照如下方式设置代理。设置完之后记得把代理软件设置为全局模式,并重启 VSCode。

继续阅读TensorFlow Node 环境搭建入门