Fork me on GitHub

玩转git

git 作为当前最流行的代码管理工具，用好 git 可以有效的提高团队开发效率

常用命令

git add

# 提交当前目录下的所有变更文件
git add .

# 提交当前仓库下的所有变更文件
git add -all
more >>

展开全文 >>

css中的换行

强制不换行:

p { white-space:nowrap; }

自动换行:

p { word-wrap:break-word; }

强制英文单词断行:

p { word-break:break-all; }

注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

more >>

展开全文 >>

whistle抓包工具

一、whistle 简介

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

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

more >>

展开全文 >>

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

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

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

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

展开全文 >>

Vue原理

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

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

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

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

more >>

展开全文 >>

Vue你了解哪些

一、vue

vue 优点

  • 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb；

  • 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；

  • 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；

  • 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；

  • 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；

  • 虚拟 DOM：dom 操作是非常耗费性能的， 不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；

  • 运行速度更快:相比较与 react 而言，同样是操作虚拟 dom，就性能而言，vue 存在很大的优势。

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

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