vzhufeng-CSDN博客

原创 react-hooks踩坑：invalid hook call

最近在写一个react组件的时候，遇到了这个问题，因为这个组件是想作为npm包使用，然后在组件里面使用了useEffect，这个组件本身的package.json里安装了react和react-dom作为devDependencies，另外建了测试工程，测试工程里单独装了react和react-dom，用npm link的方式来测试这个组件，然后就遇到这个报错1. You might have mismatching versions of React and the renderer2. You mi

2020-08-05 09:56:41 10424

原创 preact管中窥豹

版本10.3.1本文不多描述已经说得很多了的一些东西，比如setState什么的，在preact里面很容易找到相关代码（在component.js里），实现也不是特别复杂，这里主要看看一个组件如何执行第一次渲染，以及preact的diff在其中扮演的角色先看例子import { h, render, Component } from "preact";class App extends ...

2020-04-20 22:27:57 1452

原创看不懂react-redux就写一个，超精简版

react-redux的代码，还挺多的，偷懒不想看，但是又怕别人问原理，所以就手撸一个来玩玩，超精简惯例，先看react-redux的使用，这是一个按钮加一个p标签，初始化是0，点了以后随机生成数字，很简单，看不懂请看redux文档index.jsx文件import ReactDOM from "react-dom";import React from "react";import {...

2020-03-25 10:28:38 1245

原创 koa源码部分解析(3)koa-body

版本4.1.1惯例，先来看看简单的使用const Koa = require('koa');const body = require('koa-body');const app = new Koa();// 可以给parsedMethods传想要koa-body解析的方法app.use(body({parsedMethods: ['POST', 'PUT', 'PATCH', 'G...

2020-02-24 16:24:47 1383

原创大白话说一说node的stream

在看koa-body的时候，发现很多和流相关的操作，就去看了下node文档和其他文章，花了挺长时间看完以后发现还只是略知一二，分享记录一下。很多细节还是要看官方文档。stream是个啥个人理解，就是个可以控制读写速度的缓冲区的封装，方便大家处理数据，比如说我要读取一个文件，我如果直接使用fs.readFile，不管同步异步吧，总是一口气读出来的，那么同步操作会阻塞，异步操作的话至少文件比较大...

2020-02-24 10:09:17 190

原创 webpack+babel打包出的class是怎么个实现

某天突然想看看ES6的class是怎么个实现法，就随便写了个简单的例子试了试，先看例子// add.jsexport default class Add { add(a, b) { return a + b; } minus(a, b) { return a - b; } static hah() { console.log("hah"); ...

2020-02-13 16:48:28 1184

原创 matter.js使用小记

之前一直想看box2d，后面发现了matter.js，听说文档比较全面，稍微看了下也没觉得有多全面（????），拖了很久才来写了个相对完整的例子，记录一下。先说下整体感觉，使用的时候发现了一些bug（也可能是我使用姿势不对），性能不是太好，文档形式是API加demo，有些功能需要自己尝试，建议把官方demo都看一遍，试一试。并且因为是个物理引擎，如果用来写游戏，有些你想要不遵守物理法则的时候就得想点办...

2019-12-22 19:05:28 2467 4

原创 koa源码部分解析(2)koa-router

版本7.4.0比较长，建议一边看一边打断点，光看一遍估计是不知道在说什么的，因为它的思路不是面向过程的那种一条线，而是互相穿插，绕来绕去的。koa-router的核心其实是path-to-regexp这个库，不过koa-router做了非常多的参数处理和封装，主要提供的功能有：基础的rest方法的注册、嵌套路由、路由中间层、参数处理等，我们一个一个来看。先来看看koa-router的基本使用...

2019-12-12 20:52:43 1010

原创《白帽子讲web安全》读书笔记

这里只记录一下自己觉得需要知道的点，不写的特别详细，因为每个点都是一个大的方向，有很多技巧和内容，这里只是写一下大纲。书里还有很多其他有用的内容，值得一读。浏览器端1.XSS攻击：通过URL参数，表单输入等方式，进行脚本的注入，执行获取cookie，修改页面行为等操作（脚本能注入了，能做的事情就非常多了）。有一些页面上的内容在提交后是保存在服务器上，并且会提供给其他用户查看的，所...

2019-11-18 09:40:36 859

原创一只sync和一只wait

最近有一个包里用了不少async await，但是细细看了一下发现很多地方用的比较奇怪，比如同步的函数，没有用到await也用async，就稍微整理了一下相关的使用，没有实现原理相关的内容，以示例为主，有点像面试题。参考了一些文章，就不单独罗列了，一搜还挺多的。async返回了什么async返回一个promise，这个大家应该都很清楚，那么看一下这个例子，看看是否能区分async funct...

2019-10-28 21:08:35 908

原创 koa源码部分解析(1)本体

koa自身的代码比较少，但是有很多依赖的npm包，有不少是在jshttp这个project里（比如on-finished）。版本2.7.0先来看一个使用koa的例子const Koa = require('koa');const fs = require('fs');const app = new Koa();function render(page) { return new ...

2019-09-02 20:19:54 1184

原创 node搭建react-router开发环境

2019-08-15 21:26:28 283

原创 redux、react-redux执行流程简单解析

其实不想看react-redux、redux的源码，平时不太喜欢用，尤其是简单的页面，然而总是会遇到复杂点的页面的，所以还是要了解下，搜索了下，讲react-redux、redux的文章很多，但是，好像都不太能理解，可能是风格不太一样，没办法还是只能自己看，看了就记录下吧。只讲最简单的使用涉及的东西，目前没怎么用中间件什么的。react-redux版本6.0.1，redux版本4.0.1使用的...

2019-08-11 22:18:00 603

转载 CSP简介

参考文章：https://cloud.tencent.com/developer/article/1411746CSP全称Content-Security-Policy，内容安全策略，它的主要作用是尽量降低XSS跨站脚本攻击的可能，CSP可以在meta标签和HTTP头中使用。比如Content-Security-Policy: img-src 'self'这个响应头表示图片的src只能加...

2019-07-24 21:38:56 1000

原创长短链接转换

把一个长链接https://xxx.com?aaa=123&bbb=456转换成一个短链接http://yyy.com/abcd这样的需求是挺常见的，今天写了写这个计算，单纯为了玩耍，离企业应用还差得远第一反应就是base64，因为看到了短链接里的字母和数字，但是base64越编码越长，所以是不满足要求的，那么就找个对象来存呗，所以我就写了个这样的 let urlMap = {};...

2019-07-19 10:07:41 2600

原创 webpack多页面方案

上一篇总结了webpack的配置，其实配置还是相对容易的，因为只要根据需要照搬选项就好了，但是只写配置项那最终打包出来的结果就是一个html和一个js，如果页面多了那肯定是不行的，所以就需要想办法拆分代码，我所知道的拆分代码方式大概有2种：1.使用react-loadable + import()；2.entry的对象写法和html-webpack-plugin的chunks选项；参考文章比较多...

2019-03-04 20:38:36 1348

原创 webpack配置总结

最近不是在写hw么，所以就撸了一遍webpack的文档，按说这事情一年前就该做了。不过前端的工程搭建不知道为啥这么复杂。配置文件结构不管create-react-app、vue-cli这些工具怎么封装，最后webpack肯定是运行一个配置文件，这个文件可以是js也可以是json（还可以是别的），个人感觉应该是json格式用的比较多吧。一般配置内容可以分成这么几个部分：入口（entry）...

2019-02-28 16:33:16 171

原创 babel的一些包的相关总结

参考：https://babeljs.iohttps://www.babeljs.cnbabel-***、@babel/***的包总是占一堆，但是又不太清楚是干嘛的，所以特地看了下文档，整理和摘抄如下：@babel/core核心功能，babel从版本7开始用@开头的scope包，老版本是babel-core，其他的包都是一样的规律@babel/plugin-***很多，不列举了，单独配...

2019-02-27 16:45:23 746

原创多组件编辑页面思路总结

最近在写一个东西，类似下面这张图，左边是组件区，比如有文本、图片、列表等；中间是渲染区，把左边的组件拖动到中间区域，就可以渲染一个对应的组件出来；鉴于每个组件需要不同的渲染结果，所以右边提供对每个组件的渲染内容的设置，根据每个组件类型的不同，右边编辑区的设置项也不同。这个东西的使用场景是，让用户自定义页面，中间的渲染区是自定义页面的效果展示，组件区就是自定义页面上支持放置的组件。用react...

2019-02-25 18:11:39 913

原创发布了@vzhufeng/hello-webpack

以前想要搭建一个前端工程随便搜索一下，按照文章一步步来就可以了，现在很多文章已经过期，相关的依赖已经不互相兼容了，前几天想搭建一个react的工程发现找了几篇文章都不行，create-react-app又相对比较重，要修改一些配置要了解它的配置的结构，想了想，就自己写了个简单的脚手架。安装npm install @vzhufeng/hello-webpack -g使用npm init，...

2019-02-17 14:55:08 116

原创 Linux Shell脚本攻略读书笔记（1）

以下的例子都以bash为环境，别的shell可能不能用1基本知识命令提示符，$表示普通用户，#表示管理员用户root~/.bash_history 保存用户运行过的命令~/.bashrc 定义诸如提示文本、颜色等各类设置，启动shell时，会执行这组命令。登录shell则是~/.bash_profile登录shell是登录主机后获得的那个shell。如果登录图形界面环境(比如...

2019-01-16 16:20:53 181

原创 wangEditor源码部分解读

最近在做富文本相关的探索，看了下wangEditor和draft.js，draft.js相对复杂一些吧，wangEditor的代码就比较直白，注释比较多，比较适合阅读，大体讨论一下wangEditor的结构。版本是v3.1.1，讲下大概原理，不会每个功能都讲。先看使用方式，var E = require('wangeditor');var editor = new E('#editor')...

2019-01-09 21:09:11 3437

原创 pro git book笔记

参考文章https://git-scm.com/突然发现了很多自己不知道的git命令和选项，记录一下自己觉得可能会有用的##杂项查看已经暂存起来的文件（add）和上次提交时的快照之间的差异 git diff --cached，版本&amp;amp;gt;1.6.1可以用 git diff --staged设置git默认使用的编辑器 git config --global core.editor vsco...

2018-12-27 23:20:29 176

原创 2018年总结

不知道从哪里说起，就从今年换坑说起好了。换坑的时候顺便报名学了下木工雕刻，打开了一个新世界的大门吧，还是很感谢有这么一批人在做着传统技艺的宣传和推广工作，当然钱肯定是没少挣的（笑哭）。发现自己很羡慕那些对自己本职工作很热爱的人，会在闲暇时间做些小东西，可能并没有太高的技术含量，但是至少有产出，相对而言，我就比较懒一点，看别人写的东西的时候多一些，自己写起来，总觉得别人都写过了，我再按同样的思路...

2018-12-22 21:23:16 148

翻译 Promises/A+规范翻译

Hi，又是我，之前那篇手撸promise写的太简单，被同学吐槽了，说完全没按照规范来，好的，先在这里翻译下规范原文 https://promisesaplus.com/时间 2018年11月29日一个promise代表一个异步操作的最终结果，和promise交互的主要方法是通过它的then方法，then方法是用户注册的回调函数，接收promise的最终结果或者promise没有fulfill...

2018-11-29 15:18:34 1533

原创手写一个简单的Promise

今天突发奇想，想自己写个Promise来玩，一说要写还真反应不过来怎么开始，总之先看看Promise是怎么用的好了。let pp= new Promise((resolve, reject) =&amp;gt; { resolve('done');});pp.then((value) =&amp;gt; { console.log(value);}).catch((e)=&amp;gt;{ cons...

2018-11-22 10:58:11 3473

原创 Pure-JavaScript-HTML5-Parser源码解读

有个需求要用到html标签解析，又碰巧之前有人写过，就直接用了之前用的东西https://github.com/blowsie/Pure-JavaScript-HTML5-Parser，git上星不多，不过感觉思路比较特别，和我最开始想的不太一样，稍微看了看原理，总结一下。因为没有release版本，只能写一个commit版本号，3e8b2b1153a40495f9a16506c778d00150...

2018-10-21 02:01:09 1581

翻译 Modern Code Review翻译

原文Modern Code Review: A Case Study at Google如果觉得看了之后没什么卵用，请别骂我，骂作者去。我个人也觉得干货不多只翻译比较有用的第四、五、六章，另外几章看标题就知道写了啥。省略了一些冗余陈述。1 介绍2 背景和相关工作3 研究方法7 讨论8 结论4 研究结果：动机我们试图理解开发人员在Google进行code review时的动机和期...

2018-10-15 21:57:18 1454 1

原创 Linux内核设计艺术读书笔记（1）

1.1从开机到main函数执行分三步启动BIOS，准备实模式下的中断向量表和中断服务程序启动盘加载操作系统到内存为执行32位的main函数做过渡实模式：20位存储器地址空间，1MB的存储器可寻址，可直接通过软件方式访问BIOS及周边硬件，没有硬件支持的分页机制和实时多任务的概念。Intel 80x86 CPU可以分别在16位实模式和32位保护模式下运行，加电即进入16位实模式状态...

2018-10-12 09:59:06 348

原创用马走完棋盘

起因是最近在玩《雷顿教授与恶魔之箱》，遇到一个问题，用马走完国际象棋的棋盘，试了试，挺难的，尤其是棋盘大了以后，所以就想到了八皇后，感觉差不多，然后就想，嗯，不如写个程序来试试，结果发现已经不记得八皇后怎么写了，所以先看了下八皇后怎么写。贴一下https://blog.csdn.net/gohike/article/details/53359691这篇里的实现var n = 8;var ar...

2018-10-11 09:50:57 757

原创 axios源码部分解读

最近事情多，很久没看jquery的源码了（唉），而且后面排的东西越来越多，暂时应该不会继续，下次找个机会再重新捡起来吧因为用到的工程里包装了axios，并且还踩了次坑，所以拿来看了看自己比较感兴趣的特性如下： 1. 请求和返回的拦截 2. 取消请求 3. 请求代理axios用到的包很少，只有url和follow-redirects，它的源码在lib文件夹下，lib下面又有adap...

2018-09-16 20:19:57 869

原创 lodash 4.16.1方法整理

最近才开始用lodash，发现确实有些函数可以避免自己写一些重复代码，用自己的话记录一些自己觉得比较有用的，有一些函数大概看的时候还没领会到它的精髓所在，以后再说不是全部，不是全部，不是全部loadsh中有些和原生js同名的函数，但是规则会不太一样，比如isNaN，最好用原生的，除非对规则的区别很清楚方法有点多，建议一次只看一个类别，有空的时候来看看，熟悉熟悉版本4.16.11...

2018-09-02 20:54:25 3169

原创 sass文档摘记

过了一遍sass文档，自己过滤了一些觉得不太推荐使用的内容，记录下以前不知道的内容1.变量$nav-color: #F90;nav { $width: 100px; width: $width; color: $nav-color;}变量可以引用别的变量中划线和下划线是互通的，也就是说，$a_b和$a-b是同一个变量，最好不要使用这个规则变量默认值，$fancy...

2018-08-02 17:22:06 154

原创关于CSRF的一点记录

参考文章 http://www.vuln.cn/7134/首先，参考文章写得非常棒，最近在看个东西，正好看到X-XSRF-TOKEN这个头，之前没见过，所以就查了下，貌似是防御xsrf攻击用的，自己对xsrf不甚了解，所以就查了些文章，其中参考文章是写得最详细的了，记录一下自己的理解过程。很多文章里都提到了，xsrf是自己建一个网站A，然后你知道B网站有个请求get，然后有人登录过B，又...

2018-07-26 21:51:40 604

原创 Commander使用记录

参考文章 https://github.com/tj/commander.js http://www.ruanyifeng.com/blog/2015/05/command-line-with-node.html之前没怎么写过node，所以git上面的readme看起来有点吃力，找了几篇文章来看才摸到点门道，但是还有不少问题1.怎么运行第一步肯定是创建工程，安装commander，...

2018-07-20 16:18:33 800

原创 sass多个颜色文本

没什么技术含量，完全就当日记写场景：遇到一个列表，里面花花绿绿的，有很多种颜色，就用span来包，但是颜色呢，我又不想一个一个写color，正好颜色要求不高，就用标准的red、green这种来写，所以就起了redSpan、greenSpan这样的类名，这样一看，如果不用sass写的好看点真的过不去了于是就开始查sass的用法，以前都是用最简单的嵌套属性，一下子想不起来用什么，查了一通，反正...

2018-06-29 18:17:06 440

原创 6.Data

参考文章 http://www.cnblogs.com/aaronjs/p/3370176.html数据缓存这个东西平时可能不太有感觉，尤其是做一些简单的页面的时候，只有用到data-xx这样的存储在标签里的数据的时候，才会接触到，但还可能意识不到这是在使用jq的缓存，我以前以为$(‘#dom’).data(‘data2’)就只是操作标签里的data-xx数据而已两种形式可以定义缓存， ...

2018-06-28 22:10:03 196

转载光标位置插入文本

摘自 https://blog.csdn.net/gisredevelopment/article/details/29255147纯记录，没啥可说的<html> <head> <script type='text/javascript'> function test(str){ var tc = document.getE...

2018-06-19 17:17:38 1011

原创记一个MutationObserver的问题

http://www.cnblogs.com/dong-xu/p/7000139.html看上面这篇文章的时候，看到有个例子是讲MutationObserver的，非常费解，两个元素，一父一子，父元素设置上observer，点击子元素的时候，observer会触发两次，应该是事件冒泡了，没问题，但是对子元素调用click()的时候，父元素的点击回调也照样执行，但是observer只触发了一次，...

2018-05-24 23:53:33 2699

原创希尔排序

参考文章 http://www.cnblogs.com/hapjin/p/5538411.html http://www.cnblogs.com/jingmoxukong/p/4303279.html希尔排序就是一个特殊形式的插入排序，插入排序是前面的都是有序的，轮到你的时候，你看到前面哪个比你大，你就再往前看，一直看到比你小的那个，然后吧唧插在这个后面，那些比你大的都往后站希尔排序是...

2018-05-22 23:46:34 96

空空如也

空空如也