Fork me on GitHub

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

展开全文 >>

typescript中private、public、protected、static、abstract、readonly

字段名 范围
private 类内部
public （默认）类内部和外部、及其子类都可访问
protected 类内部和其子类（区别与 public，即当前类实例化不可访问）
static 存在于类本身而不是类的实例上
abstract 定义抽象类和在抽象类内部定义抽象方法，做为其它派生类的基类使用，一般不会直接被实例化
readonly 只读属性
more >>

展开全文 >>

算法中的时间复杂度

如何计算时间复杂度

我们来看一道题目：

力扣题目链接

给定一个含有  n  个正整数的数组和一个正整数  s ，找出该数组中满足其和 ≥ s 的长度最小的 连续 子数组，并返回其长度。如果不存在符合条件的子数组，返回 0。

示例：

输入：s = 7, nums = [2,3,1,2,4,3] 输出：2 解释：子数组  [4,3]  是该条件下的长度最小的子数组。

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

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