- 博客(121)
- 资源 (33)
- 收藏
- 关注
RSS订阅原创 React服务端渲染（SSR）入门及项目搭建
服务端渲染是什么？我们什么情况下需要使用它？想要了解这些，需要简单聊聊前端渲染的发展史。服务端渲染并不是什么新兴的技术，动态网页技术（、等）其实就是服务端渲染，网页都是由后端获取数据并将其放入到网页模板中，然后返回完整的HTML到浏览器渲染。这样做的渲染方式有明显的缺点，每次数据改变都需要重新再去获取数据并组装新的HTML、网页和后端逻辑耦合等。直到的出现。的出现，使得前后端得以分离。在该模式下，后端依然会返回一个HTML页面，后续通过AJAX来动态获取数据，利用DOM操作动态更新网页内容。......
2022-06-15 14:35:21
3214
3
原创 原型和原型链以及对象的封装继承
代码已经关联到github： 链接地址 文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：JavaScript是弱对象的语言，但是也有面向对象编程的封装与继承的方法，而原型和他们有密切的联系。原型和原型链了解原型和原型链让我们从一个例子开始：function Foo(){}const f1 = new Foo()console.log(Foo.prototype===f1.__proto__)//?这里的prototype和__proto__都是.
2022-04-19 11:12:12
265
原创 了解下闭包？
代码已经关联到github： 链接地址 文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：定义一个函数和对其**周围状态（Lexical Environment，词法环境，详细可看《执行上下文、作用域到底是什么？二者有什么关系》）**的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说闭包让你可以在一个内层函数中访问到其外层函数的作用域。用途创建私有变量闭包让函数以外也可以访问到函数内部的变量，这样可以用来创建私有.
2022-04-18 16:02:41
209
原创 执行上下文、作用域到底是什么？二者有什么关系
代码已经关联到github： 链接地址 文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：什么是执行上下文JavaScript在执行代码之前，需要经过一系列的“准备”，这被称为执行上下文，其包含词法环境（Lexical Environment）和上下文（this）。所有的 JavaScript 代码在运行时都是在执行上下文中进行的，每创建一个执行上下文，就会将当前执行上下文放到一个栈顶，这就就是我们常说的执行栈。执行上下文的创建何时创建执行上下文JavaS.
2022-04-18 15:59:18
1121
1
原创 了解多进程浏览器
代码已经关联到github： 链接地址 文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：什么是进程与线程进程=火车，线程=车厢，一个进程由一个或多个线程组成。要想了解进程与线程的话，需要先了解 并行处理 ，并行处理是程序在同一时间处理多个任务，处理一个就是 单线程 ，处理多个就是 多线程 。而进程则是用来启动和管理线程。线程在进程下行进，一个进程可以包含多个线程（一辆火车可以有多个车厢）进程间不会相互影响，进程中的任意一线程执行出错，都会导致整个进程.
2022-03-03 19:20:44
188
原创 事件循环（Event loop）
代码已经关联到github： 链接地址 文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：浏览器为什么有事件循环javascript 从诞生之日起就是一门单线程的非阻塞的脚本语言。单线程：解析和执行 JavaScript 代码的线程只有一个主线程非阻塞：当我们的 Javascript 代码运行一个异步任务的时候（像 Ajax 从网络读取数据等），主线程会挂起这个任务，然后异步任务返回结果的时候再根据特定的结果去执行相应的回调函数。也正是javascri.
2022-03-03 16:17:26
591
原创 虚拟DOM和DOM Diff
代码已经关联到github： 链接地址 觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：虚拟DOM什么是虚拟DOM一种编程的概念，与真实DOM节点对应，一个能表示真实DOM的对象。React下的虚拟DOM在React属于ReactElement对象，格式如下：const reactElement = { key:null, props:{ className:"", onClick: () => {}, children:[] }, ty
2022-01-29 10:21:42
989
原创 React源码调试环境搭建
做为一个React使用者，肯定也想学习React源码，为了一探究竟，调试当然是必不可少的，因为纸上得来终觉浅，跟着代码跑一遍才是王道，所以就有了这篇文章。具体的步骤就是分为三步：克隆 React 项目用 Create React App 创建一个新的项目react-debug ，并且npm run eject 暴露配置。用克隆的React 项目替换掉react-debug 中的React包，修改配置和处理报错。这里并不会介绍具体的步骤，因为不同版本可能要改动的地方不尽相同，直接提供一个开箱即用
2022-01-16 19:48:00
703
原创 事件循环（Event loop）
代码已经关联到github： 链接地址 文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：浏览器为什么有事件循环javascript 从诞生之日起就是一门单线程的非阻塞的脚本语言。单线程：解析和执行 JavaScript 代码的线程只有一个主线程非阻塞：当我们的 Javascript 代码运行一个异步任务的时候（像 Ajax 从网络读取数据等），主线程会挂起这个任务，然后异步任务返回结果的时候再根据特定的结果去执行相应的回调函数。也正是javascri.
2021-12-27 14:41:46
663
原创 缓存：浏览器缓存、DNS缓存和CDN缓存
代码已经关联到github： 链接地址 文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：浏览器缓存浏览器再次发送请求时：首先判断强缓存，强缓存生效直接使用强缓存（200 from memory、from disk 先从内存，再从硬盘）如果强缓存不生效会判断没有设置协商缓存就直接重新请求(200)设置了协商缓存则由服务器判断缓存是否失效，没有失效就继续使用缓存（304，同强缓存的获取方式），失效则返回新的文件（200）缓存分类强缓存强缓存.
2021-12-10 18:00:05
3085
原创 浏览器渲染过程解析
代码已经关联到github： 链接地址 文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：概念介绍DOM Tree：浏览器将HTML解析成树形的数据结构。CSSOM（CSS Object Model）：页面的所有css样式的对象模型。Render Tree: DOM Tree和CSSOM合并后生成Render Tree。layout（布局render树）: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关.
2021-12-10 09:38:23
897
原创 你应该知道的http
代码已经关联到github： 链接地址 觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：HTTP全称超文本传输协议（HyperText Transfer Protocol），HTTP 是一种能够获取像 HTML、图片等网络资源的通讯协议（protocol）。它是在 web 上进行数据交换的基础，是一种 client-server 协议。HTTP基础特性1. 简单可拓展协议组成的部分简单，起始行 + 头部 + 空行 + 实体HTTP 1.0 出现的 HTTP headers .
2021-12-01 18:08:17
290
原创 Win10值得推荐的软件，提升效率和桌面美观
某乎真强，删后留存桌面镇楼，最近重装了win10，感觉系统又变得流畅了许多？因为没有备份，所以软件都重新装了一遍，下面来记录一下Win10下不错的软件吧。mac的可以查看另一篇文章：MAC值得推荐的软件，提升自己的使用效率和体验 - Snns丶的文章分为：1.优化类（系统增强、启动器和优化）、2.日常使用（娱乐影音、浏览器和垃圾清理）、3.工具类（如下载、压缩等小工具）、4.美化类、5. 编程类。壁纸我放在文章最后1.优化类Dism++绿色免费实用，整合了win10很多设置比如系统优化空间回
2021-10-29 14:32:20
13993
原创 CSS in JS之styled-components
代码已经关联到github： 链接地址 觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：我们都知道，JSX是JS语法的扩展，增加了对HTML语法的支持，那距离all in js就只差一个CSS语法支持了，目前实现该功能的库比较出名的有60+，感兴趣的可以自己查看：css-in-js。下面要介绍的就是其中之一的styled-components。简介styled-components应该可以说CSS-in-JS最热门的一个库了，到目前为止github的star数已经超过了34k.
2021-10-18 14:21:39
655
原创 JavaScript中的this指向全解析
面试常见问题，特地记录一下。代码已经关联到github： 链接地址 觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：this在 JavaScript 中，this 是指当前函数中正在执行的上下文环境，下面从定义的方式和调用的方式上简单聊下其中的this指向问题。定义的形式function关键字通过 function 构造的函数，this是运行时指向，取决于运行时的调用者（作用域）。var obj = { foo: function () { //定义时位于全局，之后
2021-09-20 17:30:54
378
原创 JS解析url链接和获得get参数的两种方法
这里使用正则的方式获得具体的参数~/** * 解析url * @param {String} url eg:https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=js&oq=js */const parseUrl = (url) => { const reg = /(\w+):\/\/([\w\.]+)\:?(\d*)?([\/\.\w]*)?\??([^#]*)?#?(\S*)?/
2021-08-20 18:21:57
1001
原创 如何获得iframe内部的body和其他元素
记录一下如何获得iframe内部的元素~使用js获得//先拿到iframe元素，可以使用querySelector或者知道id可用window.frames获得const iframe = document.querySelector('#iframe-parent-id').firstElementChild || window.frames['my-frame-id']//2.1 获得bodyconst body = iframe.contentWindow.document.body
2021-07-20 10:24:32
3876
原创 webpack打包后运行时文件分析（webpack5）
本文基于webpack5，分析打包后的文件，参考了网上的资料，同时加上了个人的理解，欢迎讨论。代码已经关联到github： 链接地址 觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：简单打包文件介绍//index.js 入口import { cc } from './Test'cc()//Test.jsfunction cc(){}export {cc}运行时分析webpack执行打包后生成的js文件是一个立即执行函数，其参数modules为一个对象{}，包含我们所
2021-05-18 16:02:39
1578
1
原创 虚拟DOM和DOM diff 记录 （增加fiber）
面试常见问题，特地记录一下。代码已经关联到github： 链接地址 觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：什么是虚拟DOM与真实DOM对应，一个能表示真实DOM的对象。react下的虚拟DOM格式：const vNode = { key:null, props:{ children:[{type:'span'}] }, className:"", onClick: () => {}, type:'div'}代码创建：使用 Rea
2021-05-18 15:59:17
255
原创 卸载xcode后,git 报错（xcrun: error: active developer path (“/Applications/Xcode.app/Contents/Developer“) ）
卸载完xcode，发现自己的终端git命令就报错了，看了下提示要求下载 xcode-select然后一下载，xcode-select --install ，又提示已经安装过了满头？？？的我执行了下xcode-select ，发现有个 -r 重置，测试了一下搞定，注意改方法需要root权限。总结：没安装就安装xode-select安装过了还报错就 sudo xcode-select -r...
2021-01-18 10:45:26
866
原创 纯css实现文字下划线悬浮【中心向两边扩展】、鼠标移开【两边向中心收缩】特效
文字鼠标悬浮效果有很多，自己做的时候也手撸了一个小特效。思路就是使用before和after伪类去动态改变宽度。代码已经关联到github： 链接地址 觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：效果：...
2020-08-09 18:55:48
728
转载 根据RGB值判断颜色是否深浅色(附深浅色颜色集合)
做博客云标签时碰到了这个问题，因为自己的背景是白色的，所以标签的背景色要是深色。网上找到了按照灰度值去判断（CSDN论坛），然后又搜了一下已有的文章。g = R0.299 + G0.587 + B*0.114g越小，颜色越深，可以按照你自己的需要定一个阀值。 我的是 g < 100文章都迁移到github啦，深浅色合集也放在了下面文章地址...
2020-07-09 10:22:28
3886
原创 React hooks组件中，定义的方法取不到新的state值的坑
项目中使用postal订阅方法时，使用react hooks useEffect去监听方法时，发现取到的state一直是旧的值，然后重写了例子。假设有个需求，父组件修改颜色，父组件会把该颜色传到子组件，子组件每次点击会打印当前自己state里面的颜色。这里子组件有两个监听事件，一个是原生dom的监听方式，一个是react提供的监听，再测试的时候发现二者表现不同，所以写了两个。直接预览：h...
2020-04-01 11:56:08
7439
原创 react组件下渲染原生dom（插入原生元素）
项目中，遇到react组件需要渲染原声dom的情况，记录一下。原理是利用ref在加载完后插入元素render(){ <div ref={(nodeElement) => { nodeElement && nodeElement.appendChild('<div>111</div>') }} /> }...
2020-03-23 09:40:37
2873
原创 querySelector报错：: Failed to execute 'querySelector' on 'Document': '#$$assgrp__f0001' is not a valid
导致这种报错的querySelector是按css规范来实现的，所以它传入的字符串中第一个字符不能是数字、特殊字符，修改成用属性匹配即可解决，如下document.querySelector('[id="$$assgrp__f0001"]')...
2020-03-04 13:41:45
6813
转载 Microsoft Edge中的底部border bug，鼠标悬浮上去的时候下边框消失问题
在stackoverflow找到了解决方案原文链接原因：如果高度或宽度是动态的并且没有四舍五入的像素大小就会出现问题解决1.设置 margin-bottom: -1px;2.设置border-bottom: 2px solid gray3.设置border-radius: 1px; //这种方法我在使用,不过答案并没有提及 @supports (-ms-ime-align...
2019-12-31 14:42:17
925
原创 针对IE和edge浏览器的css样式写法
只在ie浏览器下生效@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { //针对ie div { padding-bottom: 1px; } }只在edge浏览器下生效@supports (-ms-ime-align: auto) { //针对edge div { padding-bo...
2019-12-31 13:54:13
4041
原创 React 阻止事件冒泡失效、stopPropagation和stopImmediatePropagation分析，解决stopPropagation没有阻止冒泡问题
做开发中，React 和 JS 原生事件监听`addEventListener`混用了，因此发现了一个现象：React的阻止冒泡并没有阻止原生JS监听的事件触发。下面代码的输出是（代码链接：https://codepen.io/Lik_Lit/pen/OJLROMW）“root click”“inner dom click”“document c......
2019-08-20 14:45:05
8445
7
原创 IE中输入框绑定input事件触发解析（input事件初始化自动执行问题解决）
在React项目中碰到了个问题，输入框绑定了input事件，在IE中初始化会自动执行，刚开始以为是只要有placeholder就会导致问题，后面网上搜了一轮，自己手撸了一下，总结了导致绑定的input事件自动执行的原因1.输入框的值为空，2.placeholder改变(注意这个改变的就算前后的placeholder值一样也算改变；还有就是input获得焦点时和失去焦点时，也会改变；但是改变前后...
2019-08-02 08:58:12
2619
1
原创 CSS3 transform对普通元素z-index、positon和overflow的影响,
transform对普通元素的影响是个巨坑，自己亲身体验的总共有三点提升元素的垂直地位，也就是z-index会变大改变元素的定位属性，fixed变成absolute，absolute变成relative使绝对定位(absolute)的子元素受父元素overflow:hidden的作用。（ps:绝对定位(absolute)的子元素宽度大于父元素，如果父容器的定位是static，也就是默认时...
2019-07-19 15:16:14
1251
原创 上下两端固定，中间随内容自动撑高的H5代码，达到一定高度中间内容出现滚动条
工作上遇到的，感觉比较实用，记录一下没超过最大高度不会有滚动条内容超过出现滚动条 /* css代码 */ .box{ display: flex; flex-direction: column; width:400px; min-height:30vh; /* 保证最小高度 */ max-he...
2019-07-09 17:31:06
780
原创 适用于前端JS中文排序的方法（localeCompare）
localeCompare方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。referenceStr.localeCompare(compareString[, locales[, options]])compareString 表示用来比较的字符串因为后一个参数浏览器支持不是很友好，就不多做介绍，感兴趣可以到MDN上看。一般的用法就是 a.localeC...
2019-06-25 14:17:51
4394
1
原创 JS拖拽时禁止点击事件的三种方法
做项目的时候碰到一个问题，表格列头点击排序，但是拖动列排序的时候也会触发表头的单击事件，找了一圈，大致都是两种思路，但是原理都一样。就是js点击事件和拖拽事件都会执行mousedown（鼠标按下）和mouseup（鼠标释放）两个事件，拖拽多了个mousemove那么就衍生了两种方法mousedown记住鼠标按下的时间戳，然后在mouseup用鼠标释放的时间戳与之比较，少于150毫秒就触发...
2019-04-25 15:26:17
8452
原创 子元素设置position:fixed，z-index大于父元素依然被父元素盖住
在项目中遇到一个奇怪的问题，当父元素样式overflow有滚动条、borde-radius存在、position不为static时，和z-index不为auto时，子元素的position就算是fixed，且z-index大于父元素，也会被隐藏掉。源码和效果图如下：直接体验请点击：链接源码：源码 <style>#father { width: 200px; ...
2019-04-13 17:29:41
3373
原创 鼠标悬停改变滚动条样式（高度、宽度、颜色）
接到UE需求，需要对界面滚动条进行修改，主要是鼠标悬停改变颜色和大小，心里想着是比较简单的（万恶的IE肯定不在考虑范围内），谁知道愣是搞了半天才完成ORZ，直接上源码和实现图吧。css代码 ::-webkit-scrollbar{ height: 9px !important; width: 9px !important; ...
2019-03-07 19:06:37
11055
7
原创 html表格table设置 border-collapse: collapse后，表格宽度大于父容器宽度的处理
先上结论：1. table-layout: fixed 2.在表格的第一行设置一个隐藏的设置的宽度是650，浏览器显示却是653，你需要在表格table标签设置一个属性table-layout: fixed，接着你会发现第一行单元格合并，后面tr中的td无论如何设置宽度都没有任何效果，所以你还需要在表格的第一行设置一个隐藏的行。...
2019-03-07 15:25:31
2070
原创 React16版本Hook钩子函数的简单理解
自己也在学习中，百度到的文章都是翻译API的，记录一下自己的理解吧，本身是小白，有错误请指出。目前在学习当中，发现React的偏向于将逻辑从组件中抽出，使组件仅仅用于接收数据渲染，而逻辑全放入Hook中操作。useState用于返回组件的初始化state并且返回更新方法，它只关心你传入的初始值，可以包装一下更便于抽出逻辑，组件只用于渲染。useState返回的第一个参数就是你initialS...
2019-03-03 20:04:36
1492
原创 js禁止右键
禁止右键菜单一搜就有了，下面代码是禁止右键事件，可以根据event的which或者bottun进行判断禁止$('#11').mousedown(function(e){ if(3 == e.which){// or e.bottun===2 console.log('这是右键单击事件'); }else if(2 == e.which){//or e.bottun ...
2018-12-04 09:03:50
394
原创 从零开始,使用Webpack4配置属于自己的React项目及源码（实现count小例子）
前言：使用react16.8+webpack4配置的项目，项目已经完成es6编译配置，安装命令用红体字标出1.项目目录结构说明及源码下载源码地址：https://download.csdn.net/download/dknightl/11074578下载完成后解压后还要解压node_module.zip压缩包，解压完node_module压缩包，命令行进入，输入npm run dev即...
2018-11-10 18:21:50
465
原创 flex布局下文字超出省略号代替不起作用解决方法
项目中发现，在flex布局下，希望目标元素文字超出省略号时，text-overflow: ellipsis属性无效，结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0、overflow: hidden，设置自身属性min-width:0也都不行。text-overflow: ellipsis;overflow-x: hidden;white-space: n...
2018-10-08 10:38:20
13538
7
自搭的react、ant design脚手架
2021-06-06
Webpack4配置属于自己的React项目源码
2019-03-30
（路由按需加载）react论坛提问回复功能基本实现例子（react+redux）最终版
2018-02-05
react论坛提问回复功能基本实现例子（react+redux）
2018-02-05
win10任务栏透明的工具TranslucentTB
2018-02-05
免费GIF录制工具ScreenToGif v2.11绿色免安装版
2018-01-26
react问答功能小例子
2018-01-26
SSM框架整合代码（含登录注册功能）
2017-09-04
微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片）
2017-08-18
微信小程序，使用scroll-view实现下拉加载更多（下一页）源码
2017-08-05
Gradle配置Gretty插件所需的两个文件(build.gradle、gretty.plugin)
2017-06-17
Java 使用iText7生成带页码的PDF文件（同时生成目录，但是不会合并两个PDF）
2017-06-16
SSH(Struts2,Spring,Hibernate)框架gradle项目源码2.0
2017-05-08
kindeditor富文本编辑器4.1.10
2017-04-13
JAVA分页实例
2017-03-18
netspeedmonitor_2_5_4_0_x64_setup.msi
2017-03-17
jQuery EasyUI 1.5 版 API 中文版 (Made By Richie696)
2016-12-24
easyui行编辑实例（仅前台Html代码，无后台代码）
2016-12-24
JAVA实现EASYUI树形表格（TreeGrid）代码
2016-11-27
购物商城设计（参考小米商城）(boostrap前台JSP页面+struts2+mysql数据库)
2016-10-29
JSP+Struts+bootstrap电商网站模版
2016-07-16
基于java,运用bootstrap+struts的B2C小型商品购物网站模板
2016-07-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人