理解 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 代理服务器接管他们浏览器的流量。

这种形式的代理这也叫做正向代理。和反向代理最大的不同之处在于,正向代

理必须在客户端进行设置,客户是有感知的。由于多了这步设置操作,可以在

一定程度上限制基层工作人员在家接入业务系统。

本着简单、快速的原则,我尝试了可以在 Windows 环境下使用的两种方法,

最终选择 NPS 作为 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 入门

前端工具的逻辑

Photo by Jeffrey Lee on Unsplash

前端程序开发中会接触到多种多样的工具,让人眼花缭乱。有人甚至做了网站

来罗列常用的前端工具。这两天本人梳理了一下常用的前端工具,按功能不

同,将它们分为代码转译、代码构建工具、代码风格统一、代码提示与单元测

试工具五大类。

继续阅读前端工具的逻辑

Angular 结构型指令原理

Photo by Olivier Collet on Unsplash

声明

本节内容假设您具有基本的组件概念、了解 Angular 内置组件的基本用法以及

结构型指令与属性型指令的区别。

前言

在 Angular 入门系列教程中,已经提到 Angular 的一些内建指令。其中利用

内建的结构型指令,我们可以方便地来控制视图的创建和销毁。本文从 ngIf 源

码入手,带你了解 ngIf 的解析过程、页面视图增删原理,从而掌握动态增删视

图的基本方法。

继续阅读Angular 结构型指令原理

Angular 路由快速教程

Photo by Harley-Davidson on Unsplash

声明

这个教程的目标是让初学者快速掌握 Angular 路由的基本使用方法,避免复杂

的概念影响对路由基本用法的认识,因此只涉及路由模块导入、路由匹配算

法、路由跳转指令,并不涉及守护路由、子路由,解析路由(resolver),路

由参数的获取等高级路由知识 。

前言

路由是一个 Web 应用不可缺少的一环, 路由的存在可以让用户对应用中感兴

趣的内容进行收藏方便下次访问。 在单页应用程序(SPA)中,路由必须由前

端来处理。Angualr 提供了功能强大的路由模块,可以帮我们完成复杂的页

面路由需求。

对于一个正常的 Web 应用来说,当一个路由发生时,会触发两个方面的变化,

一是浏览器中的地址会发生改变,二是页面局部或者全部会发生改变。

为了做到这两点,Angular 通过监听浏览器地址的改变来触发页面的渲染。这

其中的关键要数 “占位符” 和路由匹配的用法!

那就让我们开始吧~

继续阅读Angular 路由快速教程

Agular 组件交互(三)投影

Photo by Cristofer Jeschke on Unsplash

前面介绍了 Angular 如何利用 @Input @Output 来提高组件的复用性。

但是 @Input @Output 只解决了组件中控制层数据复用的问题,

但是在很多场合,我们需要解决组件中视图层的复用问题。

我们希望能将父组件的某组内容嵌入在子组件中,由子组件负责展示。

对于这个问题,Angular 提出了投影(project)的概念。

继续阅读Agular 组件交互(三)投影