- 博客(88)
- 收藏
- 关注
RSS订阅
原创 react+koa实现登陆、聊天、留言板功能后台
前端通过create-react-app脚手架搭建前端项目后端通过koa-generator脚手架搭建后端项目
2019-08-01 14:57:20
1628
2
原创 React实现web音乐app（可预览）
暂未实现的功能：路由的过渡效果（本来想用react-transition-group，但没能成功，就用了css动画代替）路由组件缓存（路由后退时，会重新请求页面，滚动条的位置没有保存，页面刷新）图片懒加载（没有实现图片懒加载）上面的功能在react中实现或许有点麻烦，但是在vue中都可以很好的实现，比如vue自带了过渡组件，路由keep-alive，和 vue-lazyload 。...
2019-03-11 09:16:42
2114
原创 基于原生小程序精仿的猫眼电影（可预览）
项目目录结构├── assets │ ├── font # 项目的icon文件│ ├── images # 图片资源│ └── libs # 三方...
2018-10-28 14:52:59
13386
7
原创 基于React+antd的后台管理模板（可预览）
自己利用业余时间，基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面，不涉及后台交互。特点：我用
2018-08-05 13:42:53
96763
61
原创 Vue仿制移动端QQ音乐（可预览）
ES6提供了class，但它还是没有类，它只是一个基于原型对象的语法糖（本质上还是通过原型对象来实现类，只不过写法变了）//定义类class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ...
2018-06-05 21:28:30
8923
4
原创 如何开发一个google插件(二)
在上一篇文章如何开发一个google插件(一)里主要介绍了google插件的基本结构。源码地址下载源码后打开浏览器的扩展程序管理->加载已解压的扩展程序，即可调试插件学习如何结合react、webpack、ts开发插件学习如何使用google api学习如何用插件操作网页学习插件通信方法。
2023-12-28 16:32:15
1197
原创 基于ts+hooks完全实现的移动端组件库
这是我当初刚学react hooks时，参考vant和react源码写的一个移动端组件库，虽然现在看来其中有很多写法还是不够完善，但对当时的我提供了组织代码、封装组件、代码规范的一些思路。
2023-12-26 10:21:54
369
原创 如何开发一个google插件(一)
google插件是安装在google浏览器中的扩展程序，这个扩展程序也是基于html、css、js开发而来的，并且浏览器提供了额外的API供扩展程序使用。目前最新插件API版本是v3，v2版本会逐步被淘汰（网络上大部分插件api教程都是基于v2版本的，v3版本有很多不兼容变化，此次分享为v3版本）开发的google插件可以应用到以Chromium为内核的浏览器中，如360浏览器、qq浏览器等。
2023-12-21 15:00:12
967
原创 前端的事件循环EventLoop
● 宏任务队列: ajax、setTimeout、setInterval、Dom监听、requestAnimationFrame等。如果有个任务耗时比较多（比如ajax），这种情况后面的任务都会被阻塞。既然js是单线程，那就不能同时执行多个任务，只能将任务排队执行，为了防止这种情况，js将任务分为同步任务和异步任务去执行。同步任务放入主栈中执行，异步任务放入任务队列中执行。任务队列可分为两个队列：宏任务和微任务。微任务的执行优先级大于宏任务优先级。
2023-12-21 14:38:20
489
转载 关于npm版本号详解
为了在软件版本号中包含更多意义，反映代码所做的修改，产生了语义化版本，软件的使用者能从版本号中推测软件做的修改。npm 包使用语义化版控制，我们可安装一定版本范围的 npm 包，npm 会选择和你指定的版本相匹配 的 (latest)最新版本安装。npm 的版本号由三部分组成：主版本号、次版本号、补丁版本号。有时候为了表达更加确切的版本，还会在版本号后面添加标签或者扩展，来说明是预发布版本或者测试版本等。比如 3.2.3-beta-3。
2022-10-27 15:08:05
13101
1
原创 使用webpack4从零配置react项目
前言以前做react项目的时候都是使用create-react-app脚手架初始化项目的，最近想自己从零配置webpack来实现一个react项目的初始化。打包后的目录结构：创建文件件sty-react-template初始化git仓库、生成package.json文件git inityarn init...
2019-11-10 13:34:00
1867
原创 好用的vscode插件（长期更新）
1.Chinese (Simplified) Language Pack for Visual Studio Code作用：中文翻译vscode2.Auto Close Tag作用：自动闭合html标签3.Auto Rename Tag作用：自动同步重命名标签4.carbon-now-sh作用：分享好看的代码片段。一般我们将代码片段发送给别人的时候是直接复制代码或者直接截图，这款...
2019-10-15 20:07:17
22693
5
原创 随笔
学习其实就是不断的给自己提问然后解决的过程，怎么提问和怎么解决就是技巧了，在我刚开始学的时候，就犯过很多错误，比如在学js的时候，常常花大量时间去死记一些api，其实这些东西都不需要去死记，自己有一个印象后需要用的时候去查询文档即可。把精力花在去理解原理上，我们要把握事情的专注点，我认为程序员的能力体现在学习能力和独立解决问题的能力上。当遇见一个问题，我们需要自己去解决，在解决的过程中我们会发现...
2019-10-11 20:53:44
181
原创 webSocket实现聊天室功能
前言我们知道服务器是一种应答模式，也就是说服务器只能被动提供服务，而不会主动推送信息给客户端。传统网站为了实现类似在线聊天的功能都是不断的给服务器发送信息询问是否有新消息也就是所谓的轮询。这种方式有很明显的弊端：大量耗费服务器内存和宽带资源，因为不停的请求服务器，很多时候 并没有新的数据更新，因此绝大部分请求都是无效请。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连...
2019-08-01 13:29:30
9895
10
原创 jwt实现注册与登陆系统
前言自己用react+koa实现了一个包含登陆和注册功能的网址，在这里记录一下实现过程项目地址：预览地址：注册注册其实没什么好说的，就是要注意不要明文保存密码，否则数据库泄露后，密码会被其他人用来撞库使用。前台加密主要是为了防止post请求明文传递密码，本来我想在前端加密，然后数据库直接保存加密的密码到数据库，登陆时传递加密后的密码进行登陆，但是前端使用的加密工具加密同一个密码每次都...
2019-08-01 13:07:13
5195
2
原创 富文本编辑器braft-editor的使用
在写react时需要用到富文本编辑器，找了很多后最后选择了braft-editor富文本编辑器美观易用的react富文本编辑器可结合antd使用本质是封装的draft-js提供丰富的功能这里我只介绍常见的一些功能和问题，详情请参考官网基本使用通过value和onChange对editorState组件进行双向绑定，注意value的值的类型必须是editorState对象(这一点...
2019-08-01 13:05:12
20704
5
转载 小程序的老祖宗PWA为什么没有火起来？
看上去近乎完美的PWA，出现时间要比小程序早上几年的PWA，为何不如小程序火热甚至在国内鲜为人知呢？比小程序更早的“远古小程序”PWABAT现都已入局小程序赛道，开始新一轮的较量。但无论是微信，支付宝还是百度的智能小程序，本质上都要在App上运行，对用户来说，还需横跨手机系统和App两个平台的限制。App的限制对用户来说可能不是什么大的负担，毕竟微信支付宝也算是国民级的必装应用。但从系统...
2019-07-25 10:08:42
916
原创 用js实现可拖动的div
用js实现可拖动的div，其实逻辑很简单，计算鼠标的移动距离然后设置盒子的位置即可看看效果源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
2019-07-09 13:47:00
1664
1
原创 react-router（v4）路由跳转页面不更新的问题
在组件中如何获取history、match、location路由API？路由组件可以直接在props上获取，非路由组件需要用withRouter高级组件包裹后在props上获取在store或非组件的js中如何获取history路由API？//手动引入import {createBrowserHistory} from 'history'const history = createBr...
2019-06-18 11:19:53
12500
1
原创 如何用纯css使div保存等比例缩放
当一个div盒子的宽度为百分比时，如何使盒子按等比例缩放？我开始的想法是获取盒子宽度，然后将盒子宽度按比例计算得到高度，这样盒子就可以等比例缩放了。但是遇到一个问题，盒子宽度为百分比，我们不能直接获取到盒子宽度，如果用js去获取盒子宽度又太麻烦，最后发现了css的padding属性。padding属性的百分比都是基于父元素的width值。/* 基于父元素的width */padding...
2019-05-27 11:49:53
9542
原创 题目：在复杂数组中寻找一个值
&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt;
2019-04-19 11:53:57
591
原创 如何通过抓包来获取数据API
前言写了一个猫眼电影小程序，数据是通过抓包获取的，开始以为抓包很简单就没说明，结果有很多人问如何获取猫眼电影数据，这里就写了一篇博客说明。通过谷歌浏览器的调试工具可以抓取任意网站的包，这里以猫眼电影为例。1.首先访问猫眼官网打开谷歌调试工具，设置移动端调试并刷新页面会出现上面的页面。2.分析网络请求若数据是自己想要的接口数据则通过请求头获取接口地址和参数至此就完成了抓包，我们...
2019-03-22 15:28:09
24048
原创 cookie、session、sessionId、token、登录
简单理解cookie/session机制tokencookie和session是一种追踪客户端与服务器端通信的一种方式。我们知道http链接是无状态链接，每次客户端访问服务端，服务端都不会知道访问者是谁，这样的好处就是http设计简单，缺点也显而易见：每次关闭浏览器后又要重新登录。如何实现记录用户访问？当用户第一次访问服务器时，在服务器生成一个记录并返回给客户，客户下次再访问时，将上次的...
2019-03-21 13:29:28
1658
2
转载 web服务器与web框架
Web 服务器当我们在浏览器输入URL后，浏览器会先请求DNS服务器，获得请求站点的 IP 地址。然后发送一个HTTP Request（请求）给拥有该 IP 的主机，接着就会接收到服务器给我们的 HTTP Response（响应），浏览器经过渲染后，以一种较好的效果呈现给我们。这个过程中，正是Web服务器在幕后默默做贡献。简单来说，Web服务器是在运行在物理服务器上的一个程序，它永久地等待客户...
2019-01-17 10:02:31
4197
原创 关于React中props.children
props和state代表着组件的属性和状态，属性只读而状态可变。this.props对象的属性与组件的属性一一对应，但是有一个例外，就是this.props.children属性props.childrenprops.children在每个组件上都可用。 它会包含组件的开始和结束标记之间的内容。这个属性和vue的插槽类似，都是在自定义组件中插入子节点。组件之间可以插入的内容可以...
2019-01-04 15:07:56
4017
原创 扩展create-react-app的webpack配置
在创建react项目时，我们一般用create-react-app脚手架来搭建项目。create-react-app对webpack的配置进行了封装并默认隐藏了配置文件。当我们需要对webpack的配置进行扩展时，需要执行npm run eject命名将配置文件暴露出来，然后在对配置文件进行扩展。这种方式的缺点：npm run eject命名不可逆，一旦配置文件暴露后就不可再隐藏扩展的...
2018-12-22 10:56:55
16793
1
原创 关于antd表单组件遇见的问题
公司在用antd+mobx做表单时遇见一些问题，自己解决并记录下来业务需求点击新增按钮时，弹出一个嵌入Form的Modal，填写完毕后验证表单点击编辑按钮时，弹出上一个Modal，并将以前的填写信息回显上去遇见的问题问题1、表单验证后错误信息已经打印到控制台上，但页面中并没有显示错误信息分析过程：填写表单时触发onFieldsChange将变化的value存放到store中...
2018-11-29 10:48:21
4452
原创 关于antd表单的双向绑定
公司使用antd+mobx进行开发，在使用表单的绑定时出现问题const objToForm = (obj)=&amp;amp;amp;amp;amp;gt;{ let target = {} for(let [key,value] of Object.entries(obj)){ target[key] = Form.createFormField({value}) } return target}cons...
2018-11-16 11:58:29
17903
5
原创 git
ES6提供了class，但它还是没有类，它只是一个基于原型对象的语法糖（本质上还是通过原型对象来实现类，只不过写法变了）//定义类class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ...
2018-11-08 09:25:40
202
原创 在React、Vue和小程序中使用函数节流和函数防抖
在上一篇中我总结了节流函数和防抖函数的基本原理：总结前端函数防抖与函数节流。接下来介绍一下防抖函数和节流函数在前端框架中的使用。在使用前一定要注意两个问题：this的指向事件对象的传递React中使用防抖函数和节流函数...
2018-10-31 15:25:16
6258
转载 总结JS闭包
让你分分钟理解 JavaScript 闭包闭包，是 Javascript 比较重要的一个概念，对于初学者来讲，闭包是一个特别抽象的概念，特别是 ECMAScript 规范给的定义，如果没有实战经验，很难从定义去理解它。因此，本文不会对闭包的概念进行大篇幅描述，直接上干货，让你分分钟理解闭包！闭包，一睹为快在接触一个新技术的时候，我首先会做的一件事就是找它的 demo。对于我们来说，看代码比...
2018-10-30 11:37:33
269
转载 前端国际化（react-intl）
antd/antd-mobile 国际化方案国际化方案概述前端国际化详解、举例国际化资源文件管理项目之间、开发者与翻译者之间的协作国际化规范附录扩展阅读国际化方案概述国际化是一个看似简单，实则非常复杂的领域，实际进行国际化工作时，大家会发现它往往会涉及很多内容：前端国际化服务端国际化国际化资源文件管理项目之间、开发者与翻译者之间如何协作而且，国际化方案往往与具体的...
2018-09-26 15:04:13
6022
1
转载 node调试的3种方法方法
注意：启动node文件时要加 –inspect，例如： $ node –inspect app.js Node 调试工具入门教程
2018-09-12 15:03:15
2120
原创 关于js的浅拷贝和深拷贝遇到的问题
我们知道js的值分为两种：引用类型值和基本类型值引用类型的值在进行赋值操作时，其实赋值的是变量的指针，使两个变量引用同一个地址，导致修改一个变量另一个变量也会发生改变。浅拷贝：复制地址，改变其中一个会影响另一个 深拷贝：在内存中重新创建一个引用类型，复制的两者不会相互影响实现深拷贝的常见方法： //深拷贝对象 let x = {a:1} let y = ...
2018-09-11 18:41:31
1682
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人