Fork me on GitHub

什么是iconfont

iconfont 是什么：

顾名思义，IconFont 就是字体图标。严格地说，就是一种字体，但是，它们不包含字母或数字，而是包含符号和字形。您可以使用 CSS 设置样式，就像设置常规文本一样，这使得 IconFont 成为 Web 开发时图标的热门选择。

IconFont 的使用方式和 传统的 WebFont 如出一辙，又把大量的图标变成了一个字体文件，减少了请求数，而且有效减小请求体积。当一个网页有自己的图标字体库之后，可以复用在很多地方，减少很多二次开发成本。因此现代网页多会使用 IconFont 来展示图标，那么如何使用并且生成 IconFont 也就变成了前端开发人员必知必会的能力。

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

展开全文 >>

前端模拟接口返回数据

Mock.js 是一个用于模拟数据的 JavaScript 库，常常被用于前端开发和单元测试。 在进行 Angular 项目开发时，经常需要与后端 API 进行交互，但是由于后端开发进度可能不同步，或者接口还未完成，需要模拟数据来进行前端开发或者测试。这个时候，我们可以使用 Mock.js 来解决这个问题。

more >>

展开全文 >>

angular缓存页面、实现keepAlive效果

场景：当在某个页面筛选了一些条件，然后需要跳到详情页面，此时返回原来的列表页，需要保持原来的筛选状态

Angular RouteReuseStrategy 路由复用策略

abstract class RouteReuseStrategy {
  /* 是否允许复用路由 */
  abstract shouldDetach(route: ActivatedRouteSnapshot): boolean;
  /* 当路由离开时会触发，存储路由 */
  abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void;
  /* 是否允许还原路由 */
  abstract shouldAttach(route: ActivatedRouteSnapshot): boolean;
  /* 获取存储路由 */
  abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null;
  /* 进入路由触发，是否同一路由时复用路由 */
  abstract shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;
}
more >>

展开全文 >>

html中javascript的6种加载方式

JS 的 6 种加载方式

1）正常模式

<script src="index.js"></script>

这种情况下 JS 会阻塞 dom 渲染，浏览器必须等待 index.js 加载和执行完成后才能去做其它事情

2）async 模式

<script async src="index.js"></script>

async 模式下，它的加载是异步的，JS 不会阻塞 DOM 的渲染，async 加载是无顺序的，当它加载结束，JS 会立即执行

使用场景：若该 JS 资源与 DOM 元素没有依赖关系，也不会产生其他资源所需要的数据时，可以使用 async 模式，比如埋点统计

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

展开全文 >>

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

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