- 博客(90)
- 收藏
- 关注
RSS订阅原创 nginx代理转发规则
nginx 之 proxy_pass第一种：location /proxy/ { proxy_pass http://127.0.0.1/;}代理到URL：http://127.0.0.1/test.html第二种（相对于第一种，最后少一个 /location /proxy/ { proxy_pass http://127.0.0.1;}代理到URL：http://127.0.0.1/proxy/test.html第三种location /proxy/ { p
2021-05-14 19:50:10
1558
原创 复制图片踩坑
1. 间接写入clipboard方式(document.execCommand()) // 创建图片 const img = document.createElement('img'); img.src="https://github.githubassets.com/images/icons/emoji/unicode/270d.png" const body = document.body; body.appendChild(img); // 创建DOM范围 const myrange =
2021-05-12 09:06:13
1135
3
原创 NODE 大文件读写
NODE 大文件读写前段时间群里聊天的时候时候，有人提出了一个问题，如何读取一个一两个 G 的文件并且相关的字进行替换然后考虑了一下用到了fs.createReadStream()来创建一个读文件流，将文件的中的内容使用换行符\n来分割，按行读取思路继承event模块的EventEmitter，方便事件触发和事件监听使用fs.createReadStream()来读取文件一行一行的读文件在读的过程中对其字符串进行替换实现// ReadLine.jsconst fs = require
2021-05-12 09:05:37
299
原创 ArrayBuffer-Blob-File
ArrayBuffer,Blob,FileReader 三大对象之前在做本地图片上传的时候用到了 Blob，那个时候算是刚刚接触这个东西，然后去好好的补习了一下然后前几天涉及到一个需求，上传一个 doc 文件，上传完之后要对其解析，然后在页面上展示出来于是找到了一个插件，叫做mammoth,这个插件就可以对 doc 文件进行解析,然后拿到具体内容但是有一个小小的问题就是这个插件不能直接传一个 http 的 url 进行解析，需要传 ArrayBuffer 或者本地的 url所以这个时候又想到了 B
2021-05-12 09:04:06
338
原创 BitMap
BitMap 算法用一个问题来引出这次的文章10亿个无序整数，已知最大值为15亿，请对这10亿个数进行排序(假设无重复)。现要在32位机器上对其排列，并且内存限制为2G。分析一下问题，10G的文件，只有2G的内存，显然不能一次性的把数据直接读进内存中直接排序。那么，还有什么其他办法呢？这里就可以使用BitMap什么是BitMap所谓的BitMap就是用一个bit位来标记某个元素对应的Value，而Key即是该元素。由于采用了Bit为单位来存储数据，因此在存储空间方面，可以大大节省。来看一个
2021-05-12 09:03:23
310
原创 前端工程化
前端工程化上周末和朋友聊天的时候讨论到了什么是前端工程化，然后大家都各抒己见最后大家可能都得到了一点点统一的结论稳定性 (stability)可用性 (usability)可维护性 (maintainability)可扩展性 (scalability)可访问性 (accessibility)看起来好像就是各种ability的集合，当然还有一个niuability，哈哈哈哈。实际上呢，优秀的技术方案很多，大部分的时候我们感觉只是在现有的技术方案里面做排列组合，选择最优解，做出一个最合适当
2021-05-12 09:02:34
163
1
原创 页面注入50万个li怎么做提升性能？
页面注入50万个li怎么做提升性能？面对插入这么多li，一下子插入肯定是不行的，会造成浏览器卡顿于是，我们就想到了分批次插入。那么，怎么分批次插入呢，怎么插入呢？先定义一下数据// 一共需要插入50w个liconst totalCount = 5000000// 每个批次插入十个const ecahCount = 10// 于是得到了需要插入多少次const renderCount = totalCount / ecahCount// 已经在页面上插入了的个数let alreadyRe
2021-05-11 11:39:12
228
原创 wangEditor 上传附件
wangEditor 上传附件创建 wangEditor创建一个index.js文件import React, { Component } from 'react'import Wangeditor from 'wangeditor'export default class RcWangEdite extends Component { constructor(props) { super(props) this.containerRef = React.createRef(
2021-05-11 11:37:35
4125
9
原创 querySelectorAll( )和getElementsByTagName( )
一. 区别querySelectorAll()和getElementsByTagName()两者的主要区别就是返回值。前者返回的是NodeList集合，是一个静态集合后者返回的是HTMLCollection集合，是一个动态集合二. NodeList集合 / HTMLCollection集合（1）NodeList集合是由Node.childNodes和document.querySelectorAll()返回的。 NodeList并不是都是静态的，也就是说Node.childNodes返回的是动态的
2021-05-11 11:31:06
921
原创 是否所有函数都有prototype
是否所有函数都有prototype使用Function.prototype.bind创建的函数对象function abc(){console.log('abc')}var binded = abc.bind(null)binded() //abcconsole.log(binded.prototype) //undefined箭头函数也没有var abc = ()=>{console.log('abc')}abc() //abcconsole.log(abc.prototype)
2021-05-11 11:26:29
1553
原创 常见请求头
###常见请求头Accept: text/html,image/* 浏览器可以接收的类型Accept-Charset: ISO-8859-1 浏览器可以接收的编码类型Accept-Encoding: gzip,compress 浏览器可以接收压缩编码类型Accept-Langua
2021-05-11 11:25:04
2335
原创 window.performance
window.performance// 简单介绍performance中的属性：memory：{ jsHeapSizeLimit: 1136000000 // 内存大小限制 totalJSHeapSize: 16100000 // 可使用的内存 usedJSHeapSize: 10000000 //JS 对象占用的内存，一定小于 totalJSHeapSize}navigation:{ redirectCount:0 // 如果有重定向的话，页面通过几次重定向跳转
2021-05-11 11:24:30
396
原创 VUE逐步向REACT迁移
VUE逐步向REACT迁移###【背景】统一前端技术栈，减少项目切换和维护成本。基础技术建设无法开展，业务和技术组件无法复用，一个技术方案会重复造轮子###【需求】统一技术栈，降低维护成本完善技术生态，技术方案提取和复用，提高效率迁移步骤及其计划vue集成reactreact使用vuex数据流样式隔离组件逐步迁移按路由级别逐步迁移页面页面迁移完毕之后，整体迁移vuex到redux干掉vue以及vuextips：1.第4步和第5步同时进行2.笔者目前正在第4/5
2021-05-11 11:23:51
1218
1
原创 shell推送git
简化版本#!/bin/sh# @author xi_feng # @Email xi_feng@hunliji.com# @createBy 2020-03-12# Shell脚本提交git代码 简单,快速,高效# echo ' >>>>>> start push <<<<<< 'echo " ====== 当前分支 ====== "branch=$(git symbolic-ref --short -q HEAD
2021-05-11 11:22:59
305
原创 react hooks 表格实战
需求antd表格组件划分Tableindex.jsPagination.jsTable.jsHooksuseTableData.jsuserPagination.js###Pagination.js:用于展示分页组件，有如下参数page: 当前页面pageSize：每页展示条数total: 总数据量setPage : 设置页面和每页条数import React from 'react'import { Pagination } from 'antd'
2021-05-11 11:22:22
953
2
原创 通过localStorage同域发送信息
背景页面A是企业列表页，页面B是企业详情面。页面B上面更新了企业信息，需要通知给页面A，同时更新列表中的企业信息postMessage在做这个需求的时候，最先考虑到的就是 postMessage 。这个方法可以安全的实现跨源通信，从广义上讲，一个窗口可以获得对另一个窗口的引用(比如 targetWindow=window.opener),然后再窗口上调用 targetWindow.postMessage() 来发送一个Message消息。实现第一步是获取 window 对象const targe
2021-05-11 11:16:30
334
原创 React中的错误捕获和上报
错误边界介绍部分 UI 中的 JavaScript 错误不应该破坏整个应用程序。 为了解决 React 用户的这个问题，React 16引入了一个 “错误边界(Error Boundaries)” 的新概念。错误边界是 React 组件，它可以在子组件树的任何位置捕获 JavaScript 错误，记录这些错误，并显示一个备用 UI ，而不是使整个组件树崩溃。 错误边界(Error Boundaries) 在渲染，生命周期方法以及整个组件树下的构造函数中捕获错误。使用方法如果一个类组件定义了生命周期方
2021-05-07 09:57:37
1567
原创 05.enqueueUpdate
Update创建update的时机在03章节中提到过，位于scheduleRootUpdate这个函数中const update = createUpdate(expirationTime);export type Update<State> = { expirationTime: ExpirationTime,//过期时间 // export const UpdateState = 0; // export const ReplaceState = 1; // expo
2021-05-07 09:48:18
313
原创 04.ExpirationTime计算
ExpirationTime计算规则react主要把到期时间分为两种：异步任务到期时间与交互工作的到期时间。react的到期时间与系统的时间ms不是1:1的关系，低优先级异步任务的两个时间间隔相差不到250ms(相当于25单位的 到期时间)的任务会被设置为同一个到期时间，交互异步任务间隔100ms(相当于10个单位的 到期时间)，因此减少了一些不必要的组件渲染，并且保证交互可以及时响应。ExpirationTime的作用在react中，为了防止某个update因为优先级的原因一直被打断而不能执行。re
2021-05-07 09:43:22
698
2
原创 03.ReactDOM.render
ReactDOM.render上文说的是把jsx转换成VDom而ReactDom.render则是把VDom渲染成真实的Dom节点（本篇幅只涉及到渲染，没有涉及到更新、调度等等）我们在写react的时候，写到最后一步肯定是ReactDom.render，比如ReactDOM.render(<App name='app' />, document.getElementById('app'));把<App />解析成VdomReactDOM.render(React.cre
2021-05-07 09:42:50
916
原创 02.React中的数据结构
FiberRoot{| // 页面上挂载的dom节点, 就是render方法接收的第二个参数 containerInfo: any, // 只有在持久更新中会用到，也就是不支持增量更新的平台，react-dom不会用到 pendingChildren: any, // 当前树的根节点，就是FiberRoot current: Fiber, // 以下的优先级是用来区分 // 1、没有提交（committed）的任务 // 2、没有提交的挂起的任务 // 3、没有提
2021-05-07 09:42:03
436
原创 点击空白处隐藏弹出元素
react经常会遇到这样的需求：点击某处按钮或者其他，弹出某一个元素A，然后点击这个元素A之外的地方可以隐藏这个弹出的元素A。有两种方式可以实现这需求1.在这个弹出层的后面放一个透明的遮罩层，然后在点击遮罩层的时候隐藏弹窗2.利用react的阻止冒泡e.nativeEvent.stopImmediatePropagation()首先监听全局的点击事件，注意在移除组件的时候取消监听componentDidMount() { document.addEventListener('click', t
2021-05-07 09:37:46
487
原创 01.从jsx到react的虚拟dom对象
背景页面A是企业列表页，页面B是企业详情面。页面B上面更新了企业信息，需要通知给页面A，同时更新列表中的企业信息postMessage在做这个需求的时候，最先考虑到的就是 postMessage 。这个方法可以安全的实现跨源通信，从广义上讲，一个窗口可以获得对另一个窗口的引用(比如 targetWindow=window.opener),然后再窗口上调用 targetWindow.postMessage() 来发送一个Message消息。实现第一步是获取 window 对象const targe
2021-05-07 09:27:21
115
原创 antd table表格和表头错位
最后一列不设置宽度。因为antd会自己给最后一列分配宽度；设置合适的宽度。推荐用百分比设置宽度。scroll属性中的x选择一个合适的值（或者直接设为 max-content）scroll={{ x: ‘max-content’, y: tableHeight() }}给Table组件设置这个中英文都换行的样式style={{ wordBreak: ‘break-all’ }}<Table bordered loading={pro..
2021-05-07 09:26:19
1964
3
原创 通过webpack引入一个sdk
有这样子一个需求就是需要通过webpack引入一个sdk，然后就找到了这html-webpack-plugin-before-html-processing这个搭配html-webpack-plugin使用的钩子函数然后使用jsdom模拟html，最终把想要的sdk插入到html中const jsdom = require('jsdom');//操作DOM要在这引入找个包const { JSDOM } = jsdom;var timer = Date.now();function Warden
2021-05-07 09:24:22
408
原创 React Mixin 双向绑定 及 源码分析
首先从没有使用mixin的例子引入var BindingExample = React.createClass({ getInitialState: function() { return { text: '' } },
2016-07-07 20:08:32
1847
原创 提高JavaScript性能
加载并执行1.闭合标签之前，将所有的标签放到页面底部。这能确保在脚本执行前页面已经渲染完成2.每个标签初始下载是都会阻塞页面渲染，应减少页面包含的标签（打包压缩）3.把一段内嵌脚本放在引用外链样式表的标签之后会导致页面阻塞去等待样式表的下载，这样做是为了确保内嵌脚本在执行时能获得最精确的样式信息，因此不要把内嵌脚本紧跟在标签之后4. 使用多种无阻塞下
2016-06-25 11:19:00
463
原创 Reect Ajax render 传递数据到子Component 获取不到数据
ajax获取数据一般都写在 componentDidMount 中，而render的调用周期又是在componentDidMount 前面这导致了ajax还没有进行的时候，render已经完成了，所以在render里面是获取不到ajax的数据的然后想到了React在更新数据的时候会重新渲染so 在state中添加了一个状态 loadingData它看
2016-06-15 20:48:00
1902
原创 React Ajax this.IsMounted() is not a function
大概是这样的代码$.ajax({ ... success: function(data) { var quote = data[0].media; if (this.isMounted()){ this.setState({ quotes: quote });
2016-06-15 19:11:50
6359
1
原创 React.render is not a function
在用React 15.*版本的时候，浏览器报了这个错误 React.render is not a function 我当时就懵逼了，看了配置什么的都时没有问题的，怎么会报这个错误。然后去查了React最新的Api 结果发现 React 0.14版本之后将react package拆分成了 react 和 r
2016-06-08 14:10:33
15168
2
原创 express-session deprecated undefined resave option; provide resave option app.js :16:9
express-session deprecated undefined resave option; provide resave option app.js:16:9express-session deprecated undefined saveUninitialized option; provide saveUninitialized option app.js:16:9解决方法
2015-10-29 17:32:13
6236
转载 node.js学习二（Express4.x）
从零开始nodejs系列文章 ，将介绍如何利Javascript做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express，可以帮助我们迅速建立web站点，比起PHP的开发效率更高，而且学习曲线更低。非常适合小型网站，个性化
2015-10-23 11:47:06
3216
转载 node.js学习一（node入门）
目录关于状态读者对象本书结构JavaScript与Node.jsJavaScript与你简短申明服务器端JavaScript“Hello World”一个完整的基于Node.js的web应用用例应用不同模块分析构建应用的模块一个基础的HTTP服务器分析HTTP服务器进行函数传递函数传递是如何让HTTP服务器工作的基于事件驱
2015-10-23 11:38:40
4604
2
原创 js下载图片到本地
$(function(){ //二维码 (function(){ var img_src = $('.qr_img')[0].src; if(browserIsIe()){//假如是ie浏览器 $('.down_qr').on('click',function(){ img_src = $('.qr_img')[0].src; DownLoadReportIMG(
2015-09-29 16:23:16
41477
6
原创 取消事件冒泡-select模拟（多选）
Examples *{padding: 0; margin: 0;} li{list-style: none;} #main{width: 300px; margin: 0 auto; margin-top:100px;} #div1{width: 200px; height: 30px; line-height: 30px; text-align: left; border: 1
2015-05-23 19:46:33
1055
原创 js函数封装，使一个obj的透明度渐变，淡入淡出（兼容IE）
无标题文档 *{padding:0; margin:0;} li{ list-style:none;} #main{ width:580px; height:400px; margin:0 auto; margin-top:200px; border:1px solid #000; padding:10px; position:relative;} #main ul{} #main u
2015-05-12 07:49:40
2833
1
原创 HDU2089（数位dp入门）
#include#include#include#include#include#include#includeusing namespace std;#define Max(a,b)(a>b?a:b)#define Mem(a,b) (memset(a,b,sizeof(a)))#define Abs(a)(a>0?a:-a)#define INF 1e20#defin
2015-03-09 11:29:42
761
转载 display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 , , , , 和 是块元素的例子。 display:inline就是将元素显示为行内元素. inline元素的特点是： 和其他元素都在一行上； 高，行高及顶
2014-11-16 19:59:54
801
原创 抽象方法和抽象类
<?php/* * 1.什么是抽象方法 * 定义：一个方法如果没有方法体(一个方法不使用“{}”,直接使用分号结束的方法，才是没有方法体的方法)，则这个方法就是抽象方法； * 一、声明一个方法，不适用{}，而直接分号结束； * 二、如果是抽象方法，必须使用 abstract（抽象关键字来修饰） * 三、不是抽象类，不可以使用抽象方法 * *
2014-09-20 11:32:06
644
原创 #1045 - Access denied for user 'root'@'localhost' (using password: NO)的问题
问题描述： 在控制台shell下修改了root的密码，然后在http://localhost/phpmyadmin下无法登录了 报错：#1045 - Access denied for user 'root'@'localhost' (using password: YES)操作重现： mysql -u root -p ****** #以前的密码 use my
2014-09-20 11:19:22
27386
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人