![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 76
zzh1918
向上生长
展开
-
file base64 url 之间的转换
file base64 url 之间的转换转载 2022-09-08 11:08:51 · 528 阅读 · 0 评论 -
自定义mock服务器
自定义前端mock服务器原创 2022-07-27 11:04:49 · 1775 阅读 · 1 评论 -
使用webpack4从零配置react项目
前言以前做react项目的时候都是使用create-react-app脚手架初始化项目的,最近想自己从零配置webpack来实现一个react项目的初始化。打包后的目录结构:创建文件件sty-react-template初始化git仓库、生成package.json文件git inityarn init...原创 2019-11-10 13:34:00 · 1889 阅读 · 0 评论 -
React实现web音乐app(可预览)
暂未实现的功能:路由的过渡效果(本来想用react-transition-group,但没能成功,就用了css动画代替)路由组件缓存(路由后退时,会重新请求页面,滚动条的位置没有保存,页面刷新)图片懒加载(没有实现图片懒加载)上面的功能在react中实现或许有点麻烦,但是在vue中都可以很好的实现,比如vue自带了过渡组件,路由keep-alive,和 vue-lazyload 。...原创 2019-03-11 09:16:42 · 2146 阅读 · 0 评论 -
扩展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 · 16822 阅读 · 1 评论 -
总结JS闭包
让你分分钟理解 JavaScript 闭包闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是 ECMAScript 规范给的定义,如果没有实战经验,很难从定义去理解它。因此,本文不会对闭包的概念进行大篇幅描述,直接上干货,让你分分钟理解闭包!闭包,一睹为快在接触一个新技术的时候,我首先会做的一件事就是找它的 demo。对于我们来说,看代码比...转载 2018-10-30 11:37:33 · 275 阅读 · 0 评论 -
总结前端函数防抖与函数节流
范德萨原创 2018-10-30 11:36:25 · 7300 阅读 · 1 评论 -
ES6-Symbol(一)
在ES6中新添加了一种数据类型,也就是说现在总共有7种数据类型。undefined、Null、String、Number、Boolean、Object、Symbol添加这个新类型的唯一目的就是防止对象属性重名假如我们引入了其他人写的一个对象obj,我们想重新给obj添加一个属性x,但是原来的对象已经有属性x(我们并知道属性x已经存在),这时候我们添加的属性就把原来的属性覆盖了。va...原创 2018-03-10 11:26:37 · 488 阅读 · 0 评论 -
前端国际化(react-intl)
antd/antd-mobile 国际化方案国际化方案概述前端国际化详解、举例国际化资源文件管理项目之间、开发者与翻译者之间的协作国际化规范附录扩展阅读国际化方案概述国际化是一个看似简单,实则非常复杂的领域,实际进行国际化工作时,大家会发现它往往会涉及很多内容:前端国际化服务端国际化国际化资源文件管理项目之间、开发者与翻译者之间如何协作而且,国际化方案往往与具体的...转载 2018-09-26 15:04:13 · 6089 阅读 · 1 评论 -
如何通过抓包来获取数据API
前言写了一个猫眼电影小程序,数据是通过抓包获取的,开始以为抓包很简单就没说明,结果有很多人问如何获取猫眼电影数据,这里就写了一篇博客说明。通过谷歌浏览器的调试工具可以抓取任意网站的包,这里以猫眼电影为例。1.首先访问猫眼官网打开谷歌调试工具,设置移动端调试并刷新页面会出现上面的页面。2.分析网络请求若数据是自己想要的接口数据则通过请求头获取接口地址和参数至此就完成了抓包,我们...原创 2019-03-22 15:28:09 · 24317 阅读 · 0 评论 -
题目:在复杂数组中寻找一个值
<!DOCTYPE html><html lang="en"><head>原创 2019-04-19 11:53:57 · 599 阅读 · 0 评论 -
用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 · 1678 阅读 · 1 评论 -
react编写打字组件
前言效果原创 2019-07-17 12:18:29 · 577 阅读 · 0 评论 -
富文本编辑器braft-editor的使用
在写react时需要用到富文本编辑器,找了很多后最后选择了braft-editor富文本编辑器美观易用的react富文本编辑器可结合antd使用本质是封装的draft-js提供丰富的功能这里我只介绍常见的一些功能和问题,详情请参考官网基本使用通过value和onChange对editorState组件进行双向绑定,注意value的值的类型必须是editorState对象(这一点...原创 2019-08-01 13:05:12 · 20831 阅读 · 5 评论 -
jwt实现注册与登陆系统
前言自己用react+koa实现了一个包含登陆和注册功能的网址,在这里记录一下实现过程项目地址:预览地址:注册注册其实没什么好说的,就是要注意不要明文保存密码,否则数据库泄露后,密码会被其他人用来撞库使用。前台加密主要是为了防止post请求明文传递密码,本来我想在前端加密,然后数据库直接保存加密的密码到数据库,登陆时传递加密后的密码进行登陆,但是前端使用的加密工具加密同一个密码每次都...原创 2019-08-01 13:07:13 · 5252 阅读 · 2 评论 -
react+koa实现留言板功能
前言自己用react+koa实现一个留言板的功能,在这里记录和总结截图原创 2019-08-01 13:08:55 · 1522 阅读 · 4 评论 -
webSocket实现聊天室功能
前言我们知道服务器是一种应答模式,也就是说服务器只能被动提供服务,而不会主动推送信息给客户端。传统网站为了实现类似在线聊天的功能都是不断的给服务器发送信息询问是否有新消息也就是所谓的轮询。这种方式有很明显的弊端:大量耗费服务器内存和宽带资源,因为不停的请求服务器,很多时候 并没有新的数据更新,因此绝大部分请求都是无效请。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连...原创 2019-08-01 13:29:30 · 9952 阅读 · 10 评论 -
react+koa实现登陆、聊天、留言板功能后台
前端通过create-react-app脚手架搭建前端项目后端通过koa-generator脚手架搭建后端项目原创 2019-08-01 14:57:20 · 1655 阅读 · 2 评论 -
关于js的浅拷贝和深拷贝遇到的问题
我们知道js的值分为两种:引用类型值和基本类型值引用类型的值在进行赋值操作时,其实赋值的是变量的指针,使两个变量引用同一个地址,导致修改一个变量另一个变量也会发生改变。浅拷贝:复制地址,改变其中一个会影响另一个 深拷贝:在内存中重新创建一个引用类型,复制的两者不会相互影响实现深拷贝的常见方法: //深拷贝对象 let x = {a:1} let y = ...原创 2018-09-11 18:41:31 · 1695 阅读 · 0 评论 -
web Storage
HTML提供了一种新的存储机制。 HTML提供了一种新的对象Storage,类似于String、Number、Object。通过Storage对象提供的方法和属性来对数据进行增删改查。 实际上我们将数据以键值对的形式保存到Storage对象里,通过Storage对象提供的方法进行数据操作。增 Storage.setItem() 该方法接受一个键名和值作为参数,将会把键值对添加到存储...原创 2018-08-30 15:17:01 · 640 阅读 · 0 评论 -
用JS改变html样式
用JS改变HTML样式在html中定义样式的方法有3种:通过link标签链接外部样式使用style标签定义嵌入式样式使用标签style属性定义样式用JS改变的HTML样式无非就是上面三种,改变样式只需要解决两个问题找到要更改样式的元素更改样式更改link链接的外部样式html>head> title>title> link rel="sty原创 2017-06-13 18:26:57 · 12062 阅读 · 0 评论 -
原生JS获取元素在文档中的位置
原生JS获取元素在文档中的位置原生JS提供了很多关于元素信息的属性具体就不总结了元素在页面上的位置有绝对位置和相对位置 绝对位置 网页元素的绝对位置,指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。 首先,每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离。原创 2017-11-09 18:23:17 · 10083 阅读 · 4 评论 -
为什么对象不能调用Object的方法?
JS中所有对象都是继承Object对象的。所以String对象也有toString()方法。 但是下面的情况:var obj = {};var o = obj.create(Object); // 出错, 但使用Object.create()可以var o1 = obj.getPrototypeOf(obj); //出错, 但使用Objcet.getPrototypeOf()可以为什么obj原创 2017-11-16 15:28:49 · 2684 阅读 · 1 评论 -
HTTP中的Content-Type
MIME在介绍Content-Type之前,先介绍一下MIME。 早期的互联网时代,网页都很简单,大部分都是文字内容。随着互联网的发展,传递的信息越来越丰富,如图片、声音、视频等。计算机都是传递的二进制文件,那他是怎么知道哪些是图片文件,哪些是声音文件? 很简单,我们只要告诉接受方“喂,这是声音文件,你用声音文件的程序打开”;“这是视频文件…”。 这样接受文件的那一方就知道怎么打开文件了原创 2017-11-11 17:44:12 · 288 阅读 · 0 评论 -
JS原型对象,原型链
对象JS中创建对象都是通过构造函数创建的,所以每个对象中都有一个指向其构造函数的指针constructorvar obj = new Object();var arr = new Array();var obj2 = {}; //字面量创建实质上是上面方式的简写var arr2 = [];var str = new String("test"); //创建的是对象var str2 = "原创 2017-11-16 15:01:06 · 171 阅读 · 0 评论 -
总结Object的方法
注意:Object的构造函数方法和Object原型对象方法是不同的,Object构造函数的方法只能被Object调用,而Object的原型对象的方法可以在原型链上继承 Object构造函数的属性Object.prototype指向其原型对象,所有对象均继承这个原型对象 Object构造函数的方法Object.create() 使用指定的原型对象及其属性去创建一个新的对象 参原创 2017-11-16 15:34:09 · 405 阅读 · 0 评论 -
ES6-Symbol(二)
在明白Symbol值使用目的后,就来学习如何创建Symbol值。有三种获取symbol的方法: 调用Symbol()函数创建Symbol值调用Symbol.for()方法来创建Symbol值使用标准定义的symbol,例如:Symbol.iterator。标准根据一些特殊用途定义了少许的几个symbol。1.使用Symbol函数来创建值var a = Symbol();va...原创 2018-03-10 11:27:00 · 312 阅读 · 0 评论 -
总结Array的方法
Array构造函数的方法(这些方法只能被Array构造函数调用,不被数组实例继承)Array.from() 作用:将伪数组(NodeList)或可迭代对象(Set)转换为真正的数组 参数:伪数组或可迭代对象,mapFn回调函数(可选),thisArg对象(可选) 返回值:数组实例 目的:让伪数组或可迭代对象能使用数组的方法 伪数组对象(拥有一个 length 属性和若干索引...原创 2018-03-10 12:23:11 · 384 阅读 · 0 评论 -
JS创建对象的方法
ES5中没有类的概率,我们要创建许多同类型对象时需要使用其他方法来实现工厂模式工厂模式其实就是通过定义一个普通函数,利用函数来创建对象,对象的属性都是通过函数参数传递的function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job;...原创 2018-03-17 15:19:30 · 115 阅读 · 0 评论 -
原生JS实现动画的方法
有3种方法 setTimeout、setInterval、requestAnimationFrame前两种方法的缺陷是需要自己设置动画帧的刷新时间。时间太短,浏览器来不及处理,时间太长,动画又不流畅。requestAnimationFrame方法是h5提供的一种专门解决动画更新的API,浏览器会自动以最合适的频率去刷新动画。下面用3种方法分别实现进度条动画效果//html和css...原创 2018-04-15 16:18:23 · 15031 阅读 · 0 评论 -
阻止事件冒泡和默认行为
html>head> title>2048title> meta charset="UTF-8"> style type="text/css"> *{ padding: 0; margin: 0; } body{ background: #F8FFE5;原创 2018-06-14 12:18:13 · 142 阅读 · 0 评论 -
js实现简单页面全屏
代码块&amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;meta http-equiv=&amp;quot;Content-Type&amp;quot; content=&amp;quot;text/html; charset=utf-8&amp;quot; /&amp;amp;gt; &amp;amp;lt;转载 2018-06-17 12:20:21 · 3272 阅读 · 1 评论 -
JS实现动态打字效果
自己想用JS来实现一个动态打字的效果,然后对网上的一些方法做了一个总结 只打印单纯的文字只打印文字时,就是循环打印字符串,字符串长度依次递增...原创 2018-06-29 20:20:48 · 30054 阅读 · 14 评论 -
关于网页中的动画
发原创 2018-07-14 20:57:26 · 1200 阅读 · 0 评论 -
收藏的github资源
JS动画库 three.jsscrollreveal 滚动动画lottie-web 在Web,Android和iOS以及React Native上本地渲染AE动画,可根据不同平台选择不同工具GSAP 一款高效的动画平台 富文本编辑器react-draft-wysiwyg 基于React的DraftJS封装的富文本编辑器tinymce-reactwangEdito...原创 2018-08-02 09:37:36 · 2938 阅读 · 0 评论 -
Javascript异步编程的4种方法
对于前端的异步编程一直不是很理解,阮老师的文章一直反复再看。最近看到vue的watch时,发现实现原理和发布/订阅模式相同。贴下链接,以后慢慢理解、消化 Javascript异步编程的4种方法...转载 2018-08-31 10:30:30 · 267 阅读 · 0 评论 -
JS的闭包
下面我们将看到的是 JavaScript 中必须提到的功能最强大的抽象概念之一:闭包。但它可能也会带来一些潜在的困惑。那它究竟是做什么的呢?function makeAdder(a) { return function(b) { return a + b; }}var x = makeAdder(5);var y = makeAdder(20);x(转载 2018-08-30 15:12:58 · 152 阅读 · 0 评论