Fork me on GitHub

angular依赖注入

掘金上看到一篇讲 angular 依赖注入 的文章，非常的细致，记录一下

依赖注入是前端开发者也是 Angular 开发者一道很难迈过去的坎，依赖注入到底是啥？为什么要依赖注入？Angular 的依赖注入怎么有那么多概念，看了官方文档一遍后感觉是懂了，但是过一段时间发现又不懂了，这是前端开发者普遍遇到的问题，我司的前端也一样，那么这篇文章尝试用更容易理解的语言全面解析一下 Angular 的依赖注入，内容有点多，可以先收藏观看。

Angular 官方文档关于依赖注入介绍的其实挺详细的，但是组织的语言过于官方，不易理解，其次就是文档太过分散，没有把依赖注入聚合在一起，有些核心的概念可能在示例中出现了解读，你很难在一个地方找到所有依赖注入的讲解。
在开始之前，我简单列了一些关于 Angular 依赖注入的问题，如果你每个问题都非常了解可以划过这篇文章了。

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

展开全文 >>

富文本编辑器Quill支持复制粘贴文字图片

在使用富文本编辑器时，通常 word 整体粘贴时，图片总是无法正常显示，图片地址会是 src=”//0”的情况，这主要时因为，我们整体粘贴时，实际上我我们粘贴过去的是一片 word 的 dom 字符串，其中编辑器会为我们过滤其他无用标签，保留了主要部分。由于粘贴时候 word 文档中图片部分实际上引用的是本地地址，由于浏览器和 js 限制无法读取或者操作本地文件，因此无法正常显示。如果是网络上复制粘贴的文档则可以正常显示。

一下是从 word 直接粘贴过来的效果
在这里插入图片描述
一下是从网络上粘贴过来的效果
在这里插入图片描述

more >>

展开全文 >>

whistle抓包工具

一、whistle 简介

whistle 是一款基于 Node.js 实现的，类似 Fiddler、Charles 的代理工具，可用于 HTTP、Websocket 等请求的抓取、编辑、重放等功能。

利用 whistle 的改包功能，在进行 HTTP(S) 请求时，可以轻松完成某些不具备测试条件或不易构造真实场景的测试工作，如异常场景、边界场景的测试等。

more >>

展开全文 >>

使用js选中元素，移动光标 

// 删除之前所有的选区
window.getSelection().removeAllRanges();

let selection = window.getSelection();
let range = document.createRange();

range.selectNode(ele); // 需要选中的element
selection.addRange(range);

如果需要移动光标，可以使用:

selection.collapseToEnd();
selection.collapseToStart();

如果需要选中所有子元素，可以使用:

selection.selectAllChildren(ele);

展开全文 >>

Vuex核心原理

一、核心原理

  1. Vuex 本质是一个对象
  2. Vuex 对象有两个属性，一个是 install 方法，一个是 Store 这个类
  3. install 方法的作用是将 store 这个实例挂载到所有的组件上，注意是同一个 store 实例。
  4. Store 这个类拥有 commit，dispatch 这些方法，Store 类里将用户传入的 state 包装成 data，作为 new Vue 的参数，从而实现了 state 值的响应式。
more >>

展开全文 >>

Vue原理

vue 双向绑定原理 【原理题】

核心实现类:
Observer : 它的作用是给对象的属性添加 getter 和 setter，用于依赖收集和派发更新

Dep : 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例（里面 subs 是 Watcher 实例数组）,当数据有变更时,会通过 dep.notify()通知各个 watcher。

Watcher : 观察者对象 , 实例分为渲染 watcher (render watcher),计算属性 watcher (computed watcher),侦听器 watcher（user watcher）三种

more >>

展开全文 >>

angular 路由

路由注册

<router-outlet></router-outlet>是 angular 路由的占位元素，表示要把对应的路由组件渲染到router-outlet中
使用angular router的项目，需使用<a routerLink="/crisis-center">Crisis Center</a>的形式，才能在 angular 内部跳转

html

<h1>Angular Router</h1>
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active" ariaCurrentWhenActive="page">Crisis Center</a>
  <a routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Heroes</a>
</nav>
<router-outlet></router-outlet>
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

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