typescript基础

2021-05-12 (更新于2025-06-25)

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

区别

TypeScript	JavaScript
JavaScript 的超集用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
可以在编译期间发现并纠正错误	作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型	弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理解	可以直接在浏览器中使用
支持模块、泛型和接口	不支持模块，泛型或接口
支持 ES3，ES4，ES5 和 ES6 等	不支持编译其他 ES3，ES4，ES5 或 ES6 功能
社区的支持仍在增长，而且还不是很大	大量的社区支持以及大量文档和解决问题的支持

安装

npm install - g typescript

编译

tsc helloworld.ts
// helloworld.ts => helloworld.js

在线学习语法和特性

more >>

展开全文 >>

js循环

2020-10-23 (更新于2025-06-25)

for循环 forEach for..of for..in的区别 more >>

展开全文 >>

angular7基础

2021-05-12 (更新于2025-06-25)

开始准备

安装 nodejs

npm -v

安装@angular/cli

npm i -g @angular/cli

CLI 命令建立项目

ng new ng7demo

选择是否加入路由模块以及哪种 css 预处理器

可 ctrl+c 取消自动安装 node_modules，手动进入项目 npm install
node-sass 安装不上可切换淘宝镜像库或者用 cnpm 安装

npm config set registry https://registry.npm.taobao.org
npm install

npm install -g cnpm
cnpm install
启动项目

ng serve --open // 自动打开浏览器 http://localhost:4200/

more >>

展开全文 >>

浏览器页面渲染过程

2021-05-12 (更新于2025-06-25)

浏览器的渲染方式

构建 DOM 树
浏览器请求到 html 代码后，在生成 DOM 的最开始阶段，并行发起 css、图片、js 的请求。（解码->令牌化->词法分析->dom 树创建）
构建 CSSOM
css 文件加载完成，开始构建 CSSOM（CSSOM 只输出包含有样式的节点）
生成渲染树（Render Tree）
CSSOM 构建结束后，和 DOM 一起生成 Render Tree
计算渲染树布局（Layout）
有了 Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的 CSS 定义以及他们的从属关系。依照盒子模型，计算出每个节点在屏幕中的位置及尺寸。
将布局 Paint 绘制到屏幕上
布局之后，浏览器知道哪些节点要显示，每个节点的 CSS 属性是什么，每个节点在屏幕中的位置。所以接下来按照算出来的规则，通过显卡，把内容画在屏幕上。
more >>

展开全文 >>

only-child和only-of-type区别

2021-05-06 (更新于2025-06-25)

only-child选择器

:only-child 选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

only-of-type选择器

:only-of-type 选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。 :only-of-type 是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用 :only-of-type 选择器就可以选中这个元素中的唯一一个类型子元素。

more >>

展开全文 >>

css格式化上下文（BFC、IFC）

2021-05-06 (更新于2025-06-25)

BFC

Formatting context (格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

那么 BFC 是什么呢？

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素 ，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

more >>

展开全文 >>

angular生命周期函数

2021-04-20 (更新于2025-06-25)

加载所有生命周期函数

export class LifecircleComponent {

  constructor() {
    console.log('00构造函数执行了---除了使用简单的值对局部变量进行初始化之外，什么都不应该做')
  }

  ngOnChanges() {
    console.log('01ngOnChages执行了---当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发)');
  }

  ngOnInit() {
    console.log('02ngOnInit执行了--- 请求数据一般放在这个里面');
  }
  ngDoCheck() {
    console.log('03ngDoCheck执行了---检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应');
  }
  ngAfterContentInit() {
    console.log('04ngAfterContentInit执行了---当把内容投影进组件之后调用');
  }
  ngAfterContentChecked() {
    console.log('05ngAfterContentChecked执行了---每次完成被投影组件内容的变更检测之后调用');
  }
  ngAfterViewInit(): void {
    console.log('06 ngAfterViewInit执行了----初始化完组件视图及其子视图之后调用（dom操作放在这个里面）');
  }
  ngAfterViewChecked() {
    console.log('07ngAfterViewChecked执行了----每次做完组件视图和子视图的变更检测之后调用');
  }

  ngOnDestroy() {
    console.log('08ngOnDestroy执行了····');
  }

  //自定义方法
  changeMsg() {
    this.msg = "数据改变了";
  }
}