Keefe's Café

快速上手

Angular - Angular 入门：你的第一个应用

首先跟随 Angular 官方文档的快速上手部分进行一个简单项目的代码编写尝试和 Firebase 部署。该示例项目中包括了对

• 模板语法（的一些基本特性 ngFor、ngIf、差值双花括号、属性绑定[]、事件绑定()）
• 组件（由一个组件类、一个 HTML 模板和组件专属样式表组成）
• 父组件向子组件输入信息（@Input）和输出（@Output、EventEmitter）
• 路由（在 app.module.ts 中注册路由、routerLink 属性、通过 ActivatedRoute 作为构造函数参数来使用 this.route 对象）
• 管理数据（通过创建 service 类对数据进行管理，service 在引用后需要作为参数传入构造函数）
• 数据获取（使用 Angular 内置的 HttpClientModule 类实例 http 作为参数传入构造函数后，可以使用 this.http 对象请求数据）
• 表单（使用内置的 FormBuilder 构建表单模型）
• 构建和部署（ng build、firebase 部署）

Introduction to TypeScript

• TypeScript is a super set of JavaScript. 一个没有任何预发错误的 js 文件也可以被 ts 正常编译。
• TS 一般会支持到 JS 未来版本 stage3

问题一：为什么网站（网页应用）需要有登录的功能？
问题二：Cookie 到底是个什么东西？
问题三：Cookie 是怎样告诉服务器”是谁发送的请求“？
问题四：Cookie 和 Session 验证之间有什么不同？
问题五：Session 又是什么？

JavaScript 中的值的分类

JavaScript 中的值可以分为原始类型和复杂类型（对象）：

• 原始类型
  • Boolean - true 或 false
  • null - 用 type of 检验 null 数据类型时为 Object ，但它不是对象，这是JS的一个bug
  • undefined
  • number - JavaScript中的所有数字都是浮点数，没有整数
  • string
  • symbol (ES6)
• 复杂类型（对象）
  • 原始类型的包装对象（Boolean、Number、String）
  • 内置对象（Date）
  • 用户创建对象

本文主要针对 JavaScript 类的各种设计模式实现进行简单总结和举例。

字面量

1
2
3
4
5
6
7

var BMW = {
	type: 'Car',
	color: 'White',
	run: function () {
		console.log('BMW start!');
	}
}

当一个事物拥有有限多种状态，任一时刻只处于一种状态，而且在某种条件下可以从一种状态转变为另一种状态，满足这三个条件就可以被抽象成为一个有限状态机。当一个对象的状态越多、状态转换的事件越多，就越适合使用状态机来实现。

“javascript-state-machine”是一个很好用的有限状态机函数库。

为了引入本文要讨论的内容，先放出一个几乎不会遇到的问题：delete 0 会发生什么？
答案是控制台输出 true，其他什么都没发生。
那假如我们继续尝试delete ，执行下面的语句会分别发生什么呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* example 1 */
delete 0
/* example 2 */
const a = {name: 'z'}
delete a.name
/* example 3 */
delete y
/* example 4 */
delete null
/* example 5 */
delete undefined
/* example 6 */
const x = 1
delete x
/* example 7 */
const map = new WeakMap();
delete map;

很多人都对 JavaScript 中 function 里的 this 产生疑惑。在我看来，这些疑惑在我们理解了核心的 function 的调用原理后，都会彻底理解。

针对 Vue 2.0 的项目，怎样更简单方便地进行测试？本文对 vue-test-util 工具的使用方法进行了简单总结。

本文针对 Vue 2.0 中的复用与组合、自定义指令、渲染函数、插件和过滤器等高级功能进行学习和总结。