- 博客(28)
- 收藏
- 关注
RSS订阅
原创 创建优质文章，成长自己，化草成树，扎根world
能力转化器人的生活方式有两种，第一种是像草一样活着。你尽管活着，每年还在成长，但是你毕竟是一草；你吸收雨露阳光，但是长不大。人们可以踩过你，人们不会因为你的痛苦而产生痛苦；人们不会因为你被踩了 ，而来怜悯你，因为人们本身就没看到你。所以，我们每一个人都应该像树一样成长。即使我们现在什么都不是，但是只要你有树的种子，即使被人踩到泥土中间，你依然能够吸收泥土的养分，自己成长起来。也许两年、三年你长不大，但是十年、八年、二十年，你一定能长成参天大树，当你长成参天大树以后，遥远的地方，人们就能看到你；走 近你
2020-12-14 22:07:53
130
1
原创 防抖与节流函数封装
函数不难， 主要就是定时器的运用 ， 以及 对于闭包的一些理解运用 。// 分装 防抖函数/** * @param {* 需要执行的函数 } tarFun * @param {* 抖动周期 } delay * @param {* 是否立即执行 } immed */function debounce(tarFun, delay, immed) { let timer = null let immeBool = immed return function () { const _tha
2022-02-15 16:09:29
478
原创 call ，apply，bind 重写 ，带注释通俗易懂
废话不多说直接上代码 ， 有错误与问题请指出call实现;(() => { Function.prototype.myCall = function (ctx) { ctx = ctx ? Object(ctx) : window // 将 参数对象上面加一个对象 ， 所以要保证ctx 是对象 ctx.pointer = this // 声明一个空数组 const param = [] for (let i = 1; i < arguments.length; i+
2022-02-12 16:50:49
571
原创 利用 JSON.parse(JSON.stringify())来深拷贝javascript变量的弊端
**结论： 在利用 JSON.parse(JSON.stringify())来深拷贝时候 ,会去除 对象里面 value 为 undefined 的 key ,会将 value 值为 NaN变更成 null ,会将 数组里面为 NaN 的项变成 null会去除 对象 里面 value 为 function的 key下面利用控制台来进行验证 :还有一些情况不过不常用 ，附上链接 :详细了解请点击这里...
2022-02-11 00:01:45
662
原创 vue 2.0 响应式基本原理 简单实现
vue 3.0 出现已经变成了默认版本 ， 订阅发布者模式 与 数据劫持 完成了 vue2.0 的基本响应原理 ， 趁着过节 ， 没事干 ， 就手写了个 精简版 ， 麻雀虽小，五脏俱全。看代码1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
2022-02-03 01:10:19
660
原创 vue 中 transition 过渡效果的使用，详解类名的添加时机
记一次学习过程 ， 在我们需要页面过渡效果的时候 ， 可能我们回去选择 animate.css 中的一些效果但是vue 官方给我们提供了一个内置组件 ，大致浏览我们可以知道，就是用类名去控制页面切换的效果 ， OK，那我们就在项目中使用它一波 ，从github 上下载的开源项目App.vue的截图这是template模板部分，大致就是 给router-view 绑定了v-slot在项目运行的的时候，vue会把组件名称传入进去。然后 component去切换组件 ，但是在外面嵌套了一层 tran
2022-01-20 11:33:54
733
原创 TypeScript学习（第六天）类型断言
类型断言 ： 个人理解就是如下代码，写法 ：1. 值 as 类型2. <类型>值第二种写法容易和泛型混乱，推荐使用第一种方法。// 定义个接口interface type_str { name: string}interface type_num { age: number}// 参数为联合类型function con(params: type_num | type_str): void { // 在这个地方 , 你就断言了 params 类型 肯定是 typ
2022-01-03 14:29:40
611
原创 css 隔离方案 之 Shadow Dom简单基本使用（真正上的css隔离）
这里只展示 Shadow Dom 的简单使用 ， 具体看注释就可以了，具体的使用场景，以及上面的方法还需要大家自己手动才会深刻。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid
2021-12-29 16:07:53
706
原创 模拟javaScript 沙箱原理 (快照沙箱 与 proxy 代理沙箱)(微前端乾坤框架)
从 single-sap 到 乾坤框架 落地 ，到运用到的原理学习。又是收获满满得到一天
2021-12-29 15:40:04
1283
原创 学习TypeScript(第五天) 函数
函数作为javascript 的一等公民 ， 在TypeScript 里面的 地位肯定不会很低。让我们来一起看看函数的表示方法以及知识点。主要从 7 个 方面来分享下函数。 主要展示形式为 js 与 ts 进行对比来展示1.函数声明JavaScript代码：// js函数声明function sum(x, y) { return x + y}TypeScript代码：// ts 函数声明function sum_ts(x: number, y: number): number
2021-12-24 11:28:32
110
原创 TypeScript学习 （第四天） 数组表示
用接口来表示对象，现在我们来说说数组的 5 种表示方法1.数组 + [ ]// 1， 类型加括号表示const arrNum: number[] = [1, 2, 3, 4]const arr: [number, string, number] = [1, '2', 3]console.log(arrNum) // [1,2,3,4]console.log(arr) // [[1, '2', 3]] arrNum.push('5') // 报错 ： 类型“string”的参数不能赋给类型“nu
2021-12-20 23:17:50
2692
原创 学习typeScript(第三天) 接口
前面聊了聊 几种数据类型 五虎上将 以及 哼哈二将 void , any ， undefined 与 void 的区别现在我们来说一说 ，如果我们没有指定类型 ， 那么ts 将会 如何做呢？ 下面我们一起来看看。进入正题 ， 也就是类型推断。类型推断当我们ts 中声明变量 ， 而没有指定类型的时候 ，如下代码 ：let str = '我是字符串' // 这样现在的类型就是字符串类型了。str = 123 // 这边已经把字符串变成字符串类型了 ， 再去赋值 数值类型 就不可以
2021-12-19 00:05:04
465
原创 学习TypeScript（第二天）简单数据类型的使用
今天来说说简单数据类型 javaScript 的简单数据类型有 7 中string , boolean , number , null , undefined 简称 五虎上将 还有 左右护法 symbol , bigInt今天主要谈弹 五虎上将 在 typeScript 中的表现 ， 在介绍 哼哈二将 void,any 给 他们认识。在这里提醒大家 ， 可以在目标文件夹下面 运行 tsc --init来初始化， 这样就会生成 一个 名为 t
2021-12-13 21:54:35
841
原创 学习TypeScript（第一天）初识Ts
ts学习网址 ： 传送门学习一门新知识我们要知道为什么需要去学习， 就我的角度而言是因为 ts 是一种趋势 ， 在语言排行榜上的排名不断升高，前端主流框架也不断对Ts做出支持。就来说说什么是typescript ， 就和它名字一样 ， 多了个 类型判断 ，能让你在编写阶段就发现编中的错误，举个例子如下代码运行的时候才发现问题（编译阶段）let foo = 1;foo.split(' ');// Uncaught TypeError: foo.split is not a function
2021-12-12 22:49:34
429
原创 依据 promise/A+规范 ，模拟封装 Promise
Promise 用了很久 ， 但是一直都没有时间去探寻其内部实现 ， 周末大好 ， 看着图灵社区简单实现下，注释都在代码里面了。上图。class Promise { // 根据index.js 里面的new promise() 可知道 括号里面传入的为一个函数 constructor(executor) { // 作为一个工具封装者一定要考虑到用户传入值的所有情况（意思就是他可能传入的不一定是一个函数，所以我们要做处理） // 判断用户传入的类型是不是function , 如果不是就抛出一句话
2021-12-05 23:00:44
116
原创 关于发布者订阅者模式的简单代码实现
谈到发布者订阅者模式大家就会想到vue的响应原理 ， 响应原理的实现在 vue2 来说就是利用到 Object.defineProperty() 中的getter 与 setter 结合发布订阅者模式来实现的发布订阅者模式 ： 个人理解就是 发布者更新数据 ， 就通知每一位订阅者更新数据.在结合上 getter 与 setter (数据劫持) 然后就形成了这么个响应式原理 。 下面就是发布订阅者模式的简单实现 (实现的方式有很多，下面是对象实现)// 声明一个对象const d
2021-11-15 13:37:29
1161
原创 vue3.0 的各种路由守卫的使用，以及参数解析
先上一个简单的路由配置，和vue2 还是有区别import { createRouter, createWebHistory } from 'vue-router'const routes = [ { path: '/', redirect: '/login' }, { path: '/login', name: 'login', component: () => import('../views/login/index.vue'), }, { path
2021-11-14 17:18:50
5009
原创 双柱状图 多个y轴 的区分方法
双柱状图，多个y轴 的区分方法 series: [ { name: '查询次数', type: 'bar', // 进行折现样式调整 data: option.dataQuery, barWidth: 15, itemStyle: { // 折现的颜色 color: '#43e4db'
2021-10-12 14:06:22
297
原创 关于react脚手架的代理跨域配置与分析
关于react脚手架的代理跨域配置与分析第一步在 src 文件夹下创建 名为setupProxy。(名字不能变注意大小写)第二步** 引入以下代码** const proxy = require('http-proxy-middleware') // 不用下载脚手架自带 module.exports = function(app){ app.use( //========================================================== proxy
2021-09-25 10:50:48
92
原创 2021-07-04 简易瀑布流原理
简易瀑布流 window.onload = function () { // 封装方法获取数组当前所有项最小值的下标 function getMinIndex(arr) { return [].indexOf.call(arr, Math.min.apply(null, arr)) } // 背景图片瀑布流函数 // 获去节点容器
2021-07-04 01:45:48
123
原创 javascript 数组假（模拟）分页效果（浅显易懂）
// 假分页效果 (多用于商品评论的格式处理)// arr 为 后端传给我们的数组 num 为 每页展示的条数 function page(arr, num) { // 新建数组，用于储存新数组 var arrNew = [] // 如果单页的数组长度大于传入数组长度，则证明一个页面就可以展示 if (arr.length <= num) { arrNew.push(arr) } else { // 下面这部分的操作是将 [1,2],[3.4]存入a.
2021-05-15 17:39:05
506
原创 前端环境的配置和安装
1.安装node.jshttps://nodejs.org/en/直接点击下载。如图：然后ctrl + r 输入 cmd ，如图输入 node -v出现v14.15.0 说明安装成功。2.安装git
2021-05-11 23:21:14
331
原创 多行文本自动换行添加省略号
## 标题文本字数不确定，实现自动换行添加省略号直接上代码：在这里插入代码片<style> * { padding: 0; margin: 0; } .box { width: 120px; border: 1px solid cyan; /* 主要代码 */ overflow: hidden; display: -webki...
2021-05-11 12:13:03
257
原创 Set和Map数据结构的认知和使用
Set和Map数据结构的认知和使用一， setEs6 提供了 新的数据结构 Set， 形式类似于数组， 有一个很大的优点， 它内部的 成员的值都是唯一的 ，这样我们就可以运用它来去重Set 函数的特性：1.set 函数本身是一个构造函数2. 添加成员 用 add（） 方法3. 接收一个参数，参数类型为数组（具有iterable接口的其他数据函数啥是terable）4....
2021-04-06 19:42:14
144
原创 ...展开运算符的使用场景及其运用
解构赋值1.1数组的解构赋值const [a1, a2, ...a3] = ['a', 'b', 'c', 'd']console.log(a1, a2, a3); //a b [ 'c', 'd' ]数组中按顺序匹配，将’a’赋值给a1，'b’赋值给a2，剩下的元素以数组形式赋值给展开运算符作用的变量1.2 对象的解构赋值对象的解构赋值也是比较简单let obj = { a: 111111，> 这里是引用 b: 222222, c: 333333, d: 4
2021-04-05 15:11:19
673
原创 关于Google浏览器控制台的坑
关于Google浏览器控制台打印的坑最近在reac学习的时候，本想去了解react生命周期，就想做一个累加的小demo ，后来在shouldComponentUpdate函数打印的时候出现了一些小问题，下面给大家看看图片。大家注意观察34和36 行 打印的 结果：同样是一个函数里面的this ， 为什么控制台this展开看到的， 和 我们打印出来的结果不一样呢？ 我们带着这个疑问在来往下看 go !观察 打印结果，我们得出结论：你点击小三角展开，看到的信息，是最终的信息，也就是点击
2021-04-04 08:47:07
1214
原创 对与Vue生命周期与八大钩子函数的理解与解读
对与Vue生命周期与八大钩子函数的理解与解读由于学习原因一直没有怎么写文章，最近学习的时候碰到钩子函数，特地花点时间来学习一下，如果有理解不到位之处，请各位大佬在评论区多多指点 ，我将会从官网的生命周期图解来一一解读。从小白的角度来剖析代码。语言多有不严谨之处，请见谅。才学疏浅，仅此而已。==========第一步我们先来理解一下什么是生命周期生命周期 ： 每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。（事物都有从无到有，从生到死的一
2021-03-11 19:27:51
219
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人