Angular 指令快速入门

Photo by Daniel Radford on Unsplash

声明

本文重点不再讨论 Angular 中内置指令以及如何自定义指令。而是想让读者知

道 Angular 中指令的作用,它解决了什么问题,以及指令与组件的区别。

何为指令

Angular 中指令是一个非常特殊的存在,从使用方法来看,指令类似元素的一

个自定义属性,为元素或者组件提供特定的功能。在大多数场景下,指令不对

作用的宿主元素本身的类型做任何假设,它无需知道宿主元素中包含了那些内

容,宿主元素上有哪些属性,也不依赖宿主上的其他功能。换句话说,若我们

想给 HTML 元素或者组件拓展某项功能,且这项功能相对独立,就可以采用指

令来实现。

继续阅读Angular 指令快速入门

小型虚拟主机 MariaDB 配置

Photo by K. Mitch Hodge on Unsplash

当虚拟主机内存小于 1G 或者更小时,往往会遇到 MariaDB 数据库挂掉之后

不能由守护进程再次拉起,后台日志显往往如下所示显示内存不足的提示。这

也是 WordPress 在小型虚拟机上部署会遇到最大的问题。

InnoDB: Fatal error: cannot allocate memory for the buffer pool

这种现象在分配虚拟内存之后故障发生率会明显降低,但是仍会偶发。目前最

好的解决方法是在 MariaDB 配置文件中,在字段中 [mysqld] 块中关闭

[mysqld]  
performance_schema = off

这是因为 performance_schema 会在数据库启动时占用大约 400 MB 左右的

内存。这对小型虚拟主机来说非常重要,关闭这个选项可以精简数据库启动时

需要的内存资源。

实践也证明,经过这次修改,我的 WordPress 应用稳定了非常长的时间。

参考链接

Starting MySQL On Low Memory Virtual Machines

Angular 动态创建嵌入式视图

Photo by James Coleman on Unsplash

声明

本篇为 Angular 中相对高级的教程,涉及到了结构性指令、生命周期重要概

念。建议这块不熟悉的读者可以看看 Angular 结构型指令 NgIf 原理 ,这篇文

章中我结合源码对 Angular 指令中的黑魔法做了解析。

视图

Angular 中视图是一个重要的概念。从源码角度来看,Angular 中的视图是包

含页面结点(DOM)与在此之上的绑定(数据)的结构体,通过视图 Angular

将变量与页面结点进行关联,从而可以在执行变更检测等操作时实现控制层数

据与页面结点的联动,这也也是绑定 (binding)这一术语的由来。

继续阅读Angular 动态创建嵌入式视图

Angular 指令之 NgFor 教程

声明

NgFor 内建指令可以帮助开发者快速迭代某个数组来创建多个 DOM 元素。在

实际开发中,我发现全面掌握 NgFor 的用法可以很好地帮助我们应对更加复杂

的场景,甚至能实现性能的提升。此教程中涉及到了 Angular 变化检测机制的

内容,对于这一部分感兴趣的朋友可以参看我其他的博文

继续阅读Angular 指令之 NgFor 教程

理解 CSS 中 height 与 width

Photo by Peter Thomas on Unsplash

CSS 中 height 与 width 是初学者比较容易误用的属性。在实际使用这过程

中,我发现其实它们的用法涉及到了两个基本的概念:盒子模型与元素类型。

对于开发者来说,只有明确了这两个概念的定义,才能掌握 height 与 width

的用法。

继续阅读理解 CSS 中 height 与 width

搭建最简单的 HTTP 代理服务器

Photo by Wengang Zhai on Unsplash

HTTP/HTTPS 代理本质上是正向代理的一种。和反向代理最大的不同之处在

于,正向代理必须在客户端进行设置,客户是有感知的,比如客户使用 VPN 接

入内网就是正向代理。而反向代理一般在服务器端配置,客户是没有感知的,

常用于应用后端中。本着简单、快速的原则,我尝试了可以在 Windows 环境

下使用的两种方法,最终选择 GoProxy 来搭建一个 HTTP 代理服务器。

继续阅读搭建最简单的 HTTP 代理服务器

浅谈 Angular 变化检测机制

Photo by Roman Kraft on Unsplash

声明

变化检测(Change Detection)也叫脏值检测(Dirty Detection),都是指

Angular 中检测组件中数据变化的机制。由于变化检测与 Angular 若干生命周

期有很强的关联,本文会结合两者做出说明。

继续阅读浅谈 Angular 变化检测机制

Zone.js 源码初探

声明

本文假设读者已经了解 Zone.js 的基本用法,明白 Zone.js 需要解决的问题。

需要学习或复习的读者可以参看我的另一篇文章 Zone.js 入门

初识 Zone.js

Angular 仓库下的那个 Zone.js 中的例子有点小小的问题。因此这边,我 fork

了一份原作者的仓库进行学习研究。Zone.js 本身是由 TypeScript 写就,通过

Gulp + Rollup 的方式进行构建,这块应用比较复杂,这里我们只需重点关注

dist文件夹下最终编译合并后的 zone.js 。这份代码对应了源码中多个不同的

TS 文件,我们可以参考一个简单的例子,来共同探寻 Zone.js 源代码的秘密。

继续阅读Zone.js 源码初探

Zone.js 入门

Photo by Sebastian Unrau on Unsplash

声明

本文是 Zone.js 源码解析的前置章节。在这里,我会简单介绍 Zone.js 要解决

的问题、简单原理以及基本用法。我相信这是我们探索源码前的必备工作。假

如您已经有了 Zone.js 的相关应用经验,就可以轻松加愉快的直接略过本章,

和我一起来探索 Zone.js 的具体实现。

继续阅读Zone.js 入门