- 博客(23)
- 资源 (1)
- 收藏
- 关注
RSS订阅翻译 [译] 构建你自己的React
现在，我们将要遵循 React 代码的体系结构，一步步的实现我们自己的 React 版本。但是本次并不会将优化以及非必要的特性加入进来。如果你有阅读过我以前任何一篇 构建你自己的 React 文章，这次的不同点在于，本次构建是基于 React 的16.8版本，所以这意味着我们可以使用 hooks 来替代 class。你可以在之前的文章或者 Didact 代码仓库中了解之前构建的 react。而且这里还有一个内容相同的视频。但是本篇文章包含完整的构建过程，并不会依赖于之前的内容。那从头开始，下面是需要.
2020-09-21 10:15:39
146
原创 对象深拷贝—解决循环引用以及递归爆栈问题
在对于对象的深拷贝过程中主要碰到了三个问题：1、需要兼容各种数据类型，除了object外，还有数组、symbol还有set等数据结构（本文只兼容了数组、symbol类型）2、需要解决拷贝对象内的循环引用问题（使用数组记录拷贝过的对象，记录一个拷贝对象的数据结构，{source:原拷贝对象，target:拷贝后的对象}）3、使用递归的方式可能会造成爆栈，解决办法就是采用迭代的方式递归...
2019-08-25 20:10:04
6799
1
原创 Vue响应式原理
解析都在代码注释中；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
2019-07-27 22:06:19
185
原创 前端面试题 （一）:（React）setState为什么异步？能不能同步？什么时候异步？什么时候同步？
1、setState为什么是异步的、什么时候是异步的？setState本身的执行过程是同步的，只是因为在react的合成事件与钩子函数中执行顺序在更新之前，所以不能直接拿到更新后的值，形成了所谓的异步；2、能不能同步，什么时候是同步的？可以同步，在原生事件与setTimeout中是同步的3、验证代码中也包含了关于react批量更新优化的验证：在合成事件与钩子函数中会对多次s...
2019-06-28 20:11:18
4986
1
原创 关于react-router的HashRouter与BrowserRouter（二级路由刷新404）
一、前后端路由冲突的解决在使用react-router的BrowserRouter方式进行路由构建时，遇到了二级路由刷新或者浏览器地址栏键入地址后请求404的问题，这是因为浏览器去请求了server，但这个路由在server并不存在，所以产生了这种结果。 对应的处理方案，在慢慢检索中变得明朗起来，为解决前后端路由冲突...
2019-06-28 17:08:00
2349
原创 websocket心跳机制
一、何为websocket心跳机制？ websockt心跳机制，不得不说很形象；那何为心跳机制，就是表明client与server的连接是否还在的检测机制； 如果不存在检测，那么网络突然断开，造成的后果就是client、server可能还在傻乎乎的发送无用的消息，浪费了资源； 怎样检测呢？原理就是定时向server发送消息，如果接收到server的响应就表明连接依旧存在；二、...
2019-05-01 16:09:00
21750
3
原创 前路漫漫，任重道远—自定义H5播放器填坑记录
最近，在看视频时，突然想了解一下网站视频元素的综合实现，进而想自定义一个H5的播放器；本以为会很简单，结果前前后后搞了好几天，而且还有BUG未解决，暂时未找到合适的处理逻辑；写这篇文章主要是想记录一下这个过程中所学到的以及应该注意的坑；另外，在对播放器的了解过程中，也注意到了一个类库video.js，由于还未进行了解，所以不说太多，其实也说不出来；一、关于视频控制栏controls在全...
2019-04-23 22:55:38
426
原创 复盘Vue构建SPA的配置项与Vuex的使用
webpack下使用vue进行项目构建首先，安装Vue包文件，导入包文件(import Vue from ‘vue’)，创建Vue实例；这其中存在一个问题，即使用import导入的Vue构造函数功能不完整，只提供了runtime-only版本；了解runtime-only_https://www.jianshu.com/p/466510d84e36这个问题有两种解决思路，导入正确的Vu...
2019-04-18 18:30:55
321
原创 wepack4+plugins+loaders项目复盘总结(下)
承接上篇：https://blog.csdn.net/qq_39989929/article/details/89297108因为webpack默认只能处理js类型的文件，当项目中导入其他类型的文件，webpack在打包编译时就会报错，所以需要第三方loader来处理其他类型的文件。先展示一下webpack处理非js类型文件的过程；接下来，就具体处理文件的类型，总结一下其所需要的第...
2019-04-14 22:32:19
158
原创 wepack4+plugins+loaders项目复盘总结(上)
第一次使用webpack时，被其繁杂的配置弄的焦头烂额，但是打过多次交道后，慢慢的也变的熟络起来，这一次复盘就来根据查询加检验的结果来总结一下；一、webpack4安装项目使用是的webpack4，版本4与之前版本的区别在于，可以不再依赖配置文件，但其仍然是高度可配置的；虽然主打零配置，但是项目中所使用的plugins/loaders仍然需要配置的，所以暂时还是脱离不了webpack.co...
2019-04-14 19:02:36
188
原创 浏览器端与nodejs端EventLoop机制(宏任务与微任务)的异同
偶然看了一篇文章讲了浏览器端与nodejs端的事件循环机制，但在检验的过程中发现了浏览器与nodejs两者之间存在不符合统一解释的差异，由此引出了一系列测试，记录一下。 在此之前，我理解的Browser的循环机制是下面这样的：nodejs的循环机制是：主线程去执行同步代码、异步非I/O代码，异步I/O代码则有主线程分配给线程池的子线程执行，执行完毕后将回调函数交给主线程执行...
2019-04-09 12:33:19
2986
2
原创 纯css实现overflow与focus锚点选项卡切换
通过纯css实现选项卡功能（overflow：hidden滚动依旧存在，从而可以完成锚点定位，达到切换目的），采用focus锚点，避免了url锚点触动的由内到外的窗体定位；但是纯css还是存在缺点：当选项卡在页面外时，因为采用focus锚点，所以依然会通过tab键切换选项卡；所以，可以配合js使用，在js加载缓慢时，依旧可以操作选项卡；当js加载完毕，通过移除label的for属性，去除c...
2019-04-05 19:16:54
810
原创 系统归纳总结js与jquery宽高API
js中获取各种宽高的API比较纷杂，再加上网上对某些API的表现众说纷纭，而且浏览器之间也存在差异，所以急需系统总结，把脑袋里搅在一起的属性方法归类；目录：一、window对象下的距离API二、document对象下的API三、Event对象内的坐标信息四、element.getBoundingClientRect()五、jQuery中的宽高API---------...
2019-04-03 20:51:35
144
转载 谈一谈麻烦的移动端适配
经过几天的折腾，对移动端适配有了比较全面的了解，移动端适配需要解决的主要问题在于：1、终端适配2、retina高清屏幕带来的显示差异本来想自己总结，但真的还差点火候，需要进一步的实践，所以转载一篇比较全面的文章，文章从物理像素、逻辑像素开始讲起、掠过viewport，直击移动端适配的痛点，最后，将retina屏幕的1px问题、以及适配方案归纳整理。附带源码，详细全面。因担心这么好的文章...
2019-04-01 15:37:52
132
转载 使用ES原生Fetch进行数据请求
转载地址https://www.cnblogs.com/libin-1/p/6853677.html无论用JavaScript发送或获取信息，我们都会用到Ajax。Ajax不需要刷新页面就能发送和获取信息，能使网页实现异步更新。几年前，初始化Ajax一般使用jQuery的ajax方法：$.ajax('some-url', { success: (data) => { /* ...
2019-03-30 10:57:06
1466
1
原创 记录对格式化宽高的进一步认识
刚刚在使用格式化宽高模拟了模态框的灰色背景时，进一步认识了格式化宽高的一些表现，所以在此记录。以上是模拟模态框时的源码。当使用格式化宽高覆盖一个半透明背景时，为.box设置position:absolute;发现其流动性只能适应浏览器最大视口，当为body设置大于视口的长度宽度时,半透明背景的流动性消失，表现如下：但在为.box设置为position:fixed;时，不管将bo...
2019-03-28 21:51:26
138
1
转载 细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）
转载自https://segmentfault.com/a/1190000016704384作者：深予之 (@senntyou)文章很详细的介绍了各种渲染方式的利弊，简洁明了，归纳清晰，很透彻。前端与后端渲染方式的发展大致经历了这样几个阶段：后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）。1. 后端模板渲染前端与后端最初的渲染方式是后端模板渲染，就是由后端使...
2019-03-16 16:15:09
756
1
原创 ES6规范前后块级作用域与函数声明的缠缠绵绵
今天我们就以上面的这个例子来说一下，块级作用域与函数声明在ES6前后的纠葛，当然在ES6之前是没有块级作用域的，但为了与ES6统一，使文章更简明，所以把这对‘{}’统一称为块级作用域。 开正题之前，还是要说一下，因为块级作用域与函数声明之间的这种变化，所以应该尽量避免使用。若需要，可以使用函数表达式代替。一、ES6之前由于函数声明会提升至全局作用域或函数作用域顶部，所以上面的代码...
2019-02-28 19:03:27
692
转载 CROS简介总结
转载自：http://www.cnblogs.com/loveis715/p/4592246.html 现在请跟我做：在您的浏览器的地址栏中输入www.yhd.com并敲击回车。在网站内容全部加载完毕后，按F12打开浏览器的调试窗口。当切换到Sources页时，您会发现您当前所看到的一号店的页面是从多个不同的域中得到的： 或许有些读者会感到奇怪：在之前自己 写网页的时候就曾经尝试访问...
2019-01-27 16:40:36
7439
原创 关于CSS3-animation总结
animation属性的存在，让我们可以很方便的创建动画，但由于属性较多，所以使用时有点乱，所以在此综合整理一下，以便后续使用。 一、animation的属性（以下书写的顺序便是简写时的书写顺序，注意第八个属性，这个属性是不可以简写的）1、animation-name：动画的名称2、animation-duration：动画的持续时间3、animation-timing-...
2019-01-26 11:20:16
461
转载 纯css实现多行文字截断
转载原文地址https://github.com/happylindz/blog/issues/12前言最近在做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果，如下图：看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：兼容性好，对各大主流浏览器有好的支持 响应式截断...
2018-11-13 20:44:30
467
1
原创 webpack4下webpack-dev-server热更新缓慢问题【已解决：webpack4 mode设置出现问题】
webpack4下有production(生产)和development（开发）两种模式，若不设置，则会在终端下warn个不停。 warn内容如下：The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this envi...
2018-11-02 16:27:50
7042
3
转载 01_关于幽灵空白节点检测时：div内span标签为什么要设置一个inline-block的解释
幽灵空白节点存在于行框盒子的前面（必要条件 ：需要h5的文档声明）（表现形式：没有宽度，永远透明，不能通过脚本获取）因为有现成的提问和回答，所以将截图摘于此。原文地址：https://segmentfault.com/q/1010000014296346/a-1020000014298050提问：回答：最后，感谢两位前辈提供的精确回答。附w3c规范：Line b...
2018-10-30 10:11:54
1241
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人