- 博客(87)
- 收藏
- 关注
RSS订阅原创 运行npm install 遇到报错 zlib: unexpected end of file的解决方案
项目运行tnpm install 遇到报错信息为zlib: unexpected end of file可通过清除缓存解决，如下：// 执行以下命令，清除npm缓存npm cache clean --force
2020-11-24 14:49:01
3372
1
原创 leetcode刷题 ｜ 1013.将数组分成和相等的三个部分
1013.将数组分成和相等的三个部分题目描述给你一个整数数组 A，只有可以将其划分为三个和相等的非空部分时才返回 true，否则返回 false。形式上，如果可以找出索引 i+1 < j 且满足 (A[0] + A[1] + … + A[i] == A[i+1] + A[i+2] + … + A[j-1] == A[j] + A[j-1] + … + A[A.length - 1]) 就可以将数组三等分。示例解题思路将数组分为和相等的三部分，即每部分的和都为整个数组和的三分之一。每次
2020-05-16 21:25:32
336
1
原创 React | setState，你到底想怎么样？！
使用过React的小伙伴们，面试中经常会被问到SetState。各种角度来探测你对setState的理解，认知！有时候可能面试紧张到不知所云，有时候可能压根儿不知道面试官想考你什么，总体来说，还是对setState没有驾轻就熟、玩转自如的程度（本着从自身出发找问题的原则才会进步，毕竟。。。面试机会错过就很难补救了）结合面试问题，对setState做一个阐述～1.setState()之后发生了...
2020-03-31 13:20:36
278
原创 面试中常考的源码实现｜promsie相关方法（all、race、any、allsettled和finally）
Promise相关面试常撕代码allPromise.myAll = function (iterators) { const promises = Array.from(iterators); const num = promises.length; const resolvedList = new Array(num); let resolveNum = 0; return new...
2020-02-12 14:26:58
442
原创 面试中常考的源码实现
面试中常被考到的手撕代码：call/apply/bindinstanceof深拷贝基于 ES5/ES6 实现“双向绑定”promise相关1. call/apply/bind的代码实现callFunction.prototype.call2 = function(context) { if (typeof this !== "function") { throw n...
2020-02-11 17:59:18
331
原创 JS-Learning｜数值转换之Number()、parseInt()和parseFloat()
把非数值转换为数值有三个函数：Number()、parseInt()和parseFloat()，规则如下：Number()如果是Boolean值，true和false将分别被转换为1和0；如果是数字值，只是简单的传入和返回；如果是null值，返回0；如果是undefined，返回NaN；如果是字符串，遵守以下规则：如果字符串只包含数字，则将其转换为十进制数值，即“1”会变成1，“1...
2020-02-07 11:24:41
182
1
原创 你的项目中用到HTTP长链接了吗？
面试的时候，面试官针对项目，问：你用到HTTP长连接了吗？我心想没做任何处理，马上回答说，没有！面试官：我说的HTTP默认的长连接没用到吗？噗～关于长连接这个概念经常看见，自以为已经了解了，但是这个知识点还是很模糊，所以再重新了解一下HTTP长连接吧！长连接和短连接是什么众所周知，HTTP请求是基于TCP连接发送的，TCP连接分为长连接和短连接。TCP连接总会提到三次握手????和四次挥手????短连...
2020-01-07 17:04:31
276
原创 《新时期的Node.js入门》读书笔记（五）
第4章 书写异步代码为了保证执行是串行的，将下一个异步操作放到上一个异步操作的回调方法里，当代码嵌套的层数增加，代码的层次结构就会不清晰并且难以维护，这种写法被描述为回调地狱（callback hell）。4.1 异步操作的返回值希望通过简单的函数调用拿到异步操作的返回值，但是外部方法会先于回调函数返回。4.2 组织回调方法回调与CPS将回调函数作为参数传递，这种书写方式通常被称为Co...
2019-11-21 19:24:54
134
原创 《新时期的Node.js入门》读书笔记（四）
第3章 用ES6来书写Node3.1 新时代的EMCAScriptES2015的一个目标就是让JavaScript在语言层面有支撑大型应用的能力。JavaScript的缺陷ES5的语法缺陷：几乎无法支持模块化；没有很好的面向对象支持；没有局部作用域；各种令人惊喜的语法细节，例如0.1+0.2或者[]==[]等Node对新标准的支持Node在6.0版本及之后实现了对ES6的全面支持。可...
2019-11-20 18:40:17
153
原创 《新时期的Node.js入门》读书笔记（三）
第二章 常用模块（二）HTTP服务HTTP模块是Node的核心模块，主要是提供一系列用于网络传输的API，这些API大都位于比较底层的位置，可以让开发者自由地控制整个HTTP传输过程。创建HTTP服务器通常使用createServer方法创建HTTP服务器，该方法返回一个http.server实例。var http = require("http")var server = http....
2019-11-19 22:06:40
181
原创 《新时期的Node.js入门》读书笔记（二）
第二章 常用模块（一）ModuleJavaScript的模块规范：CommonJS：将每个文件看成一个模块，模块内部定义的变量都是私有的，无法被其他模块使用，除非使用预定义的方法将内部变量暴露出来（通过exports和require关键字来实现）。最出名的实现就是Node.js，特点就是模块的加载是同步的。AMD（Asynchronous Module Definition）：采用异步方...
2019-11-17 15:42:08
134
原创 《新时期的Node.js入门》读书笔记（一）
第一章 基础知识Node是什么官网的定义：Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.Node是一个JavaScript运行时（runtime），可以想象成一种编程语言的运行环境。这个运行环境包括了运行代码需要的编译器（解释器）以及操作系统的底层支持等。Node底层使用C++实现，语法则是...
2019-11-15 20:07:22
215
原创 Vue源码分析（一）| vue的初始起点
一直想自己来过一遍源码，所以接下来有一个源码学习过程。刚打开vue源码很迷茫，不知道从哪里开始，这里先推荐一个chrome工具Octotree，可以直接在github上看代码结构，都不用下载源码。直接点到src的core文件夹中，大概这是核心代码吧，我们就从这里开始。。。。。。注意⚠️：我把自己的一些理解以注释的形式写在代码块里啦，有错误请指正！/src/core/index.js// v...
2019-11-15 18:07:21
452
原创 CSS学习 | 《CSS揭秘》读书笔记——第二章
第二章 背景与边框1. 半透明边框使用rgba()和hsla()都可以实现半透明颜色。大部分使用在背景上，而在边框上使用会有一些复杂。默认情况下，背景会延伸到边框所在的区域下层。还好在背景与边框（第三版）中，我们可以通过background-clip属性来调整上述行为所带来的不便。这个属性的初始值是border-box，意味着背景会被元素的border box（边框的外沿框）裁减掉。如...
2019-11-13 15:45:36
205
原创 CSS学习 | 《CSS揭秘》读书笔记——第一章
第一章 引言web标准标准的制定过程：CSS规范通常是由CSS工作组的成员来编写的。人员结构如：88%来自W3C会员公司的成员（比如浏览器厂商、主流网站、研究机构、常规技术公司等）；7%特邀专家；5%W3C工作人员；浏览器厂商并不是对标准唯唯诺诺，反之，他们比W3C有更多发言权。CSS工作组坚持透明原则，所有交流都对大众公开。每项规范从最初启动到最终成熟，都会经历以下阶段：编辑草案（...
2019-11-12 21:09:41
232
原创 隐藏ios微信浏览器alert的域名
隐藏掉ios端微信浏览器alert显示的==域名=代码如下： <script type="text/javascript"> //微信浏览器中，aler弹框不显示域名 (function(){ //判断是否为微信浏览器 var ua = window.navigator.userAgent.toLowerCase(); ...
2019-09-26 15:32:53
359
原创 解决并隐藏h5页面在新版微信iOS 端出现底部白色导航条
新版微信在苹果iOS 端的h5页面如果有路由跳转，会出现底部白色导航条。会占用页面的高度，如何去解决这个问题呢。方案一页面跳转时重新定页面的高度，这样处理导航条仍然存在。方案二使用history.replace代替history.push。由于底部导航栏是因为出现history记录才出现的。使用replace就没有history记录，所以就可以完美隐藏导航栏了！...
2019-09-26 15:11:51
11505
原创 React 实战 |使用hook完成H5首页的实时进度条
h5的首页进度条有的会使用假的进度条，就是定时增加进度。实际上进度条的功能就是要在用户进入实际页面以前进行页面初始加载。由于h5的图片占比非常多，加载图片非常影响性能，所以我们在进度条的同时加载图片，并隐藏掉它们，这样在使用图片时直接去缓存中取就可以了。如下代码就是通过图片加载事件控制进度条百分比的hook代码useEffect(() => { // 获取id为imgs下的所有i...
2019-09-26 14:54:24
993
原创 React 实战 | H5页面在苹果IOS系统点击事件失效——软键盘的“锅”
最近在开发一个用react开发的微信H5页面。遇到了一个bug，就是当软键盘弹出再收起时，软键盘位置的点击事件失效。刚开始以为是onclick的锅，但是换成onTouchStart还是没有好。而且iphone7 Plus没问题，但是iphone7就可以复现这个bug。原因：在IOS下，点击页面中比较靠下的input时，软键盘弹出，页面会上移，document.body.scrollOffs...
2019-09-05 20:09:05
1551
原创 CSS 实战 | CSS实现原地360度无限旋转
CSS实现div原地无限旋转直接上代码.logo { -webkit-animation: animal 4s infinite linear ; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center cente...
2019-08-26 15:12:56
6151
2
原创 如何学前端 | 国内各大前端团队技术博客share
面试官会经常问：你为什么选择做前端？why not？！！前端是一个繁花似锦的领域，社区活跃，更新迭代。。。（虽然弄得我们需要不断去学习！）然而，前端也是一个知识共享的宝藏领域，国内各大团队很多都有前端技术博客，你可以知道他们都在focus哪些技术栈，知道他们是通过什么来学习技术的，等等。那接下来，就分享一下吧淘系前端团队（FED）技术当然不能不提到阿里！在这里，你可以查看web开发...
2019-08-22 21:55:12
222
原创 React 实战 |你知道React hook吗？全面指南↓
Hook是什么？Hook可以让你在不编写class的情况下使用state以及其他React特性。为什么使用hook？在组件之间复用状态逻辑很难：使用hook从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook使你在无需修改组件结构的情况下复用状态逻辑。（自定义Hook）复杂组件变得难以理解：每个生命周期常常包含一些不相关的逻辑。Hook将组件中相互关联的部分拆分成更小的函数（E...
2019-08-21 15:43:08
767
1
原创 移动端适配，自适应布局的各种方案与最佳实践
知识预备：1. 像素像素分为css像素和物理像素（设备像素）在css和js中写的px单位，都属于css像素；物理像素只和设备或者说硬件有关，同样尺寸的屏幕，设备的密度越高，物理像素越多。细节可参考：你真的了解css像素嘛？2. 视口广义的视口，是指浏览器显示内容的屏幕区域，狭义的视口包括了布局视口、视觉视口和理想视口在移动端中，理想视口或者说分辨率跟物理像素之间有什么关系呢？DP...
2019-08-16 19:18:37
1370
原创 React 实战 | antd form表单验证，同时支持onBlur与onChange事件验证
通常使用ant design的表单验证时，我们直接在getFieldDecorator中使用rules来定义校验规则，默认的触发校验规则则的事件validateTrigger为onChange，也就是说，触发onblur事件时不会校验其中的规则。 <FormItem {...formItemLayout} label="文章标题"> {getFieldDecorator('ti...
2019-08-16 13:01:09
16110
2
原创 React 实战 | 基于webpack配置react开发环境
基于webpack配置react开发环境之前只会用脚手架create-react-app来创建react项目，学习一下自己用webpack搭建react项目一、 初始化项目文件夹创建一个项目文件夹，在命令行工具中切到该文件夹目录下，执行npm init进行初始化。文件夹下生成了package.json文件。在文件夹下创建两个文件夹：dist，用于放置编译后的代码src， 用于放置开发...
2019-08-14 17:03:25
378
原创 webpack是什么？概念入门篇
Webpack概念现代js应用程序的静态模块打包器（module bundler），递归地构建一个依赖关系图，包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。入口：指示webpack应该使用哪个模块作为构建其内部依赖图的开始。Entry属性配置。出口：告诉webpack在哪里输出他所创建的bundles，以及如何命名这些文件。Output属性配置。Loade...
2019-08-14 13:11:45
743
原创 React实战 | antd message全局提示，异步移除提示
项目中需要展示一个“创建中”的message全局提示，调用api，等待后台返回成功状态码后，移除“创建中”的message// 第二个参数是表示自动关闭的延时，单位秒。设为 0 时不自动关闭。const hide = message.loading('文件创建中...'， 0)；// 等待api请求成功后，执行关闭hide();...
2019-08-14 10:01:26
6080
1
原创 2019 谷歌 I/O 大会上提出的 JavaScript 新特性，你错过了吗？
2019 谷歌 I/O 大会上提出的 JavaScript 新特性，你错过了吗？查看文章英文原文
2019-08-13 19:39:32
127
原创 React 实战 | 解决引入Antd报警告JSX element type 'RadioGroup' is not a constructor function for JSX elements.
使用公司里的脚手架搭建react项目，但是在使用antd组件时，会显示警告：JSX element type ‘RadioGroup’ is not a constructor function for JSX elements.查看了网上的一些解决方案，大概就是这两种：方案一在tsconfig.json中设置"allowSyntheticDefaultImports": true方案二...
2019-08-13 18:21:14
4219
原创 学习清单 | 好文收藏与推荐之React
好文收藏与推荐之React React 源码解析 从零搭建React全家桶框架教程 让虚拟DOM和DOM-diff不再成为你的绊脚石 《React源码解析》系列完结！
2019-08-11 21:56:29
130
原创 JSONP跨域
什么是JSONP？JSONP 不是 JSON，它是跨域访问的一种机制。JSONP(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么需要这种机制？是因为同源策略。JSONP如何跨域？利用了 <script> 标签允许跨域访问的特点。需要服务器对返回的 JSON 进行包裹，即需要其它域的服务器...
2019-08-11 20:43:10
111
原创 JSON —— JavaScript Object Notation ，是什么？怎么用？
JSON是什么？JSON——JavaScript Object Notation 是一个基于JavaScript对象语法的表示结构化数据标准文本格式。它通常用在web应用程序中传输数据（比如说从服务器发送一些数据到客户端，所以它也可以显示在网页上，反之亦然）。JSON的语法格式JavaSCript已经内置了JSON的解析，我们可以直接使用JSON。JSON和JavaScript对象的不同点...
2019-08-10 15:47:29
439
原创 React实战 | JSON数据展示组件react-json-view的安装与使用
最近项目中新增了一个功能：格式化及高亮展示JSON数据。查找发现了react-json-view，简直太方便了。react-json-view（RJV）是一个用于显示和编辑javascript数组和JSON对象的React组件。使用起来也很简单：// import the react-json-view component// 在需要的组件引入react-json-view组件impo...
2019-08-08 19:28:28
13170
8
原创 CSS-Learning | CSS自定义滚动条样式
滚动条的CSS属性集是从Internet Explorer 5.5开始的一个专有风格hook，这让设计师创建浏览器的滚动条的自定义主题。目前,它暴露在使用Webkit渲染引擎(和Blink)，厂商前缀为Webkit的浏览器。-webkit-scrollbar家族的属性由七种不同的伪元素组成的一个完整的滚动条UI元素：::-webkit-scrollbar，滚动条的背景。它通常是由其他元素覆盖...
2019-08-08 18:59:45
236
原创 开发者必备的chrome插件推荐！
推荐几个开发者常用的chrome插件MomentunReplace new tab page with a personal dashboard featuring to-do, weather, and inspirationReact Developer ToolsAdds React debugging tools to the Chrome Developer Tools.O...
2019-08-07 20:28:53
870
原创 React实战 | JSX的空格与换行不显示问题的解决方案
空格显示不正常这是因为浏览器显示机制，会将连续多个空格显示成1个空格。在这些示例中，HTML和JSX中的空格是一样的<div>Hello•World</div><div>•Hello•World</div><div>••Hello•World</div><div>•••Hello•World•••<...
2019-08-07 18:55:09
10727
原创 Redux thunk | 什么是thunk？在React项目中怎么使用Redux-Thunk？
Redux-thunk什么是thunk？thunk可以理解为函数的另一种称呼，但不是以前我们说的简单函数。Thunk代表的是一个被其他函数返回的函数。 function wrapper_function() { // this one is a "thunk" because it defers work for later: return function t...
2019-08-07 11:37:55
1125
原创 react redux | 能够或者需要创建多个store吗？可以自己直接import store，用在组件上吗？
能够或者需要创建多个store吗？Flux模式描述了一个app中拥有多个store，每个store中存储着某个方面的数据。这将会引发一些问题，类似一个store中的数据需要等待另一个store更新完成。在redux中就不需要这样，因为已经通过把单个reducer拆分成多个更小的reducer来实现。也存在一些情况，需要创建多个不同的redux store，但是理想模式是创建单个store。只拥...
2019-08-06 19:44:26
4079
原创 React 实战 | React Redux 的使用指南
React ReduxReact-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。细节参考React Redux官方英文文档安装npm install react-redux或yarn add react-reduxProvider<Provider / >全局使用...
2019-08-06 15:09:59
334
原创 学习清单 | 前端相关文档资料及链接
最近打算看的文档资料： Redux中文文档 React文档 React Redux英文文档 Redux-thunk Redux-saga中文文档 TypeScript中文手册 Fetch API及使用 webpack中文文档2019/08/05。。。更新中...
2019-08-05 20:42:06
189
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人