- 博客(49)
- 收藏
- 关注
RSS订阅
原创 JS之reduce()实现数组去重(数组包含对象)
多维数组去重(包含对象)先来个复杂的数据结构去重 var arrayNum = [1, 2, [2, 3, 4], [4, 1, 6], [{name:'looper'},{name:'zhuo'}], [{name:"looper"}] ] var hashKey={} var result = [...new Set(arrayNum.reduce((item, next) => { return item.concat(next)..
2020-09-08 17:31:17
1824
1
原创 原生js实现日历效果
先看看效果吧项目结构html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Calender Demo</title> <link rel="stylesheet" type="text/css" href="./demo.css" /> <script te.
2020-08-26 21:44:37
576
原创 彻底搞懂Type Script中的索引签名
索引签名含义索引签名是type script里的一个语法糖 所谓索引，就是根据一定的指向返回相应的值 比如数组的索引就是下标0,1,2.... type script里的索引签名有两种：数字索引和字符串索引数字索引:通过定义接口用来对数组的约束数字索引的本质和数组索引的查找形式一致，只是定义形式不同如果数字索引的数组里存了其他类型，则报错//数组,里面存的值可以为各种类型var arr=[1,2,'3',{name:"looper"}]console.log("普通数组.
2020-07-17 00:24:07
5276
2
原创 跨域你真的理解了吗？跨域请求的实现
1、什么是跨域？跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制,由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况：网络协议不同，如http协议访问https协议。 端口不同，如8080端口访问8081端口。 域名不同，如blog.com访问baidu.com。 域名和域名对应ip,如www.a.com访问20.205.28.90. localhost和127.0.0.1虽然都指向
2020-06-25 11:05:52
157
3
原创 npm安装包命令详解，dependencies与devDependencies实际区别
1.准备工作在本机上安装node.js,地址：http://nodejs.cn/，最新版本14.x，我们只需要12.x就够用了 安装好nodejs之后，在本机输入node -v和npm -v，如果有版本号，则安装成功，node会自动安装npm包管理器 在本机新建一个xxx文件夹，在文件夹终端下初始化一个package.json 使用命令npm init自定义package.json,亦可以使用npm init --yes生成默认的package.json如下： { "name": ".
2020-06-16 10:33:59
6150
11
原创 c#之task与thread区别及其使用
1.什么是thread当我们提及多线程的时候会想到thread和threadpool，这都是异步操作，threadpool其实就是thread的集合，具有很多优势，不过在任务多的时候全局队列会存在竞争而消耗资源。thread默认为前台线程，主程序必须等线程跑完才会关闭，而threadpool相反。 总结：threadpool确实比thread性能优，但是两者都没有很好的api区控制，如果线程...
2019-10-29 13:35:38
27398
10
原创 web剪裁图片
先看看效果(采用react实现，其他框架实现也是一样的)如上，我们可以剪裁任意的图片得到一个剪裁后的base64编码的图片实现(react)1.安装npm i react-cropper -S2.引入import Cropper from "react-cropper";//引入组件库import "cropperjs/dist/cropper.css";//引入相应的样式3.核心代码逻辑层 constructor() { super()..
2020-11-11 10:56:36
399
原创 2021之react最常用的库
1.history.js，记录路由的一些操作记录npm:https://www.npmjs.com/package/historyjs2.pubsub.js，react中的用于消息传递，发布消息和订阅消息npm:https://www.npmjs.com/package/pubsub-js
2020-11-03 17:29:57
756
原创 Jsonp请求的原理实现
jsonp解决ajax的跨域原理jsonp只能解决ajax类型的get跨域请求 jsonp并不是ajax情况，而是一般的get请求，并且在后端动态拼接一个函数调用，在前端执行该函数实现原理 浏览器端：设置我们需要的script标签和请求的回调函数的执行体，并把函数名传到后端做进一步处理<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/...
2020-11-02 13:03:39
358
原创 谈谈JAVASCRIPT中的纯函数
引言在使用JS中的函数时，也没怎么去区别什么时候该用纯函数，用的很是随意，由于知道一些引用变量是浅拷贝，在函数里改变属性会出错，所以平时在使用函数的时候也注意这些地方。直到接触到react，尤其是redux时候，只能用纯函数去实现，所以趁这次整理一次，避免踩坑什么是纯函数函数的出口只依赖于函数的形参，和外界变量没有联系 函数在执行过程中不产生副作用，即为不改变传入形参的值这样说起来比较抽象，我们分别举列子来说明函数的出口只依赖于函数的形参 var count1=1 .
2020-10-13 15:19:09
137
原创 彻底搞懂JavaScript(ES6)的深拷贝与浅拷贝
JS变量的存储方式开始之前先理解下面的几句话深拷贝和浅拷贝是变量在内存中的存放位置不同(堆，栈) 在js中，对象和数组这种复杂的数据结构是放在堆中，堆的地址放在栈中 js中的number，string，bool简单类型是放在栈中 一般直接存放在栈里的变量对应深拷贝，放在堆里的变量是浅拷贝深拷贝实质：深拷贝就是完全复制一份地址，完全是开辟了一个新的空间，如果改变原变量，则不会影响深拷贝出来的变量如果变量存放在栈中，则直接在栈里开辟一个新空间，存放该值 如果变量存放在堆...
2020-09-05 18:08:38
1034
原创 彻底搞懂Javascript函数防抖与节流
为什么会有函数防抖与节流这个概念引用一个经典的例子 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。再举个栗子，假设电梯一次只能载一人的话，10 个人要上楼的话电梯就得走 10 次，是一种浪费资源的行为；而实际生活正显然不是这样的，当电梯里有人准备...
2020-09-04 10:53:10
195
1
原创 彻底搞懂多种方式实现垂直水平居中布局
起源今天看了一篇文章，面试官面试一个有三年经验的面试者，其中一个问题就是：有哪些方式可以实现垂直水平居中的方式？结果面试者就是知道有一个flex布局，支支吾吾也没有说清楚。所以我准备整理一下常用的居中方式：使用absolute绝对定位实现效果：1.使用absolute盒子没有指定宽度和高度,再配合css3里的transform属性实现//代码<body > <div> <h2>我是一个垂直水平居中的元素&l...
2020-09-03 11:27:21
217
原创 HTML之行内元素和块级元素的区别有哪些？
背景在css基础当中，我们往往会遇到块元素和行内元素。在实际开发中，会经常把他们弄混淆，而且很难记住。那么行内元素和块级元素的区别有哪些？下面我们就来说说常见的行内元素<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del&...
2020-08-06 17:44:51
401
原创 在NodeJs中实现WebScoket双工通信
效果图比较简陋，但是基本的功能能看到效果准备工作：本机需要有node环境 新建一个文件夹src，进入src初始化一个package.josn。 使用npm inodejs-websocket -S安装包，-S安装在dependencies："dependencies": { "loadsh": "0.0.4", "nodejs-websocket": "^1.7.2" }, 服务端实现var ws = require("no...
2020-07-31 18:32:41
350
原创 判断自己面试是否成功的细节
面试结束之后，很多人经常会有这样的体验：明明自我感觉良好，可最后却收到了拒信，凉凉。事实上，面试结果在你面试结束的那一刻就已经决定了。而面试官在面试过程中的一系列言语、表情和动作，在一定程度上就已经暗示了你的面试成败，通过观察面试官的言行，就可以大概了解自己面试的情况。一、预示面试失败的“暗示”1. 面试官不关注你的简历，并且忘记你已说过的个人介绍一般来说，在正式开始提出面试问题前，面试官会首先阅读面试者的简历以便提出针对性的问题。如果面试官在面试开始后才看你的简历，则暗示着面试官
2020-07-22 10:26:14
469
2
原创 Type Script高级语法之函数类型接口
函数类型接口：类似于索引签名，对我们的函数进行约束约束：对形参的类型的约束，对返回值的约束//定义一个函数类型的接口//约束：形参必须是两个，第一个string，第二个是number，返回值是stringinterface funcControl { (key: string, value: number): void}let funcTest: funcControl = function (name: string, age: number): void {//声明一个函.
2020-07-17 23:17:08
111
原创 函数式编程封装ajax，并实现缓存机制
varpureHttpCall=memoize((url,params)=>$.getJSON(url,params));//constpureHttpCall=memoize((url,params)=>()=>$.getJSON(url,params));varmemoize=(f)=>{constcache={};return(...args)=>{varargStr...
2020-07-16 09:41:46
137
原创 ES5中的对象冒充继承与原型继承，再也不怕面试官问了
前言面试官：你对es6类了解吗？我：肯定了解啊，我使用angular8，天天都在和类打交道，比如继承，实现接口，我都比较熟悉的面试官：好的。嗯......那你给我讲一下es5的里的类继承方式吧我：啊.......es5还有类的继承吗，不就是创建创建一个构造函数，然后在原型上创建一些属性和方法，实例就可以去使用，利用原型链去查找实现的。面试官：我不是问你这个，我给你举个例子吧，比如有一个func A（）{}，有一个funcB（）{},有哪些什么方法实现B继承A我：好像可以使用call.
2020-07-15 16:46:47
136
原创 JS实现界面有滚动条，滚动到最底部时候触发事件
代码实现：JS：window.onscroll = function () { //变量scrollTop是滚动条滚动时，距离顶部的距离，兼容ie var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度，兼容ie var windowHeight = document.documentElement.clientHei
2020-07-07 16:09:44
1283
原创 手写一份promise的实现
背景最近学习es6新的对象，promise都让我觉得很是重要，于是去查看了源码，决定手写一份promise，了解一下内部的实现Promise的特点用于封装异步操作 可以用于链式执行，串行处理结果很有用途 promise是一个对象，初始化为pending状态，状态一经改变就完成 不管执行成功还是失败都有个结果，且不能逆转 但是promise的中间状态不可控制实现基于以上的特点和查阅了相关资料，实现了原生的promise所有方法github地址：点击这里查看源码...
2020-07-06 19:10:30
152
1
原创 ES6 Promise封装AJAX，异常处理
背景最近在项目时，需要封装AJAX请求实现请求，查阅了一些资料，最后确定使用promise来封装promisees6新出来的对象，用于实现和封装异步操作很方便 promise正好有resolve和reject方法对应成功和失败的请求 promise不管成功还是失败都会有一个结果，方便处理请求失败的回调实现function ajax(url) { return new Promise(function (resolve, reject) { var req = new XMLHt
2020-07-06 19:00:45
316
原创 透彻讲解JS的单线程，宏队列，微队列的执行，看完还不会，转行吧！
开局一张图，过程全靠编您信吗，.........好了，回归正题背景：最近在看js的执行机制时候，联想到很多问题，大家都知道：浏览器是多线程的，JS是单线程的，浏览器在解析的时候只会分配一个线程来执行js 在浏览器中打开一个页面就占用了一个进程，加载页面的时候，浏览器分配一个线程去计算DOM树，分配其它的线程去加载对应的资源文件...再分配一个线程去自上而下执行JS需要知道的几个问题：自上而下执行JS：意思就是一个js文件，从上往下依次执行 js的线程始终只有一个 同步：在一个
2020-07-04 19:08:16
615
1
原创 前端实现HTML标签转义及反转义，又吃螃蟹喽
背景：最近在做一个输入memo之后保存到数据库，当时没注意，等到上线运行一段时间后发现<p><b>等字符很多，觉得有问题，就去试了一下，输入< @和html标签，我屮艸芔茻(戳)，居然给我转译存到db里面去了。后面发现在api里面有个插件对特殊的标签进行了转译。解决方式：既然保存成那个鬼样子了，我也吐了，那就硬来吧如下：html里的innerText和innerHTML其实可以实现相互转译 转译(把标签转译成特殊字符)func
2020-07-02 16:29:45
1339
原创 NPM启动n个监听服务你还不会？看这一篇就够了
背景：在做前端项目的一个需求里，需要启动两个监听的服务，当然可以打开两个终端去分别监听，不过那样太繁琐了，能不能直接在一个终端实现呢，经过研究，发现是可以的，下面来仔细说一下吧：什么是监听服务和执行服务执行服务：就是我们一次性执行的服务，只会执行一次，执行了就结束了，没有后续，例子：webpack监听服务：启动之后不会关闭，只是处于监听状态，每次我们做了动作都会有相应的处理例子：webpack-dev-server此时没退出，说明还在监听启动多监听服务的问..
2020-06-25 13:24:57
700
2
原创 es6Promise熬夜整理
目录1.Promise是什么：2.基本用法：3.Promise中的catch：4.Promise中的finally：5.promise.race（）1.Promise是什么：promise是es6新生的的异步操作一个对象，也可以说是一个容器，是一个链式执行的方式，只看重结果，不考虑中间的监听过程，执行结束后只有两种结果（成功，失败）中的一种，一旦执行完成就结束了。2.基本用法：promise有个构造函数，有两个参数resolve和reject，当时执行到res..
2020-06-23 17:27:25
150
6
原创 Let，Var，Const区别整理
作用域：(es6)calss>function>if(){}=for(){}CONST：Const是一个定义初始化变量的关键字，该变量一旦初始化就不能再改变，只能在块作用域和函数作用域使用。const不能在class作用域定义，只能在function，if，for定义使用，不能再其外部使用，只能在当前块作用域使用，const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。 本质：const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址...
2020-06-23 17:18:27
972
5
原创 .netcore中发送邮件
public void test([FromBody] Class1 class1) { MailMessage mailMsg = new MailMessage();//实例化对象 mailMsg.From = new MailAddress("[email protected]", "looper.m.zhuo...
2020-06-19 23:55:06
1087
5
原创 .netcore自定义异常框架架构
app.UseSimpleExceptionHandler(i => { if (i.Error is BadRequestException) { var badRequestException = i.Error as BadRequestException...
2020-06-19 23:54:56
444
5
原创 前端，后端for，foreach,for和foreach嵌套
后端：for(1) return:直接返回(2) return嵌套:直接返回(3) break:直接跳出(4) break嵌套:只会跳出当前break的循环(5) contiune:终止当前，执行下一条(6) contiune嵌套:终止当前执行，执行下一条foreach(1) return:相当于for里的continue(2) return嵌套：相当于f...
2020-06-19 22:57:15
727
6
原创 npm常用命令还不会？请点击这里
npm是什么NPM的全称是Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包，npm已经是全世界用的做多的包管理器。接下来看看常用命令npm的安装npm是基于nodejs的，所以我们需要先下载nodejs，地址：http://nodejs.cn/download，按照默认路径安装好之后，运行node -v: 运行np...
2020-06-19 18:18:40
369
6
原创 webpack(4)之mode
详细解读webpack配置之mode众所周知，webpack主要的作用就是将项目当中的各种文件(.html、.css、.js、.json、.vue、图片......)全部进行整合打包，所以需要很多的依赖和处理方法，那么它的配置也将会有很多很多的东西....下面，我就将一些比较常用的列举出来，它们的用法以及配置...module.exports = { mode: '', entry: '', output: '', plugins: [], module: [],...
2020-06-17 20:07:19
1748
6
原创 精心整理前端登录验证码实现
最近在做登录的时候需要在界面上开发一个验证码功能，防止恶意登录，先看看效果图：利用canvas实现了一个简单的验证码判别功能：点击验证码刷新验证码 输入忽略大小写 输入空字符串自动tirm附上github的demo代码：点击这里...
2020-06-08 15:34:17
835
6
原创 c#中重写与重载的区别
C#重载和重写的区别重载特征：方法名必须相同 参数列表必须不相同，与参数列表的顺序无关 返回值类型可以不相同用于在给定了参数列表和一组候选函数成员的情况下，选择一个最佳函数成员来实施调用。 public class MyService { public void test(int x, int y) { } public str...
2020-04-21 23:22:09
723
4
原创 Angular之辅助路由
辅助路由即我们在某些场景路由加载组件时，还需要加载另外一些只负责显示的组件，此时我们可以使用辅助路由定义组件<a [routerLink]="[{outlets:{primary:'test2',aux1:'consult'}}]" routerLinkActive="active">Test1</a><a [routerLink]="[{out...
2020-04-20 18:20:33
262
2
原创 Angular中集成Script脚本你还不会？看这篇就够了
背景： 最近在做angular项目时，需要集成一个控件，其中需要引入最新的js文件，所以我们要使用： <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>像这样的方式，并需要写一些初始化的逻辑显示此控件。先看看效果：分析：angula...
2020-04-17 14:57:34
2131
6
原创 web 动态组件的实现
背景组件的模板不会永远是固定的。应用可能会需要在运行期间加载一些新的组件。比如：英雄管理局正在计划一个广告活动，要在广告条中显示一系列不同的广告。几个不同的小组可能会频繁加入新的广告组件。 再用只支持静态组件结构的模板显然是不现实的。你需要一种新的组件加载方式，它不需要在广告条组件的模板中引用固定的组件。先看看效果图：准备工作我们以angular为例来做一次尝试。首先我们抽象地...
2020-04-10 13:54:38
329
3
原创 GIT你还没攻破？请看这里
git和svn对比最核心的区别就是Git是分布式的，SVN是集中式的。SVN必须有一个服务器版本库就放在一个中央服务器。所有开发人员都是与服务器进行交互的。一般的开发流程就是干活时候从中央服务器得到最新的版本，然后干活，干完后需药把自己做的工作推送到中央服务器。 Git不需要有中心服务器，我们每台电脑拥有的东西都是一样的。我们使用Git并且有个中心服务器，仅仅是为了方便交换大家的修改，但是...
2020-03-25 22:13:27
160
5
原创 数据库中char、varchar、nchar、nvarchar的区别
1.定义char： 固定长度，存储ANSI字符，存储定长数据，索引效率极高，存入数据不够长度会自动补上空格 nchar： 固定长度，存储Unicode字符，所有的字符使用两个字节表示，存入数据不够长度会自动补上空格 varchar： 可变长度，存储ANSI字符，根据数据长度自动变化 nvarchar： 可变长度，存储Unicode字符，根据数据长度自动变化，所有的字符使用两个...
2020-03-25 19:17:18
2527
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人