A practical guide for things you need to know about enabling Cross-Origin Resource Sharing (CORS).

最近兼职的项目里面因为要用charts进行数据的交互式可视化，用Chart.js比较多，也踩了不少坑。
为了改bug提pr外加学习一下提高姿势水平花了一点时间看了下源码，发现一些比较有用简介的helper function很值得学习及日常使用。

Objective

实现按住 Shift 键点击 list 时批量选中。

Objective

实现一个简单的彩虹效果的 Canvas 画笔。

Objective

实现一个 “typeahead”，按下输入字母后搜索缓存数据中匹配的条目并显示。同时高亮搜索的字符串。

Objective

利用 Flexbox 实现一个 Gallery，点击一个 panel 后可放大，并飞入上下的文字。

Objective

利用 CSS Variable 和 JS 进行样式属性的控制。

Objective

利用 CSS 和 JS 实现一个时钟界面，每秒更新三个指针的位置。

写在系列开篇

在学习了基本的 HTML / CSS / JavaScript 之后没有啥 side project 就直接开始学 Angular 做项目。遇到最近很火的JavaScript30这个项目后决心好好实践一下 Vanilla JavaScript。

对于每个挑战，我会自己在看过视频了解原理后自己实现一遍并在 blog 里记录过程、想法和相关资料。源码放在我的 Github上，demo 通过 Github Pages 部署，点击这里或 Github 的 readme 中连接可以访问。

Objective

通过预先提供的音频文件和 JavaScript 实现键盘按键打鼓，按下预定的键位后进行高亮并在高亮转换结束后恢复。

Template event emission

在传子component事件触发函数时(onSelect)="onSelectStart($event)"必须写成$event，
然后在ts文件中可以把参数的类型定义为正确的类型。

即使是其他类型的值也要写成完整的$event，不然无法读取。

Routing wildcard

在 appRoutes 中我们一般要使用 “wildcard” 设置一下空白页的引导，对此官方文档有很好的例子。

但这里只提到了但 Routing Module 的情况，实际中遇到需要配置多个 Routing Module时需要import多个Routes。
例如：

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

const appRoutes: Routes = [
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages/overview' }
];
// ...
const pagesRoutes: Routes = [
  {
    path: 'pages',
    component: PagesComponent,
    children: [
      { path: '', redirectTo: 'overview', pathMatch: 'full' },
      { path: 'overview', loadChildren: 'app/pages/overview/overview.module#OverviewModule' },
      { path: 'setting', loadChildren: 'app/pages/setting/setting.module#SettingModule' }
    ]
  }
];

开发中遇到一个问题就是无论routerLink导向哪里实际都会被引导到空白页。
其原因在于app.module.ts中的import里面必须将AppRoutingModule放在其他含有router的Module之后，这样其他有效的router就可以被先匹配到。

1
2
3
4
5
6
7
8
9
10

@NgModule({
  //...
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    PagesModule,
    AppRoutingModule
  ],
  //...

[Typescript] number from object

在获取Chartjs的label时，因为label是String类型，我想拿到数字对应的number，于是使用了
let label: number = ......label
之后发生了label实际上还是String的问题，debug了好久才发现，就连VSCode的tslint都没有发现这个问题。

之后在ts-node中试验了一下，

1
2
3
4
5
6
7
8

> let a: any = {b: "2"}
undefined
> a
{ b: '2' }
> let num: number = a.b
undefined
> num
'2'

可见number类型的变量使用any的元素赋值时不会触发错误。

有时间还是应该系统学习一下Typescript，大型工程中还是很有用的。

[hidden] vs *ngIf

对于是否显示某个 DOM 元素或者 Component，可以用默认的 Directive [hidden] 或者是 *ngIf。
但两者有一些差别在使用中需要注意：

• hidden 的实现原理是 display: none;
• ngIf 的原理是对 DOM 元素销毁与构造

所以对于初始化时需要 DOM 元素存在的一些部件就需要仔细考虑，
例如 Chartjs 在构造时需要读取父元素的 Size，如果使用 hidden 来控制显示就会出现没有绘制的情况 - 初始化时父元素的尺寸是 0。