hhhhhhhhhhhhhhhc的博客

原创 ES6 规范

官⽹：https://www.babeljs.cn/Babel 是⼀个⼯具链，主要⽤于将采⽤ ECMAScript 2015+ 语法编写的代码转换为向后兼容的JavaScript 语法，以便能够运⾏在当前和旧版本的浏览器或其他环境中。语法转换；通过 Polyfill ⽅式在⽬标环境中添加缺失的特性 （通过引⼊第三⽅ polyfill 模块，例如 core-js）；源码转换（codemods）；

原创 vue基础用法

template => 匹配模版语法 —— 生成AST：静态 + 动态 => 转换AST成可执行方法 => render() => dom。computed: 会自动diff依赖，依赖如果没有变化，则直接缓存读值。在vue2中，一个元素上同时使用v-if v-for，v-for优先作用。watch: 单入单出 —— 单个值的变化，进而影响一系列的状态变更。computed: 多入单出 —— 多个值的变化，组成一个值的变化。watch: 首次不会运行，immediate: true。

原创 Typescript原理解析

每个部分的编译器代码在 src/compiler 都可以找到。

原创 Typescript详解

Typescript是 JavaScript 超集，包含类型系统，以及其他一些功能。随着 Promise、Generators 等 API 进入 JS 标准，TS 和 JS 在这些 API 方面的差别在变小，但 TS 还有一些独有特性，这些特性才是和 JS 的主要区别：可以看到，生成了tsconfig.json的文件，里面是对应的配置信息创建helloTypescript.ts使用tsc生成js代码：生成最终的JS代码安装ts-node通过上述操作，知道了运行tsc命令就可以编译生成一个js文

原创 函数式编程

纯函数是这样一种函数，即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。比如数组的 slice 和 splice，这两个函数的作用并无二致——但是注意，它们各自的方式却大不同，但不管怎么说作用还是一样的。slice 符合纯函数的定义：因为对相同的输入它保证能返回相同的输出；splice 却不同：会产生可观察到的副作用，即这个数组永久地改变了；// 纯的 xs . slice(0 , 3);//=> [1,2,3] // 不纯的 xs . splice(0 , 3);

原创 JavaScript的运行机制

线程是CPU调度的最小单位。线程是建立在进程的基础上的一次程序运行单位，通俗点解释线程就是程序中的一个执行流，一个进程可以有多个线程。一个进程中只有一个执行流称作单线程，即程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。一个进程中有多个执行流称作多线程，即在一个程序中可以同时运行多个不同的线程来执行不同的任务， 也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。JS的单线程，与它的用途有关。

原创 JavaScript的垃圾回收和内存泄漏

增量就是将一次 GC 标记的过程，分成了很多小步，每执行完一小步就让应用逻辑执行一会儿，这样交替多次后完成一轮 GC 标记：将一次完整的 GC 标记分次执行，那在每一小次 GC 标记执行完之后如何暂停下来去执行任务程序，而后又怎么恢复呢？那假如我们在一次完整的 GC 标记分块暂停后，执行任务程序时内存中标记好的对象引用关系被修改了又怎么办呢？老生代主要使用并发标记，主线程在开始执行 JavaScript 时，辅助线程也同时执行标记操作（标记操作全都由辅助线程完成）；

原创 浏览器事件模型&请求

console . log('我是DOM0级事件处理程序');console . log('我是DOM2级事件处理程序');} , false);console . log('我是IE事件处理程序') }) btn . detachEvent('onclicn' , handler);DOM2级的好处是可以添加多个事件处理程序；DOM0对每个事件只支持一个事件处理程序；

原创 前端模块化

● 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)，并进行组合在一起；● 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信；通过两者的比较，可以得出AMD模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。AMD模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案；

原创 JavaScript高级用法(2/2)

基本类型值存储于栈内存中，传递的就是当前值，修改不会影响原有变量的值；引用类型值其实也存于栈内存中，只是它的值是指向堆内存当中实际值的一个地址；索引引用传递传的值是栈内存当中的引用地址，当改变时，改变了堆内存当中的实际值；v = 2;内存分布：改变前：改变前：o = 2;

原创 JavaScript高级用法(1/2)

