- 博客(43)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 javascript中判断This指向的方法
最近在读《你不知道的JavaScript》上卷，看到了关于this的相关文章，发现在日常学习的时候自己对this 的理解真的很匮乏，读完书才发现其实this内部有一套属于自己的绑定规则。前置知识： 调用位置在学习this 的绑定规则之前，首先要理解一个概念就是调用位置。从字面上理解的就是指函数被调用的位置，但是如果遇到函数嵌套调用比较深或者某些编程模式隐藏了真正的调用位置就没有办法判断真正的调用位置了。那么这个时候就要靠调用栈来判断判断如下函数：function foo () { cons
2021-04-21 13:58:00
831
2
原创 为什么客户端渲染首屏渲染慢和SEO问题
在日常生活中，无论是客户端渲染还是服务端渲染，在感官上我们似乎很难发现二者在速度上的区别，但是我如果在网络基础速度较慢的情况下这个问题就会尤为突出。我们可以通过这个方式来改变网络加载速度，来体会二者的区别。在慢速网络的情况下，大约加载了6s左右的时间传统的服务端渲染只花费了2秒左右。这是服务端请求的结果，发现服务端渲染请求很简单,html 直出,浏览器加载到文档就可以开始渲染.而客户端渲染，至少要经历三次http请求周期第一次是页面的请求第二次是js对应的请求第三次动态数据的请求
2021-03-16 13:58:03
2640
10
原创 变量解构赋值的7大用途总结
1：交换两个变量的值 let a = 12; let b = 32; [a,b] = [b,a]; console.log(a,b)在ES6之前我们交换两个变量的值的时候往往需要声明一个中间变量，在ES6中可以通过解构赋值来实现，这种写法：简洁、易读、语义清晰2：函数返回多个值返回一个数组：function exampleArr() { return [1,2,3];}var [a,b,c] = exampleArr();console.log([a,b,c]);返回一个
2020-11-04 09:21:30
2441
8
原创 webpack打包css报错（已解决）：UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function
初学者在学习webpack中容易踩一个版本过高的坑这是我在使用webpack打包css时，出现的一个错误，导致css无法打包原因是 css-loader 和 style-loader 版本过高解决方法：这是我原来的package.json的版本信息现在我手动下调了一下版本 "css-loader": "^3.3.0", "style-loader": "^1.0.0"然后再命令行中 依次输入：npm installnpm dev重新安装项目依赖，然后再次使用webpack
2020-09-09 11:24:09
9260
23
原创 （附带免费源码文件）炫酷缩放图片展示特效，通过90%以上css以及一点点JS实现
缩放图片展示特效首先看一下这个特效的最终效果：首先来分析一下这个效果都有哪些功能首先初始化效果为6列，分别展示了图片的一部分进入页面或者刷新页面时，每一列出现有一定时间间隔，有错落感鼠标移入每一列时，每一列会有变化鼠标点击每一列时，会展开当前图片，其余图片隐藏掉，同时图片出现一个title 和一个 close按钮关闭每一列时会收紧当前图片，并还原到初始化状态首先乍一看好像很复杂的样子，但是这个特效真的用了 99%的css3属性，仅仅是在打开关闭和类名切换的时候用到了一点点js。那么怎
2020-08-22 11:07:05
1898
2
原创 纯CSS实现图片百叶窗展示效果
纯CSS图片百叶窗首先给大家看一下完成效果主要思路：其实这个百叶窗还是利用了一种障眼法，我们看上去是鼠标移动上去之后，图片展开了，其实这些图片在原地根本没有动，只不过是我们把这些图片放在了一个列表里，相互叠加，鼠标移动的同时改变列表的宽度。第一步：构建一个百叶窗框架html代码： <div class="container"> <ul> <li></li> <li></
2020-08-18 18:47:25
6506
16
原创 CSS实现loading小动画
纯css实现loading动画相信各位上网过程中最不希望看到的就是加载中不停转圈圈的画面了那么他是怎么实现的呢？其实通过一些简单的css技巧就可以实现啦！首先双手奉上代码 <style> *{ margin: 0; padding: 0; } body{ background-color: #000000; } .container{
2020-07-25 10:12:04
3691
2
原创 React18: 如何使用Suspense 等待数据异步加载
那么在Data fetching ，也就是等待数据异步加载的过程中，则需要对数据进行特殊的处理，现有的Relay框架，Next框架则已经支持这种格式，可以直接使用Suspense，这也是suspense 处于一个实验性阶段的原因之一，希望越来越多的框架可以支持suspense～。1：动态加载组件 （但这并不是一个react 18的新特性）有了这个函数之后，就可以对得到的promise对象进行处理。文中如果有任何问题欢迎大家交流与讨论～请求完成之后则会替换成相应的结果。才可以使用这个标签，
2023-04-02 18:55:38
1850
原创 Client does not support authentication protocol requested by server； consider upgrading MySQL client
使用egg.js 连接数据库遇到：Client does not support authentication protocol requested by server; consider upgrading MySQL client网上查阅了一些资料终于找到了解决办法：首先进入mysql：依次输入如下命令：ALTER USER 'root'@'localhost' IDENTIFIED BY '123456' PASSWORD EXPIRE NEVER;ALTER USER 'root'@
2021-10-25 22:53:23
390
原创 恢复更新的第一篇：简单介绍React Hooks 之 useEffect
博客停更了将近半年，今天终于开始再次更新了，停更的这段时间发生了很多事情，自己所使用的技术框架也有了一定的转型，现在开始使用React 进行开发啦！其实我本人也更喜欢React，尤其是JSX语法让我觉得更加的舒服，所以以后更新的内容更多的会偏向于 React技术栈以及一些工程化思想的东西。复更第一篇第一篇从React Hooks中的一个api开始，慢慢的后续会介绍更多的Hooks，Hooks就是React给我们提供的一些方便编程的钩子，这些函数为什么会取名叫钩子呢，我是这样理解的：日常生活中经常会.
2021-10-19 23:17:52
425
2
原创 告知服务器意图的HTTP方法总结
最近面试总是被问到http相关的内容，这里做一个简单的总结：前置知识：URL与URIURL是我们平时非常常见的一种称呼，浏览器访问的网页地址就是一个url，rul学名统一资源定位符，英文为 ：Uniform Resouce Locator,说白了就是个地址。但是URI与URL （Uniform Resource Identifier）是不同的根据 RFC2369对URI的定义：Uniform：规定统一的格式可方便处理多种不同类型的资源，而不根据上下文环境来识别资源指定的访问方式。Resour
2021-03-27 15:56:07
234
原创 简述 Diff 算法的执行过程
diff算法是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历，所以时间复杂度只有 O(n)。diff算法有两个比较显著的特点：1、比较只会在同层级进行, 不会跨层级比较。2、在diff比较的过程中，循环从两边向中间收拢。diff流程：首先定义 oldStartIdx、newStartIdx、oldEndIdx 以及 newEndIdx 分别是新老两个 VNode 的两边的索引。接下来是一个 while 循环，在这过程中，oldStartIdx、newStartIdx、
2021-03-12 16:27:02
1284
原创 Vue-Router原理介绍，手写一个自己的Vue-Router
前置知识前端路由的两种模式Hash模式URL中#后面的内容作为路径地址监听HashChange事件根据当前路由地址找到对应的组件重新渲染History模式通过history.pushState()方法改变地址栏监听popstate 事件根据当前路由地址找到对应组件重新渲染手写路由的准备工作新建一个没有vue-router的vue项目在项目中新建router相关文件新建一个route文件夹，文件夹下新建一个index.js，用于存放路由规则import Vue from '
2021-02-18 10:52:51
504
5
原创 webpack中的optimization属性部分功能归纳
什么是optimizationwebpack目前最新的版本是5，但是早在4的时候，就可以通过选择不同的mode模式来优化打包的结果，但是我们仍然可以使用optimization来对打包结果进行优化
2021-01-28 10:49:20
5292
原创 总结一下ES Module 容易踩坑的点，常见问题汇总
最近系统的学习了一下ES Module的一些内容，发现了一些在使用过程中几个容易踩坑的点一：script标签问题出现这个问题要检查在web环境中，html 的script 的标签如果没有加这个type属性，机会报错，因为ES Module是ES6的语法，浏览器是识别不了的题外话，如果在script标签里加了type = “module”会有如下几个特点：会默认变为严格模式，在严格模式下不可以直接使用this每个模块都会变成一个独立的私有作用域，外部是访问不到的可以自动延迟执行脚本，不会阻
2021-01-21 12:45:27
1504
2
原创 介绍一下gulp 的基本使用方法
安装Gulp 是自动化构建的工具之一，今天来记录一下他的一些基本使用的方法初始化项目yarn init --yes使用 yarn 来在开发模式下安装yarn add gulp --dev在项目目录中新建一个 gulpfile.js 文件 ，他是gulp 的入口文件这里可以手动创建 ，也可以通过code gulpfile.js (记得保存)基本用法然后我们就可以在这个gulp 的配置文件内进行一些配置gulpt通过导出函数成员的方式来定义任务exports.foo = do
2021-01-17 18:18:00
379
原创 轻松深入理解JavaScript的继承原理
什么是继承？继承这个词，在生活中有很多种语境，可以是继承财产，也可以是继承权利，或是继承血统，仔细想想他们有一个共同的特点就是，继承者所继承的事物均来自被继承者本身，其实JavaScript的继承也是这样的，很多编程中的思想都可以通过生活中的实例来理解JavaScript的继承体现那么在JavaScript中是怎么实现继承的呢？类式继承首先介绍第一种叫类式继承// 类式继承function Father() { this.FatherValue = true}// 为 Fath
2021-01-14 23:21:30
312
原创 Yeoman的使用与自定义Generator的创建
安装 yeomannpm install yoyarn global add yo安装Generator例如npm install generator-nodenpm install generator-webapp或者使用yarnyarn global add generator-webapp其他需求可参考官方文档官方generators查询使用对应的generators使用命令例如：yo webappyo 后跟generator下载的类别name自定义一个genera
2021-01-14 14:31:27
286
原创 JavaScript静态类型检查器FLow的使用
为什么使用flow？首先明确一下何为动态类型语言：他指的是代码在运行阶段类型才明确，并且之后允许修改那么什么是弱类型呢？其实就是存在隐式类型的转换比如console.log(100 + '100') // 100100这里是引用这里会发生隐式类型转换，字符串看到了前面的加号，隐式的转换了数据类型，参与了运算，这些在java这类强类型的语言中是不被允许的JavaScript作为一种动态弱类型的语言，有如下几个缺点：缺失类型系统的可靠性没有编译环境，导致有些错误不能尽早的暴露代码提示不
2021-01-10 12:26:17
568
原创 手写实现 MyPromise 源码 ，尽可能还原 Promise 中的每一个 API，并通过注释的方式描述思路和原理。
// 初始状态const PENDING = "pending";// 完成状态const FULFILLED = "fulfilled";// 失败状态const REJECTED = "rejected";// 异步执行方法封装function asyncExecFun(fn) { setTimeout(() => fn(), 0);}// 执行promise resolve功能function resolvePromise(promise, res, resolve,
2021-01-08 12:47:21
215
原创 javascript函子的详细解析与发展
函子的详细解析与发展历程最近在拉钩大前端高薪训练营学习，学到了很多从前不知道的知识，自己体会到了很多编程理念和学习编程的方法，感谢班班和指导老师以下是我在学习函子时的一个总结想要对字符串进行处理，比如都变成大写字符，并且返回新的字符串 let str = "la gou jiao yu" let UpperStr = str.toUpperCase() console.log(UpperStr)很简单，通过toUpperCase方法就可以很容易的实现，但是这种方法是对str进行直接操作的，
2021-01-07 15:13:21
1293
4
原创 闭包详解，通过调试工具逐步调试
闭包的形成： 函数和周围的状态（词法环境） 的引用捆绑在一起 形成了闭包闭包可以在一个作用域中调用一个函数的内部函数并访问该函数的作用域中的成员简单的理解就是将外部函数的内部成员的作用域延长了,这里需要补充一个小知识：函数在执行的时候会放入一个执行栈上，当函数执行完之后从执行栈上移除但是闭包发生的时候，在堆上的作用域成员，因为被外部引用不能释放，因此函数依然可以访问外部函数的成员看如下按，这是一个闭包的简单应用// 函数作为返回值function makeFn(){ let msg
2020-12-31 10:23:35
438
原创 webpack：报错：CssSyntaxError（已解决）
css打包时，遇到如下报错ERROR in ./src/index.cssModule build failed (from ./node_modules/css-loader/dist/cjs.js):CssSyntaxError问题原因是：style-loader 和css-loader的顺序写反了，顺序写反就会报CssSyntaxError的错误
2020-12-15 21:43:52
2806
原创 列表最后一项不完全显示，使用margin-bottom 无效（已解决）
最近在做项目的时候遇到一个很尴尬的问题在底部菜单固定之后，列表最后一项显示不完全，通常会使用margin-bottom来让其显示出来，打但是会遇到margin-bottom无效的情况使用padding-bottom 可以完美解决但是这不是从根本上解决问题的办法，如果有其他的办法，欢迎和大家讨论交流...
2020-12-14 10:39:44
1571
原创 介绍一下NPM包管理
npm包管理1、介绍npm是NodeJs项目模块管理工具，它已经集成了nodejs安装包中（自5.2以后新增了npx指令用于解决调用项目内部安装的模块繁琐的问题），使用npm可以实现从NPM服务器下载别人编写的第三方包到本地使用。npm仓库地址：https://www.npmjs.com/当然除了npm以外还有Facebook贡献的Yarn，功能和npm一样，也可以作为包管理工具。npxnode-modules/.bin/mocha --version# 简化成了：npx mocha --v
2020-12-08 12:55:24
556
2
原创 proxy 与 Object.defineProperty 的比较
proxy 与 Object.defineProperty 的比较proxy的优势一、可以监视到更多的对象操作（delete 操作 和 对象中的方法调用等）defineProperty 只能监视属性的读写const stu = { name : 'tianqin', gender : 'female', age: ' 8'}const proxyStu = new Proxy( stu ,{ deleteProperty(target ,property){
2020-11-28 21:05:07
364
原创 总结一下JavaScript中类似数组的对象转化为真正的数组的几种方法
总结一下JavaScript中类似数组的对象转化为真正的数组的几种方法常见的类似数组的对象基本有以下几种：let arrayLike ={ '0': 'a', '1': 'b', '2': 'c', length :3} // 这种类数组是未定义遍历接口的对象const oDiv = document.querySelectorAll('div'); // 定义了遍历器接口的对象还有一种类数组是 函数内部的argument 对象arg
2020-11-15 17:05:08
636
原创 Vue报错：error Extra semicolon semi 已解决
这个错误的原因是在13行第二个字符的位置使用了引号去掉分号之后就可以正常跑起来了！值得一提的是vscode插件ESlint在格式化文档的时候会自动添加分号
2020-11-03 20:46:04
7778
2
原创 详细介绍Vue-cli 的安装与使用
Vue-cli首先要明确一件事情：Vue-CLI ≠ Vue，Vue-CLI就是一个Vue工具。1、单文件组件在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JS 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由JS驱动的时候，下面这些缺点将变得非常明显：所有的组件都放同一个html文件中没有构建
2020-10-22 17:17:22
283
原创 总结在Vue中可以使用的几种网络请求方式
##1、XMLHttpRequest浏览器对XMLHttpRequest对象的支持度不足, 创建 XMLHttpRequest 对象时需要对IE浏览器做的兼容解决。：XHRreadyState0-4，0表示未初始化，4表示请求已完成status（HTTP响应状态码）200：OK，成功3XX【重定向系列的状态码】301：永久重定向302：临时重定向307：内部浏览器（缓存）重定向4XX【错误系列】400：bad request，错误请求401：鉴权失败403：禁止
2020-10-13 20:38:55
2997
原创 Vue2.0入门详解
一、Vue基础1.1、概述作者：尤雨溪官网：https://cn.vuejs.orgVue.js是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。(SPA单页面应用，所有的显示都在一个页面当中)渐进式：一步一步，不是说你必须一次把所有的东西都用上自底向上设计：是一种设计程序的过程和方法，就
2020-09-24 09:41:42
2476
原创 Vue双向数据绑定原理
***obj***要定义属性的对象。***prop***要定义或修改的属性的名称 。***descriptor***要定义选项。
2020-09-17 15:20:37
139
原创 深入理解自定义构造函数（javascript模式读书笔记）
深入理解自定义构造函数在javascript中，有很多方法可以创建对象通过字面量的方式通过内置的构造函数通过自定义的构造函数举个例子 ： 这是一个最常见的自定义构造函数，实例化一个Person对象叫tianqin var Person = function(name){ this.name = name; this.say = function(){ return "I am" + " "+this.name }; }; var tianQin =
2020-09-05 07:33:36
1000
2
原创 3D翻转盒子图片展示特效（解决鼠标进入不同的边，自动判断进入的是什么方向）
3D翻转盒子图片展示特效首先展示一下完成的效果第一步：构建html结构在一个容器中，生成六个小盒子，这里我使用了 ul li 的方式 在每一个li中 有一个 pic-area 用来包裹图片和文字，我这里使用了弹性盒子布局的方式，实现了演示的布局，其他方式也都可以，然后通过把文字区域定位，与图片区重叠，为后续构建立方体做准备，为了看得清楚，我增加了一点点透明度，后期会删掉一部分html代码如下： <div class="wrapper"> <ul>
2020-08-28 02:39:05
1312
3
原创 VSCode 添加自定义注释（附带红色警戒经典注释风格）
如何设置一个自定义注释整洁的代码和注释风格总是给人一种眼前一亮、赏心悦目的感觉，同时详细的注释也是程序员所必须的职业素养之一今天主要分享一下如何在VS Code中设置自定义 注释第一步:使用ctrl + shift + p 调出如下窗口，并且输入snippets第二步：进入json文件编辑这里以自定义js注释为例：进入到 json 文件中后，添加如下代码，大家可以自定义设计，保存退出 我这里是一个类注释 一个方法注释 "Print to js class": { "pre
2020-08-24 11:21:32
5610
原创 单一var模式以及for循环的小优化（阅读《javascript模式》笔记）
单一var模式在介绍单一var模式之前，先聊聊代码优化，为下文做一个简单的铺垫我认为作为一个程序员要有一个觉悟就是要拥抱变化，无论是技术的革新还是需求的变动，变化如流水，人也要 “随波逐流”，我们在完成一款软件的设计之后，需求的变化以及BUG是非常常见的事情，我们在解决这些问题的同时，其实是把大量的时间，投入到了重新学习和理解相应的问题 以及理解当时用于解决相应问题的代码 所以编写可维护的代码显得尤为重要易于维护的代码有如下特性阅读性好具有一致性预见性好看起来如同是一个人编写有文档那
2020-08-13 14:25:28
381
原创 通过时间差来解决鼠标 mousedown/mouseup和click事件的冲突
今日有一需求：鼠标按下可以拖动方块移动，松开鼠标方块留在原地，双击鼠标可以改变鼠标样式首先：鼠标双击（click）事件是通过鼠标按下（mousedown）和鼠标抬起（mouseup）两个动作共同完成的，当我们为一个对象同时绑定这三个事件时，无论绑定的顺序如何，他的执行顺序都是先down然后up 最后click div.onmousedown = function(){ console.log('鼠标按下了！'); } div.onc
2020-08-08 11:20:03
4861
1
转载 JavaScript实现带有开始、暂停、复位的秒表
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #showTime { width: 300px; height: 60px;
2020-08-05 17:53:12
499
原创 JavaScript算法之冒泡排序
JavaScript算法之冒泡排序及其优化冒泡排序的英文是bubble sort 他是一种很基础的交换排序算法。我们平时看到的小气泡会不断的向上漂浮，然后这种算法中的每一个元素都可以像小气泡一样朝着一个方向不断移动，可能就这样取名为冒泡排序冒泡排序的思想主要是将相邻的元素两两比较，当一个大于右侧相邻元素的时候，就交换他们的位置；如果小于或者等于的话，位置就不变，可以通过这个动图非常直观的去理解这种思路接下来我们用代码去实现 var arr = [7,3,1,6,8,9,10,2,4,5];
2020-08-02 23:27:51
200
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人