![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 61
whuhewei
拥抱变化
展开
-
牛客NC61 两数之和
两数之和原创 2022-10-14 14:35:31 · 411 阅读 · 0 评论 -
npm安装github包
背景之前有个需求要做一个无线滚动的列表,于是使用了react-infinite-scroll-component需要让列表能够自动滚动并自动加载数据,设置为每100毫秒加载一条新数据并自动滚动到底部。发现实现起来跟期望有差异,列表并没有按照1秒加载10条数据的速度加载,实际要略慢些。通过分析react-infinite-scroll-component源码发现这个组件在监听滚动时有个默认的150毫秒的节流操作:我想取消掉这个默认的节流行为。fork代码仓库修改fork后的仓库地址为该组件新增原创 2022-03-19 14:56:06 · 2947 阅读 · 0 评论 -
快速打包React+Electron项目
背景上一篇博客介绍了如何快速搭建React + Electron的开发环境,简单应用开发完毕后需要打包成应用程序,比如你需要把你开发的App发给其他人使用。下面基于上一篇博客内容进一步介绍如何打包:打包React项目首先修改main.js因为现在你要将react项目打包在build文件夹下面,所以加载应用处改成如下:// 加载应用----react 打包mainWindow.loadURL(url.format({ pathname: path.join(__dirname, './bui原创 2022-03-04 10:18:33 · 1343 阅读 · 2 评论 -
三分钟搭建React + Electron开发环境
三分钟搭建React + Electron开发环境背景创建React项目添加Electron包相关配置项目根目录下新建main.js配置package.json启动electron启动效果背景先前的博客中介绍过怎么通过Webpack搭建React的开发环境,自己搭建需要很多的手动配置工作。当需要快速开发一个简单的React应用时,推荐使用create-react-app快速生成React的开发环境。怎么快速搭建一个Electron环境是简单的,但是搭一个React + Electron的环境是略微有原创 2022-03-03 10:23:24 · 1546 阅读 · 1 评论 -
electron实现简单应用番茄钟
package.json{ "name": "electron-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron ." }, "keywords": [], "author": "",原创 2021-10-23 14:45:58 · 329 阅读 · 0 评论 -
实现对预检请求的跨域(踩坑)
写在前面由于这篇博客承接自我的上一篇博客,因此在看这篇博客之前先看我的上一篇博客哦~问题的由来前几天我写了篇记录前端实现跨域的操作并成功实现了跨域(通过代理为响应头添加允许跨域的字段),今天突然发现不work了,又报了跨域的错误,报错信息如下:在Crome中查看预检请求关于简单请求、复杂请求,以及预检请求(OPTIONS)的由来网上有很多介绍性的文章,在此不再赘述。一言以蔽之,是因为我们获取token的post请求设置了content-type: application/json的头部字段引起了原创 2021-09-06 21:26:38 · 4493 阅读 · 0 评论 -
记一次前端解决跨域问题的实践
12原创 2021-09-02 22:05:35 · 871 阅读 · 0 评论 -
设计模式——JavaScript实现单例模式
单例模式的定义保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。适用场景一个单一对象。比如:弹窗,无论点击多少次,弹窗只应该被创建一次。js代码class CreateUser { constructor(name) { this.name = name; this.getName(); } getName() {原创 2020-08-12 11:02:26 · 236 阅读 · 0 评论 -
刷题——二叉树的镜像(翻转二叉树)
题目描述请完成一个函数,输入一个二叉树,该函数输出它的镜像。例如输入:镜像输出:js代码/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** * @param {TreeNode} root * @return {TreeNode} */var mirro原创 2020-08-03 08:36:48 · 243 阅读 · 0 评论 -
刷题——元素计数
题目描述给定一个整数数组arr,计数元素x,使x + 1也在arr。如果在arr中有重复的,分开计数。例1:Input: arr = [1, 2, 3]Output: 2例2:Input: [1, 1, 3, 3, 5, 5, 7, 7]Output: 0例3:Input: [1, 3, 2, 3, 5, 0]Output: 3例4:Input: arr = [1, 1, 2, 2]Output: 2思路分析首先使用字典将数组中的值及其出现的次数按照键值对的形式存储起来,原创 2020-07-04 08:58:53 · 115 阅读 · 0 评论 -
js使用reduce实现组合函数
题目描述/** * 函数组合运行 * 说明:实现一个方法,可将多个函数方法按从左到右的方式组合运行。 * 如`composeFunctions(fn1,fn2,fn3,fn4)`等价于`fn4(fn3(fn2(fn1))`。 * 示例: * const add = x => x + 1; * const multiply = (x, y) => x * y; * const multiplyAdd = composeFunctions(multiply, add);原创 2020-06-21 11:31:21 · 1046 阅读 · 0 评论 -
ES5和ES6实现每隔一秒打印一个数字
要求隔一秒打印出一个1,再隔一秒打印出个2,再隔1秒打印出个3…废话不多说,直接上代码:ES6for(let i = 1; i <= 10; i++){ setTimeout(function () { console.log(i); }, 1000 * i);}ES5for(var i = 1; i <= 10; i++){ (function (i) { setTimeout(function () {原创 2020-06-20 12:30:39 · 1299 阅读 · 0 评论 -
实现js中的new
在实现new方法之前首先我们需要知道在使用new操作符创建对象时发生了什么:创建一个空对象将空对象的隐式原型指向构造函数的显式原型改变构造函数中的this指向并执行构造函数返回这个新对象上面这个过程是针对一般情况的,即构造函数中没有返回值。有时候构造函数中会return一个对象,这个时候我们返回的应该是这个return的对象而不是我们创建的对象。下面给出create()方法的实现:...原创 2020-04-30 11:30:51 · 272 阅读 · 0 评论 -
实现js中的instanceof
js中的instanceof操作符用来判断某个对象是否是某个构造函数的实例,使用方法为obj instanceof fun,左侧是一个对象,右侧是一个构造函数,如果该对象是构造函数的实例(含继承),则返回true,否则返回false。下面我们来实现一下instanceof:function instance_of(l, r){ // l代表操作符左侧的对象,r代表操作符右侧的构造函数 wh...原创 2020-04-29 13:41:53 · 532 阅读 · 0 评论 -
TCP拥塞控制
TCP的拥塞控制在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络性能就要变坏。这种情况就叫做拥塞。若出现拥塞而不进行控制,整个网络的吞吐量将随输入负荷的增大而下降。TCP有四种拥塞控制算法,分别是慢开始、拥塞避免、快重传和快恢复。下面介绍这四种拥塞控制算法的基本原理,假定如下条件:数据是单方向传送,而另一个方向只传送确认。接收方总是有足够大的缓存空间,因而...原创 2020-04-28 18:26:10 · 256 阅读 · 0 评论 -
JavaScript 最常用的五种继承方式
继承是OO语言中的一个最为人津津乐道的概念。下面分别来细数一下JavaScript中最常用的五种继承方式:一、原型链实现原型链有一种基本模式,其代码大致如下:function SuperType(){ // 超类型的构造函数}function SubType(){ // 子类型的构造函数}SubType.prototype = new SuperType(); // 原型链继承...原创 2020-03-31 10:50:20 · 220 阅读 · 0 评论 -
JavaScript 事件委托
在谈到前端性能优化时,相信大家对其中一条优化策略有印象:“善于使用事件委托”。那么什么是事件委托?事件委托又是怎样提高前端性能的呢?出现背景由于事件处理程序可以为现代Web应用程序提供交互能力,因此许多开发人员不分青红皂白地向页面中添加大量的处理程序。在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先,每个函数都是对象,都...原创 2020-03-27 09:09:29 · 172 阅读 · 0 评论 -
JavaScript 延迟脚本与异步脚本
我们知道,JavaScript的解析执行过程是同步的。因此,当我们在文档的<head>元素中包含JavaScript文件时,意味着必须等到全部JavaScript代码都被下载解析执行完成以后,才能开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容)。对于那些需要很多JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏...原创 2020-03-26 08:49:29 · 167 阅读 · 0 评论 -
JavaScript 反转字符串
在JavaScript中怎么反转一个字符串?下面展示两种方法:使用for循环这种方法可能是最容易想到的,即将原字符串倒序循环一遍赋给新字符串即可,代码如下:var str = "Hello World";var reversedStr = "";for(var i = str.length - 1; i >= 0; i --){ reversedStr += str[i];}...原创 2020-03-25 08:57:07 · 457 阅读 · 0 评论 -
常见HTTP状态码
当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头用以响应浏览器的请求。下面是常见的HTTP状态码:200: 请求成功301: 资源(网页等)被永久转移到其它URL304: 未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。404: 请求的资源(网页等)不存在500: 内部...原创 2020-03-22 09:26:36 · 986 阅读 · 0 评论 -
JavaScript 箭头函数
ES6标准新增了一种新的函数:Arrow Function(箭头函数)。之所以叫箭头函数,是因为它的定义用的就是一个箭头:var f = x => x * x;上面的箭头函数相当于:var f = function(x){ return x * x;};可以看到使用箭头函数后代码简洁了很多。可以这么理解,箭头的左边是函数参数,右边是函数体。关于箭头左侧:如果箭头函数不需要参...原创 2020-03-21 16:48:20 · 179 阅读 · 0 评论 -
TCP的三次握手与四次挥手
客户端与服务器建立连接之前要经过TCP三次握手,关闭连接之前要经过TCP四次挥手,下面分别进行介绍:三次握手过程理解图解:第一次握手:建立连接时,客户端首先向服务器发送一段TCP报文。其中,标志位为SYN,表示“请求建立新连接”,将序列号设为x。随后客户端进入SYN-SENT阶段。第二次握手:服务器端接收到来自客户端的TCP报文之后,结束LISTEN阶段。并返回一段TCP报文。其中,标志...原创 2020-03-20 17:45:39 · 138 阅读 · 0 评论 -
HTTP与HTTPS的区别
产生背景HTTP(超文本传输协议)被用于在Web浏览器和网站服务器之间,以明文方式传递信息,不提供任何方式的数据加密,因此使用HTTP协议传输隐私信息(如:银行卡号、密码等支付信息)非常不安全。为了解决这一安全缺陷,网景公司设计了SSL(Secure Sockets Layer)协议,在HTTP的基础上加入了SSL协议,SSL依靠SSL证书来验证服务器的身份,并为浏览器和服务器之间的通信加密。...原创 2020-03-19 12:01:07 · 195 阅读 · 0 评论 -
JavaScript 节流/防抖
先来说一下节流,节流可以用来优化网络请求性能。它的思想是:对于一个事件,为该事件绑定节流函数之后可以让该事件在给定的时间间隔内只能被执行一次。怎么做到的呢,设置一个计时器,每次执行事件时首先判断本次事件的执行距离上次执行时间是否大于给定的时间间隔,若小于给定的时间间隔,则事件不予执行;若大于给定的时间间隔,则执行事件,并更新计时器的值。节流的应用场景有:对于点击按钮需要与后台通信的情况,比如双十...原创 2020-03-17 16:04:01 · 254 阅读 · 0 评论 -
JavaScript实现类似百度的智能搜索框
很多网站都提供智能搜索框这一功能,它能根据用户的输入自动提示出需要补全的数据项,方便了用户的查询操作。下面用JavaScript+jquery在前端层面实现了智能搜索框功能,代码如下:<!DOCTYPE html><html lang="en"><head> <title>智能搜索框</title> <meta...原创 2020-03-16 17:08:32 · 2064 阅读 · 2 评论 -
Web安全之CSRF跨站请求伪造
跨站请求伪造(Cross-site request forgery),是一种挟持用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。与XSS相比,XSS利用的是用户对指定网站的信任,CSRF利用的是网站对用户网页浏览器的信任。一、CSRF漏洞现状CSRF这种攻击方式在2000年已经被国外的安全人员提出,但在国内,直到06年才开始被关注,08年,国内外的多个大型社区和交互网站分别爆出C...原创 2020-03-15 08:52:31 · 369 阅读 · 0 评论 -
Web安全之XSS跨站脚本攻击
XSS跨站脚本攻击指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript,攻击成功后,攻击者可能得到包括但不限于更高的权限、私密网页内容、会话和cookie等各种内容。一、原理HTML是一种超文本标记语言,通过将一些字符特殊地对待来区别文本和标记,例如,小于符号(<)被看作是HTML标...原创 2020-03-14 15:46:55 · 1587 阅读 · 0 评论 -
Web安全之SQL注入
一、什么是SQL注入?SQL是操作数据库数据的结构化查询语言,网页的应用数据和后台数据库中的数据进行交互时会采用SQL。SQL注入是指将Web页面的原URL、表单域或数据包输入的参数,修改拼接成SQL语句,传递给Web服务器,进而传给数据库服务器以执行数据库命令。当Web应用程序的开发人员对用户所输入的数据不进行过滤或验证(即存在注入点)就直接传输给数据库,就可能导致拼接的SQL被执行,获取数据...原创 2020-03-10 16:27:32 · 1041 阅读 · 0 评论 -
JavaScript 原型
首先来看一个用构造函数创建对象的简单例子:function Person() {}var person = new Person();person.name = "David";console.log(person.name); // David使用构造函数创建对象的主要问题,就是每个方法都要在每个实例上重新创建一遍。这个时候我们就需要用到函数的原型:一、prototype(原...原创 2020-03-09 14:04:27 · 157 阅读 · 0 评论 -
JavaScript 作用域
一、执行环境与变量对象执行环境是JavaScript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象,但解析器在处理数据时会在后台使用它。全局执行环境是最外围的一个执行环境。在Web浏览器中,全局执行环境被认为是window对象,因此所...原创 2020-03-08 11:28:53 · 141 阅读 · 1 评论 -
JavaScript 事件处理机制(事件模型)
DOM是树形结构,如果父子节点都绑定事件,事件处理先后的顺序如何决定?这就涉及到事件流的概念:一、事件流事件流指的是从页面中接受事件的顺序。事件冒泡事件冒泡是一种从下往上的传播方式,事件由文档中嵌套层次最深的节点逐渐传播到高层父节点。事件捕获事件捕获流处理事件的顺序与事件冒泡相反。JavaScript事件处理程序遵循先捕获(父节点先发现事件)后冒泡(从子节点向上传递)的规则。 如下...原创 2020-03-06 11:40:41 · 916 阅读 · 0 评论 -
CSS 定位
position(定位)属性指定了元素的定位类型。元素可以使用顶部,底部,左侧和右侧属性进行定位。然而,除非是先设定position属性,否则这些属性(top/bottom/left/right)无法工作。不同的定位方法有不同的工作方式,下面对各种定位方法进行介绍:static定位HTML元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到top,bottom,left,ri...原创 2020-03-05 13:45:36 · 219 阅读 · 0 评论 -
CSS 盒子模型
盒子模型是CSS中非常重要的一个概念。所有HTML元素都可以看作盒子。在CSS中,"box model"这一术语一般在设计和布局时使用。CSS盒模型本质上是一个盒子,封装内部的的HTML元素,它包括:实际内容,填充(内边距),边框和外边距。下面的图片说明了盒子模型:下面依次来说明各部分:content(内容)该部分是盒子的内容,可以显示文本和图像。padding(填充)该部分是透明的,...原创 2020-03-04 09:42:13 · 356 阅读 · 0 评论 -
JavaScript 垃圾收集
JavaScript具有自动垃圾收集机制,也就是说,执行环境会负责管理执行过程中使用的内存。这种垃圾收集机制的原理其实很简单:找出那些不再继续使用的变量,然后释放其占用的内存。为此,垃圾收集器会按照固定的时间间隔周期性地执行这一操作。一、什么是垃圾一般来说没有被引用的对象就是垃圾,就是要被清除,有个例外如果几个对象引用形成一个环,互相引用,但根访问不到它们,这几个对象也是垃圾,也要被清除。二...原创 2020-03-03 11:45:39 · 129 阅读 · 0 评论 -
JavaScript RegExp类型
正则表达式在很多编程语言中都是一个很重要的概念,JavaScript通过RegExp类型来支持正则表达式。一、正则表达式模式下面列举一些使用频率较高的匹配模式:量词量词描述n+匹配任何包含至少一个 n 的字符串n*匹配任何包含零个或多个 n 的字符串。n?匹配任何包含零个或一个 n 的字符串。大括号大括号描述{n}精确匹配...原创 2020-03-02 16:35:14 · 134 阅读 · 0 评论 -
JavaScript Array类型
Array类型是JavaScript中非常常用的类型。JavaScript的数组有两大特点:JavaScript数组的每一项可以保存任何类型的数据。也就是说,可以用数组的第一个位置来保存字符串,用第二位置来保存数值,用第三个位置来保存对象,以此类推。JavaScript数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。以上两点跟C++数组有相当大的区别,在使用时需要...原创 2020-03-01 20:45:07 · 196 阅读 · 0 评论