执行过程如下：1.checkscope 函数被创建，保存作用域链到 内部属性[[scope]]2.执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈3.checkscope 函数并不立刻执行，开始做准备工作，第一步：复制函数[[scope]]属性创建作用域链4.第二步：用 arguments 创建活动对象，随后初始化活动对象，加入形参、函数声明、变量声明AO : {

原创 AntV G2Plot的饼图中，鼠标划入label提示内容

【代码】AntV G2Plot的饼图中，鼠标划入label提示内容。

原创 权限管理中的RBAC与ABAC

权限管理中的RBAC和ABAC

转载 探讨instanceof实现原理，并用两种方法模拟实现 instanceof

这里是引用在开始之前先了解下js数据类型js基本数据类型：null undefined number boolean stringjs引用数据类型：function object array一说instanceof 就想到typeof ，这里也介绍下typeof:typeof是用来判断数据类型的，就一个参数 ,使用方式像这样： typeof num, 就是判断num是什么类型typeof 一般只能返回如下几个结果**：“number”、“string”、“boolean”、“objec

原创 服务器上传文件

Xshell 方式 （推荐）官网下载https://www.xshellcn.com/xiazai.htmlhttps://www.netsarang.com/zh/free-for-home-school/网盘下载链接：https://pan.baidu.com/s/1wyWsKsl_g0UD5TOBVoFBuA提取码：love第三方下载https://gitee.com/2xx/mytools/raw/master/xshell_xftp.zip安装环境方式1：脚本安装安装 nod

原创 vue首次渲染过程

在首次渲染之前，首先进行初始化，就是初始化vue的实例成员和静态成员。初始化结束之后，调用构造函数new Vue()在构造函数中调用了_init()方法，这个方法相当于整个vue的入口，在这个方法中最终调用了$mount()在entry-runtime-with-compiler.js中的mount，即入口文件的mount，即入口文件的mount，即入口文件的mount，这个文件中的**$mount的核心作用是帮我们把模板编译成render函数**，但他首先会判断我们是否传入了render，如果没.

原创 模板编译过程

模板编译：（静态根节点：又有子项 又只有字符）模板字符串—>ast对象（抽象语法树）—>优化ast对象（标记静态根节点）—>转换成字符串形式的代码—>通过newFunction函数转换成匿名函数—>生成render函数compileToFunctions:首先从缓存加载编译好的render渲染函数，如果缓存中没有的话调用compile（template，options）在compile函数中，首先去合并选项options。然后调用baseCompile编译模板。c

转载 前端如何实现token的无感刷新

前端如何实现token的无感刷新思否技术圈作者：xiangzhihong来源：SegmentFault 思否社区通常，对于一些需要记录用户行为的系统，在进行网络请求的时候都会要求传递一下登录的token。不过，为了接口数据的安全，服务器的token一般不会设置太长，根据需要一般是1-7天的样子，token过期后就需要重新登录。不过，频繁的登录会造成体验不好的问题，因此，需要体验好的话，就需要定时去刷新token，并替换之前的token。要做到token的无感刷新，主要有3种方案：方案一：后端返

原创 vue中响应式的处理过程

响应式是从vue实例的init方法开始的。在Init方法中先调用initState()初始化vue实例的状态，在这个方法中调用了initData(),initData()是把我们的data属性注入到vue实例上，并且调用observe()把data对象转换成响应式对象。于是observe()就是我们响应式的入口。observe()做了什么事情：observe接收一个参数value,这个参数value就是我们响应式要处理的对象。那么在创建observe对象时做了什么事：来看他的构造函数数组的响应.

原创 Diff算法

原创 使用 Gulp 完成项目的自动化构建

1 创建文件并进入mkdir zuoye2cd zuooye22 初始化yarn init3 安装gulpyarn add gulp -g4 在入口文件中写入我们要执行的api//用解构的方式从gulp中拿出我们要用的apiconst { dest, src,series,parallel,watch } = require('gulp')//引入自动加载插件模块const loadPlugins = require('gulp-load-plugins')//引入构建服务器模

原创 自定义脚手架

1 创建文件并进入mkdir generator-democd generator-demo2 创建package.jsonyarn init3 安装yeoman-generatoryarn add yeoman-generator4 创建index.js文件5 在入口文件中程序执行时会调用生命周期方法，可在生命周期方法中调用父类工具方法6 全局调用yarn link...

原创 记录es6

let与var：1)、作用域不同：​ let定义的变量是块级作用域 ；​ var定义的变量是函数作用域[局部的]， 但在if、for等定义的变量是全局的。2)、在同一个作用域中同一个变量let只能声明一次，而var可以多次声明，let声明的变量可以避免全局变量被污染。3)、var声明的变量存在变量提升，而let则没有变量提升，let声明的变量要先定义后使用。let有暂时性死区：let声明的变量要先定义后使用。5)、let声明的变量不会绑定到顶层对象(顶层对象可以理解为最大的全局变量，即wind

原创 Promise

/*尽可能还原 Promise 中的每一个 API, 并通过注释的方式描述思路和原理.*/// 思路：// 首先明确promise内需要填写的内容// 1 先设置三个状态// 2 构造函数里要写try catch 记录成功和失败// 3 定义五个初始值 分别是status value reason successCallback failCallback// 4 明确 普通方法--5个 静态方法--2个// 分别是 resolve reject then finally catch/

原创 lodash

// first / last / toUpper / reverse / each / includes / find / findIndex// 先引入lodashconst _ = require('lodash')const arr = ['a', 'b', 'c', 'd']// first 找出第一个console.log(_.first(arr))// last 找出第一个console.log(_.last(arr))// 将第一个大写console.log(_.toUp.

原创 同步和异步

同步和异步同步：一件一件的做。异步：几件事一起做。由于js是一个单线程执行，所以当遇到某些需要等待执行的内容时，就会导致线程的执行的阻塞，为了杜绝这种情况，就将需要等待执行的代码 ，放到一个任务队列中去执行，主线程就继续执行可以马上得到结果的程序就是同步程序，放到任务队列中去执行的就是异步程序。等到主线程中的所有同步代码执行完成后，再去轮询任务队列 将准备好的异步代码放入主线程继续执行。同步先执行，异步后执行：一般 回调函数 事件处理函数 都是异步函数 window.onload

原创 自定义指令

自定义指令Vue.directive("指令名称",{ //inserted:function(el) inserted(el){ //el就是使用自定义指令的标签元素 //js操作。。。 }})指令名称不需要添加v-前缀，但是在使用指令的时候需要添加v-前缀inserted 被绑定元素插入父节点时就会调用该函数bind 指定绑定到对应的元素后就会调用该函数示例代码：<div id="app"> <input type="text" v-focus&

原创 typescript

一、介绍官网：https://www.tslang.cn/typescript是javascript超集，由微软开发并开源它的语法规范、严谨，适合开发大型项目二、环境搭建1.安装npm i typescript -g验证是否安装成功tsc -v2.编译(1)手动编译创建一个后缀为ts的文件，比如index.ts，并编写js代码tsc index.ts只要执行了编译命令，就会创建一个同名的js出来(2)自动编译①创建一个项目，并用ts初始化初始化好之后就在当前文件夹中存在

原创 插槽

插槽在父组件中复用子组件时，子组件中展示内容/结构由父组件来告知。slot(1)匿名插槽第一步：在子组件中添加一个slot标签，用来展示父组件传递的内容（可以是数据也可以是html结构）<template><div> <!-- 插槽 --> <slot></slot> <slot></slot></div></template>只要在子组件中设置了slot标

原创 组件通信 组件传值

1.父子组件自定义属性和props第一步：先创建两个组件，一个父组件parent.vue，一个子组件child.vue在App.vue中引入父组件，并使用它<script>import vParent from './components/parent'export default { components: { vParent }}</script><template> <div class="page">

原创 组件传值

父子组件：1.App.vue中引入父组件并挂载 别忘了在结构中加入父组件标签2.父组件中：①写要传递的data数据②引入子组件并挂载③在父结构里写子组件标签 并且把要传递的数据动态绑定传过去3.子组件中：①用props属性接收传递的数据②将传递的数据渲染子父组件：（子父组件传值需要触发事件）1.App.vue中引入父组件并挂载 别忘了在结构中加入父组件标签2.子组件中：①写要传递的data数据②写触发事件 如按钮中@click=“函数名”③methods方法中写函数 用$emit方

原创 监听

监听器侦听器作用：检测变量值的变化，只要数据变化，就可以触发相应的函数执行一定的操作。作为vue实例的配置选项，watch1.普通监听可以检测标量类型数据的变化：字符串、数字（整数、浮点数）、布尔值当依赖的数据发生变化时，就会触发对应的函数①写法一<script> new Vue({ el:"", data:{ipt:''}, watch:{ ipt([newVal,oldVal]){ .... } } })</script>