qq_43305958的博客

研究vue2.0源码（1）initMixin——core为什么研究源码事情是这样…本来只是一个前端菜鸡（虽然现在也是一个前端大菜鸡（可以菜但是必须得大对不对:)）），然后有幸去年参加了一个大项目，就是那种全国性大大项目啊哈哈哈哈，也不用点名点姓说是哪个项目了，就是很大的全国性的，然后触发了程序员的被动技能——工作半年，实际工作时间一年。。。（天天加班）然后吧，每天晚上也没有啥事，就闲来无事的时候脑子一抽（也是恋爱不好谈了，王者荣耀不好玩了）想看vue2.0的源码，（这时候内心就一个想法，你在凝视

跨域不同协议、不同URL、不同端口号都会产生跨域解决跨域的方案：postMessage：web worker、iframeJsonp：用script标签请求地址，标签可以跨域cors： 服务端设置响应头信息，允许跨域1、最常见用cors处理跨域2、如果使用非简单请求，比如PUT和DELETE或者Content-Type字段的类型是application/jsondocument.domin + iframe： 设置同源代理：1、使用webpack-devService2、使用ng

antvG2可视化引擎库，更轻量级的可视化开发选择一、G2 可视化引擎二、使用步骤1.引入库2.使用案例1. 创建 div 图表容器2. 编写图表绘制代码三、基础概念概括图形语法交互语法图表组成坐标轴 Axis图例 Legend几何标记 Geometry提示信息 Tooltip图形标记 Annotation总结一、G2 可视化引擎G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 S

VUE内置 HOOKS钩子函数，HOOKS API的Vue实现一、HOOKS二、使用步骤1.withHooks2.useState2.useEffect总结一、HOOKSHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。后来看到尤大在 Vue 3.0 最近进展 的视频中也提到了 Hooks API，并写了一个在 Vue 中使用 Hooks 的 POC。可以把hooks当作更强、更实用的mixins。二、使用步骤

