前端
文章平均质量分 86
_双眸
GitHub:https://github.com/BothEyes1993
【所有demo地址】
1
2
展开
-
理解React hooks常用方法useState, useEffect, useMemo, useCallback, useContext
useStateuseState接收一个初始值,返回的是一个解构出来的数组,第一个是当前状态(似state),第二个是状态的更新函数(似setState),更新函数与react的setState不同的是,useState的更新函数会将状态替换(replace)而不是合并(merge)。使用场景:函数组件中需要用到状态值,类似react类组件的stateimport React, { useState } from 'react';function Example() { // 声明一个新的原创 2021-08-26 18:14:16 · 1590 阅读 · 0 评论 -
Axios使用及源码解析
简介axios 是一个用于浏览器和Node.js上的基于 Promise 的http网络库。大纲使用方式安装:npm install axios使用://引入axiosconst axios = require('axios');import axios from 'axios';axios的四种使用方式1. axios(config)直接将相关配置包括请求url作为参数传入到axios方法中axios({ url: 'https://jsonplaceholder.原创 2021-06-15 17:39:18 · 890 阅读 · 0 评论 -
关于解构用法小结
介绍数组解构的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象,由于 undefined 和 null 无法转为对象,所以对它们进行解构赋值,都会报错。解构赋值对提取JSON对象中的数据,函数参数的默认值,尤其有用。基础用法数组与迭代器的解构数组解构赋值的一个简单示例,其语法的一原创 2021-06-12 19:12:28 · 516 阅读 · 0 评论 -
关于es6 扩展运算符的小结
参考:es6 扩展运算符 三个点(…)基础用法一1.由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。function f(x, y, z) { // …}var args = [0, 1, 2];f(…args);2.数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。扩展运算符提供了复制数组的简便写法。const a1 = [1, 2];// 写法一const a2 = […a1];// 写法二const原创 2021-06-12 18:59:05 · 258 阅读 · 0 评论 -
Git的HEAD、master 与 branch区别
这一节主要是几个概念的解释:HEAD、master 以及 Git 中非常重要的一个概念: branch。引用:commit 的快捷方式首先,再看一次 log:通过查看 log,可以对这个逻辑进行验证:当有人使用 git clone 时,除了从远程仓库把 .git 这个仓库目录下载到工作目录中,还会 checkout (签出) master(checkout 的意思就是把某个 commit 作为当前 commit,把 HEAD 移动过去,并把工作目录的文件内容替换成这个 commit 所原创 2020-09-12 17:32:07 · 2594 阅读 · 0 评论 -
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来。做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发。之后百度了一下这个问题,原因是主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会...原创 2020-04-21 22:48:00 · 530 阅读 · 0 评论 -
Gulp的代理转发插件
需求背景前后端分开部署时,需要单独为前端启动一个服务,如果使用gulp-connect的话,那么代理需要额外的插件来配置。首先说下为什么需要代理,gulp-connect是静态web的server(就是只能访问静态页面),如果需要向另外一个或几个服务器请求数据那么就需要代理。除非前后端一起部署,不然由于浏览器的限制是没办法跨域请求数据的。即便是前后端部署在一起,如果还需要向其他服务请求数据,或者...原创 2020-03-28 17:01:58 · 418 阅读 · 0 评论 -
HTTP Strict Transport Security (通常简称为HSTS)
HTTP Strict Transport Security (通常简称为HSTS) 是一个安全功能,它告诉浏览器只能通过HTTPS访问当前资源, 禁止HTTP方式。Freebuf百科:什么是Strict-Transport-Security?一个网站接受一个HTTP的请求,然后跳转到HTTPS,用户可能在开始跳转前,通过没有加密的方式和服务器对话,比如,用户输入http://foo.com...原创 2020-01-28 16:59:45 · 7491 阅读 · 0 评论 -
requestAnimationFrame/cancelAnimationFrame——性能更好的js动画实现方式
用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升。但是css3动画还是有不少局限性,比如不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程等等。所以有的时候我们还是不得不使用setTimeout或setInterval的方式来实现动画,可是setTime...原创 2019-12-27 21:14:24 · 445 阅读 · 0 评论 -
webview的简单介绍和手写一个H5套壳的webview
1.webview是什么?作用是什么?和浏览器有什么关系?Webview 是一个基于webkit引擎,可以解析DOM 元素,展示html页面的控件,它和浏览器展示页面的原理是相同的,所以可以把它当做浏览器看待。(chrome浏览器也是基于webkit引擎开发的,Mozilla浏览器是基于Gecko引擎开发的)Android的Webview在低版本和高版本采用了不同的webkit版本内核,4.4...原创 2019-11-16 23:15:49 · 1419 阅读 · 0 评论 -
关于前后端写入Cookie时domain的一个问题
1.1. 前端先假设有如下setCookie方法:function setCookie(name, value, day, path, domain){ day = day || 30; path = path || '/'; var str = name + '=' + value + '; '; if(day) str += 'expires=' + new Date(Date....原创 2019-11-12 15:53:22 · 3036 阅读 · 0 评论 -
跨站点请求伪造(CSRF)总结和防御
什么是CRSF构建一个地址,比如说是删除某个博客网站博客的链接,然后诱使已经登录过该网站的用户点击恶意链接,可能会导致用户通过自己的手将曾经发布在该网站的博客在不知情的情况下删除了。这种构建恶意链接,假借受害者的手造成损失的攻击方式就叫CSRF-跨站点请求伪造。浏览器Cookie策略cookie分类cookie根据有无设置过期时间分为两种,没有设置过期时间的为Session Cookie(...原创 2019-05-26 16:52:55 · 590 阅读 · 0 评论 -
webpack4下import()模块按需加载,打包按需切割模块,减少包体积,加快首页请求速度
一:背景因为项目功能越加越多,打包后的体积越来越大,导致首页展示的时候速度比较慢,因为要等压缩的js的包加载完毕。首页展示的时候只需要对应的js,并不需要全部的js模块,所以这里就可以用按需加载,这里webpack4官方文档提供了模块按需切割加载,配合es6的按需加载import()方法,可以做到减少首页包体积,加快首页的请求速度,只有其他模块,只有当需要的时候才会加载对应js。这里参考一些...原创 2019-05-16 01:12:49 · 2127 阅读 · 0 评论 -
内网穿透访问Vue项目的时候出现Invalid Host header解决办法
适用场景:在本地的Vue-cli3项目, 需要其他人浏览. 如果没有外网的服务器, 可以把自己的电脑当做服务器. 这时候需要外网的人能访问到自己的电脑.Mac内网穿透工具:natappInvalid Host header当启动了natapp以后, 就这个用natapp提供的域名, 来访问本地的127.0.0.0:8080(端口自己设置), 如果Vue项目启动, 外网就可以通过域名来访问...原创 2019-05-09 12:07:38 · 4383 阅读 · 0 评论 -
JS的数据类型判断函数、数组对象结构处理、日期转换函数,浏览器类型判断函数合集
工具地址:https://github.com/BothEyes1993/bes-jstoolsbes-jstools100多个基础常用JS函数和各种数据转换处理集合大全,此工具包是在 outils 的基础上,加上个人平时收集的代码片段进行的二次整合Browser Support7+ ✔Latest ✔Latest ✔Latest ✔Latest ✔6...转载 2019-05-01 13:04:31 · 453 阅读 · 0 评论 -
js转typescript,npm切换镜像
js转typescriptnpm i dtsmake -gnpm i tern --save-devdtsmake -s fileame.jsnpm切换镜像切换为官网:npm config set registry https://registry.npmjs.org切换为淘宝镜像npm config set registry https://registry.npm.taobao...原创 2019-04-30 14:35:07 · 657 阅读 · 0 评论 -
使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结
打包JS库demo项目地址:https://github.com/BothEyes1993/bes-jstools背景最近有个需求,需要为小程序写一个SDK,监控小程序的后台接口调用和页面报错(类似fundebug)听起来高大上的SDK,其实就是一个JS文件,类似平时开发中我们引入的第三方库:const moment = require('moment');moment().format...原创 2019-04-30 14:04:43 · 930 阅读 · 0 评论 -
CSS单行、多行文本溢出显示省略号(……)解决方案
单行文本溢出显示省略号(…)text-overflow:ellipsis-----部分浏览器还需要加宽度width属性.ellipsis{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; display: inline-block;}多行文本溢出显示省略号● WebKit浏览器...原创 2018-12-07 13:26:23 · 345 阅读 · 0 评论 -
AMD 规范与CMD 规范概要
命名冲突和文件依赖,是前端开发过程中的两个经典问题。通过模块化开发来解决。AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMDCMD 规范在这里:https://github.com/seajs/seajs/issues/242AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 SeaJS 在推广过程中对模块...原创 2018-12-14 23:18:14 · 129 阅读 · 0 评论 -
如何在vscode里面调试js和node.js
一般大家调试都是在浏览器端调试js的,不过有些时候也想和后台一样在代码工具里面调试js或者node.js,下面介绍下怎样在vscode里面走断点。1,用来调试js一:在左侧扩展中搜索Debugger for Chrome并点击安装: 二:在自己的html工程目录下面点击f5,或者在左侧选择调试按钮,在上方,选择下拉按钮,会有一个添加,选择chrome 3:之后会出现laun...原创 2018-12-20 20:34:25 · 322 阅读 · 0 评论 -
JS正则表达式总结
第一部分 基础知识一、正则申明方式1、构造函数方式var reg = new RegExp('\d', 'gi');● 通过 new 构造一个正则表达式对象,其中第一个参数 ‘\d’ 是正则内容,第二个参数 ‘gi’ 是修饰符。两个参数皆为字符串类型● 修饰符的作用是对匹配过程进行限定● 修饰符有三种:i, g, m,可以同时出现,没有顺序(即 gi 与 ig 一样),请参考下方说明...原创 2018-12-20 23:53:42 · 696 阅读 · 0 评论 -
说说JSON和JSONP区别
前言由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSoc...原创 2018-12-21 00:11:25 · 286 阅读 · 0 评论 -
关于iFrame特性总计和iFrame跨域解决办法
1、iframe 定义和用法iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。HTML 与 XHTML 之间的差异在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。提示和注释:提示:您可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对无法理解...原创 2018-12-21 00:41:14 · 455 阅读 · 0 评论 -
slider轮播插件的多种写法
slider轮播插件相信大家经常会用到,写法也是各种各样,大部分都是用的第三方提供的组件使用,如果想基于自己的业务特点封装个组件供自己使用的话就要自己封装组件了,网上看了大部分写法都是通过js控制dom节点位移的方法,这里就不多做介绍了,还有一些用纯css就能完成的写法也提供出来仅供。1,jquery-slider2,css-slider源码地址:https://github.com/...原创 2019-01-17 16:44:52 · 987 阅读 · 0 评论 -
Mac(OS X)中Git安装与GitHub基本使用
GitHub是一个面向开源及私有软件项目的托管平台、开源代码库以及版本控制系统,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub。通常在Windows下使用GitHub的教程是非常多的,因此也无需在此多费唇舌。本文主要讨论在Mac OS X系统上使用GitHub的方法。一、安装Git在很多教程里,你会发现很多开发人员是通过命令行界面来操作和使用GitHub的。从专业人士角度...原创 2019-01-09 18:56:55 · 783 阅读 · 0 评论 -
探讨ES6的import export default 和CommonJS的require module.exports
今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得。在ES6之前模块的概念是在ES6发布之前就出现的,我感觉主要是为了适应大型应用开发的需要而引入了JavaScript世界。模块化编程已经从噱头上升为必备,所以ES6也顺应时代,把这个写进了标准。CommonJS和AMD都是JavaScript...原创 2019-02-02 15:22:33 · 343 阅读 · 0 评论 -
谷歌浏览器network请求时间(stalled,DNS Lookup,Waiting)分析以及解决方案
network工具功能强大,能够让我看到网页加载的信息,比如加载时间,和先后顺序,是否是并行加载,还是堵塞加载。默认情况下有八列: (1).Name:表示加载的文件名。 (2).Method:表示请求的方式。 (3).Status:表示状态码(200为请求成功,304表示从缓存读取)。 (4).Type:表示文件的MIME Type的类型。 (5).Initiator:表示...原创 2019-03-21 18:56:53 · 15566 阅读 · 1 评论 -
vue-quill-editor 富文本集成quill-image-extend-module插件实例,以及UglifyJsPlugin打包抱错问题处理
官网vue-quill-editorToolbar Module - Quillvue-quill-image-upload图片支持上传服务器并调整大小1.在 package.json 中加入 “quill-image-extend-module”: “^1.1.2” 依赖2.在编辑器组件中引入以下代码<template> <div class="in-edit...原创 2019-03-29 18:48:49 · 1285 阅读 · 0 评论 -
总结oninput、onchange与onpropertychange事件的使用方法和差别
onchange事件仅仅在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效;而onkeydown/onkeypress/onkeyup在处理复制、粘贴、拖拽、长按键(按住键盘不放)等细节上并不完好。onpropertychange属性可在某些情况下解决上面存在的问题,不用考虑是否失去焦点。无论js操作还是键盘鼠标手动操作,仅仅要HTML元素属性发生改变就可以马上捕获到。遗憾的是。on...原创 2019-04-11 10:33:04 · 236 阅读 · 0 评论 -
浅谈持续集成的理解以及实现持续集成,需要做什么?
一、持续集成是什么?持续集成是一种软件开发的实践,即团队开发成员经常集成他们的工作,通常每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽快地发现集成错误。许多团队发现这个过程可以大大减少集成的问题,让团队能够更快的开发内聚的软件。持续集成指的是,频繁地(一天多次)将代码集成到主干,通过持续集成流程的进行自动化方式...转载 2019-04-12 12:20:46 · 5565 阅读 · 2 评论 -
git常用命令和场景
总结:git init //初始化本地git环境git clone XXX//克隆一份代码到本地仓库git pull //把远程库的代码更新到工作台git pull --rebase origin master //强制把远程库的代码跟新到当前分支上面git fetch //把远程库的代码更新到本地库git add . //把本地的修改加到stage中git commit -m ‘...原创 2019-04-12 12:59:34 · 96 阅读 · 0 评论 -
基于AlipayJSBridge封装的H5网页支付宝打赏、网站打赏、个人免签支付,支付宝转账打赏支付组件
之前公司要做个打赏用户的功能,网站查询一些资料之后把一些api封装之后提供了一个demo组件供大家下载:扫描下图二维码功能:支付宝H5 Js方案,调起应用内页面,自动设定转账金额和收款理由,用户付款时可继续追加备注信息;自定义打赏视窗,并支持传入金额、备注,允许用户【追加】转账备注信息,可以用于做支付宝个人免签支付的支付部分,处理需要特定回调信息的订单业务。注意:该打赏组件本身不具...原创 2019-04-25 21:18:39 · 6000 阅读 · 1 评论 -
仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题
最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来做下按需加载。首先用Vue CLI 3.0新建一个项目vue create bes-ui注意的是cli3的脚手架用的Babel7的配置,只有babel.config.js文件,所以要自己添加...原创 2019-04-22 12:41:50 · 2657 阅读 · 0 评论 -
whistle替代Fiddler调试远程服务器代码使用教程
前沿之前在window下开发的同学大部分都是使用Fiddler代理工具做远程调试,自从换了Mac后也想找个代替工具调试,查询了下大概都比较推荐两款:Charles 和 Whistle 。不过Charles看起来是要收费的,那小伙伴们果断开始尝试用Whistle替代。大概介绍下Whistlehttps://github.com/avwo/whistlewhistle是用Node实现的类似Fi...原创 2019-04-25 16:11:19 · 983 阅读 · 0 评论 -
Chrome 声音自动播放抱错问题【play() failed】
Chrome下调用play后抱错:DOMException: play() failed because the user didn’t interact with the document first.声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年4月份发布的Chrome 66也...原创 2018-12-06 18:30:09 · 8750 阅读 · 0 评论