Fork me on GitHub

typescript基础

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 >>

展开全文 >>

angular7基础

开始准备

  1. 安装 nodejs
npm -v
  1. 安装@angular/cli
npm i -g @angular/cli
  1. CLI 命令建立项目
ng new ng7demo

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

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

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

or

  1. npm install -g cnpm
    cnpm install

  2. 启动项目

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

展开全文 >>

浏览器页面渲染过程

浏览器的渲染方式

  1. 构建 DOM 树
    浏览器请求到 html 代码后，在生成 DOM 的最开始阶段，并行发起 css、图片、js 的请求。（解码->令牌化->词法分析->dom 树创建）

  2. 构建 CSSOM
    css 文件加载完成，开始构建 CSSOM（CSSOM 只输出包含有样式的节点）

  3. 生成渲染树（Render Tree）
    CSSOM 构建结束后，和 DOM 一起生成 Render Tree

  4. 计算渲染树布局（Layout）
    有了 Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的 CSS 定义以及他们的从属关系。依照盒子模型，计算出每个节点在屏幕中的位置及尺寸。

  5. 将布局 Paint 绘制到屏幕上
    布局之后，浏览器知道哪些节点要显示，每个节点的 CSS 属性是什么，每个节点在屏幕中的位置。所以接下来按照算出来的规则，通过显卡，把内容画在屏幕上。

    more >>

展开全文 >>

only-child和only-of-type区别

only-child选择器

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

only-of-type选择器

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

more >>

展开全文 >>

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

BFC

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

那么 BFC 是什么呢？

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

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

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

more >>

展开全文 >>

css常用知识

什么是盒子模型

盒模型分为标准盒模型和怪异盒模型（IE）

box-sizing : content-box //标准盒模型
box-sizing : border-box //怪异盒模型
  • 标准盒模型: 这种盒模型设置width的时候的值是内容区的宽度, 如果再设置padding和margin, border的话盒子的实际宽度会增大；
  • 怪异盒模型: 这种盒子的width设置的值为盒子实际的宽度, border和padding的设置不会影响盒子的实际宽度和高度

CSS 新特性

transition //过渡
transform //旋转、缩放、移动或者倾斜
animation //动画
gradient //渐变
shadow //阴影
border-radius //圆角
more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

前端攻城狮
记录分享自己工作、学习中学到的知识