面试题系列——深思考核内容一、如何让(a===1&&a=\==2&&a=\==3)的值为true?二、如何实现一个无限累加函数总结一、如何让(a===1&&a===2&&a===3)的值为true?双等号(==)：会触发隐式类型转换，所以可以使用 valueOf 或者 toString 来实现。每次判断都会触发valueOf方法，同时让value+1，才能使得下次判断成立。class A { constructor(value)

VUE源码解析——全局 API 篇，学习Vue中所有全局API的实现原理学习Vue中所有全局API的实现原理总结学习Vue中所有全局API的实现原理总结good night

a标签的target属性，_blank，_self，_parent，_top总结_blank:设置target属性值为“_blank”，可以在一个新的窗口中打开链接。_self：设置target属性值为“_self”，会在相同的框架或者窗口中打开链接。*_parent：**设置target属性值为“_parent”，会在父窗口或者包含来超链接引用的框架的框架集中打开链接。我们可以看到原来的Frame_B_1也被新打开的链接覆盖了。_top：设置target属性值为“_top”，会清除所有被包

JavaScript比较两个对象的值，自定义equal方法总结定义比较两个对象的方法//比较2个对象是否相同function isObjEqual(o1,o2){ var props1 = Object.getOwnPropertyNames(o1); var props2 = Object.getOwnPropertyNames(o2); if (props1.length != props2.length) { return false; } fo

使用本地文件创建Web Worker多线程任务，分担复杂的操作，加快操作速度一、Web Worker二、使用步骤1.创建worker2.调用worker总结一、Web Workerweb worker 是运行在后台的 JavaScript，不会影响页面的性能。当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web work

比较ES6、ES7、ES8常用特性和新特性一、ES6变量的改变，添加了块级作用域的概念字符串新增方法函数可以像C/C++那样设置默认参数值，增加数据容错能力对象键值对重名简写对象字面量简写提供对象对象合并数据解构和rest参数数据展开PromisecatchallracesetES7求幂运算符（**）Array.prototype.includes()ES8async、await异步解决方案Object.entries()Object.values()字符串填充padStart()、padEnd()总结一

javascript中while、dowhile、for循环语句一、循环语句二、whiledo...whileswitchfor总结一、循环语句一组被重复执行的语句称之为循环体，能否继续重复，决定循环的终止条件。循环结构是在一定条件下反复执行某段程序的流程结构，被反复执行的程序被称为循环体。 循环语句是由循环体及循环的终止条件两部分组成的。二、whilelet a = 1while(a < 10){console.log('a:' + a)a++}do…whiledo{con

字符串中的特殊字符总结加上反斜线’'转义总结good night

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?Doctype文档类型？一、Doctype作用?二、严格模式与混杂模式如何区分？三、它们有何意义?四、Doctype文档类型？总结一、Doctype作用?声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。二、严格模式与混杂模式如何区分？浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）2、包含

VUE源码解析——内置组件篇，学习Vue中内置组件的实现原理学习Vue中内置组件的实现原理总结学习Vue中内置组件的实现原理总结good night

VUE源码解析——Object变化侦测原理解析一、什么是变化侦测？二、Object变化侦测1.Object.defineProperty方法2.依赖收集什么是依赖收集何时收集依赖？何时通知依赖更新？依赖管理器Dep类Watcher类不足之处Object变化侦测流程总结├─dist # 项目构建后的文件├─scripts # 与项目构建相关的脚本和配置文件├─flow # flow的类型声明文件├─s

从浅入深学习TypeScript，通俗易懂——变量声明一、TypeScript是什么？二、使用步骤1.var 声明作用域规则捕获变量怪异之处 *(常见面试题)let 声明块作用域重定义及屏蔽块级作用域变量的获取总结一、TypeScript是什么？TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。Ty

VUE源码解析——模板编译底层原理一、什么是模板编译？二、整体渲染过程三、模板编译内部流程抽象语法树AST总结一、什么是模板编译？把写在<template></template>标签中的类似于原生HTML的内容称之为模板。在<template></template>标签中除了写一些原生HTML的标签，我们还会写一些变量插值，或者写一些Vue指令，这些东西都是在原生HTML语法中不存在的，不被接受的。render函数会将模板内容生成对应的VNode，VNo

JavaScript原型和原型链详解一、JavaScript原型什么是原型二、JavaScript原型链什么是原型链什么是prototype和custructor一、JavaScript原型什么是原型在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。二、JavaScript原型链什么是原型链在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对

JavaScript作用域链详解一、JavaScript作用域JavaScript作用域是什么？作用域范围二、JavaScript作用域链作用域与执行上下文总结一、JavaScript作用域JavaScript作用域是什么？作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。作用域范围块语句（大括号“｛｝”中间的语句），如 if 和 switch 条件语句或 for 和 while 循环语句，不像函数，它们不会创建一个新的作用域

以凡人之躯，用js事件监听自定义——写一个绝对定位card组件一、组件是什么？二、使用步骤1.创建组件三、效果总结一、组件是什么？所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。二、使用步骤1.创建组件html<div class="floatCard" ref="floatCard"

Object原生监听对象变化，类似ES6的proxy代理一、监听对象变化二、使用步骤总结一、监听对象变化数据驱动视图的关键点则在于我们如何知道数据发生了变化JS的Object.defineProperty方法二、使用步骤// defineProperty第一个参数是对象，第二个参数是访问对象属性名，第三个参数是get和set操作let car = {}let val = 3000Object.defineProperty(car, 'price', { enumerable: true,

全面的前端依赖库，项目引入dependencies总结 // antv开头的是阿里的"dependencies": { // G2数据可视化库 // npm install @antv/g2 --save // // import { Chart } from '@antv/g2'; "@antv/data-set": "^0.10.2", "@antv/g2": "^4.0.15", "@antv/g2-plugin-slider": "^2.1.1

CSS进阶CSS3，初入前端必备技能之一一、CSS3是什么？二、使用步骤1.CSS3 边框2.CSS3 背景总结一、CSS3是什么？对CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。最重要CSS3模块如下：选择器盒模型背景和边框文字特效2D/3D转换动画多列布局用户界面二、使用步骤1.CSS3 边框border-radius CSS3 圆角div{border:2px solid;border-radius:25px;}box-sha

JavaScript前端定时器，异步操作一、定时器是什么？二、使用步骤1.setInterval()2.setTimeout()总结一、定时器是什么？定时器就是闹钟二、使用步骤1.setInterval()代码如下（示例）：setInterval(code,millisec,lang)2.setTimeout()代码如下（示例）：setTimeout(code,millisec,lang)setTimeout(function(){alert("Hello")},3000);

从浅入深学习TypeScript，通俗易懂一、TypeScript是什么？二、使用步骤1.引入库2.编译ts文件2.运行ts文件3.原始数据类型4.任意值总结一、TypeScript是什么？TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。TypeScript 增加了代码的可读性和可维护性类型系统

Javascript数据类型总结JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 BigInt。对象数据类型包括： object1、Undefined：Undefined类型只有一个值，即特殊值undefined。在使用var声明变量，但未对其加以初始化时，这个变量值就是undefined。2、Null

webpack深入配置详解一、webpack是什么？二、使用步骤1.创建文件vue.config.js2.配置webpack总结一、webpack是什么？WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。a:模块化，让我们可以把复杂的程序细化为小的文件;b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能

vue项目中使用数据可视化工具ECharts一、ECharts是什么？二、使用步骤1.引入库2.使用总结一、ECharts是什么？ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。二、使用步骤1.引入库代码如下（示例）：npm install echart

vue项目webpack配置代理，报错代理失败，Proxy error: Could not proxy request xxx from xxx解决思路1.原因总结解决思路1.原因1.是因为代理对象没有开启服务，不能访问到对象服务器2.代理规则写错总结good morning...

VUE框架深入——自定义指令directive一、自定义指令directive总结一、自定义指令directive注册一个全局自定义指令 v-focusVue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})如果想注册局部指令，组件中也接受一个 directives 的选项directives: { focus: { /

ES6系列——Map 和 WeakMap 数据结构一、Map二、WeakMap总结一、MapObject 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现const m = new Map();const o = {p: 'Hello World'};m.set(o, 'content')m.get(o) // "content"m.has(o) // truem.delete(o) // truem.has(o) // false

VUE框架深入——计算属性和侦听器一、计算属性computed二、侦听属性watch总结一、计算属性computed对于任何复杂逻辑，你都应当使用计算属性computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }计算属性默认只有 getter，不过

ES6系列——Set 和 WeakSet 数据结构一、SetSet是什么Set 实例的属性和方法遍历Set二、WeakSetWeakSet 实例的属性和方法总结一、SetSet是什么ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) {

深入理解js原型链和作用域链，了解作用域链和原型链的区别一、原型链二、作用域链三、原型链和作用域链的区别：总结一、原型链每一个构造函数都有一个prototype属性，这个属性就叫原型对象。每一个构造函数new出来的对象都有一个–proto–属性，这个属性指向原型对象。<script> function Car(){ //实例属性： //this.produce = ‘chevrolet‘, this.price = 8

闭包，堆栈，深浅克隆一、闭包二、使用步骤1.引入库2.读入数据总结一、闭包立即执行函数，函数后面的括号带的是实参var test = (function (i) { return function () { alert(i *= 2) }})(2);test(5) //字符串4二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seabo

VUE框架深入——掌握keep-alive缓存加载慢，请求多的页面一、keep-alive是什么？二、使用步骤1.在动态组件中的应用2.在vue-router中的应用3.刷新keep-alive缓存的页面总结一、keep-alive是什么？keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗,简单一点来说就是从页面链接到其他页面后回退到页面不用在重新执行页面的代码,只会从缓存中加载之前已经缓存的页面,这样可以减少加载时间及性能消耗,提高用户体验性。二、使用步骤1.在动态组件中的应

文章目录一、下载含有url的文件二、保存到本地并自动点击总结一、下载含有url的文件代码如下（示例）：// 下载含有url的文件function downloadUrlFile(url, fileName) { const url2 = url.replace(/\\/g, '/'); const xhr = new XMLHttpRequest(); xhr.open('GET', url2, true); xhr.responseType = 'blob';

前端传参参数各种格式详解一、form-data二、application/x-www-form-urlencoded总结一、form-dataform-data格式一般是用来进行文件上传调用接口的时候参数data等于formDataconst formData = new FormData();formData.append('modelName', code);二、application/x-www-form-urlencoded表单的传参格式，常见的post传参格式data等于一个对象

黑科技偏门实用的js方法总结一、contains是什么？总结一、contains是什么？使用场景：自定义一个组件，监听每一次点击事件，如果点击到组件以外的区域，则组件隐藏——类似于dialog弹窗的效果原理：每一次点击，都会有捕获和冒泡的阶段，捕获是从html元素向下到点击元素，冒泡阶段是从点击元素向上到html，在这过程中是否有需要的组件dom使用语法：//意思判断B中是否包含AB.contains(A)总结good afternoon...

VUE框架深入——掌握mixins混入一、mixins是什么？二、使用步骤1.创建mixins模板2.在需要的页面引用3.调用mixins中的方法4.使用注意事项总结一、mixins是什么？mixins（混入）是一种分发Vue组件中可复用功能的非常灵活的一种方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二、使用步骤1.创建mixins模板创建一个js文件，命名为initCos.js代码如下（示例）：export default init