前端
文章平均质量分 88
w候人兮猗
https://www.ahwgs.cn
展开
-
令人兴奋的三大新JavaScript ES 2021功能
前言本文翻译自:The Top 3 New JavaScript ES 2021 (ES 12) Features I’m Excited About (https://medium.com/better-programming/the-top-3-new-javascript-es-2021-es-12-features-im-excited-about-a3ac129efbb2)主要内容:逻辑赋值运算符Promise.any数字分隔符得益于 Babel,我使用 ECMAScript 20原创 2021-01-30 13:11:42 · 758 阅读 · 1 评论 -
2021年你需要的7个JS Array方法
前言文本翻译至 2021年您将需要的7种JS数组方法JavaScript 为我们提供了大量处理数组的不同方法。我们将在短短几分钟内为您介绍7个基本知识,以提高您的JS开发技能正文1.Array.map()当我们在数组上使用该 .map() 方法时,它都会在原数组基础尚返回一个新的修改版本。该 .map() 方法具有循环遍历您的数组并且修改的功能。.map() 每当您要更新数组中的每一项并且需要返回新数组时,都可以使用该方法假设我们有一个包含汽车品牌的数组:const cars = ["Por原创 2021-01-25 23:27:27 · 350 阅读 · 0 评论 -
什么是Web安全
前言Web安全主要有如下几大分类XSSCSRF(跨站请求伪造)SQL注入命令行注入DDos注入流量劫持XSS非持久型XSS(反射型)漏洞简介攻击者通过给别人发送带有恶意脚本代码参数的URL,当URL地址被打开时,特有的恶意代码参数被HTML解析、执行,从而达到攻击目的(获取用户信息,侵犯隐私)特点注入方式不是来源与URL,通过后端从数据库读取数据。不需要诱骗点击,只要求攻击者在提交表单的地方完成注入即可解决方法Web页面渲染所有内容或渲染的数据必须来源于服务器不要从 U原创 2020-12-18 18:23:45 · 2236 阅读 · 3 评论 -
什么是回流与重绘 (Reflow & Repaint)
写在前面在讨论今天的主角之前,我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例,Firefox 使用Geoko——Mozilla 自主研发的渲染引擎,Safari 和Chrome 都使用 webkit。我们主要以 Webkit的主流程为例浏览器使用流式布局模型 (Flow Based Layout)解析HTML 生成 DOM 树解析CSS 生成CSSOM 规则树将 DOM 树与 CSSOM 规则树合并在一起生成渲染树Render Tree根据渲染树遍历拿到每原创 2020-12-18 18:23:06 · 553 阅读 · 1 评论 -
如何优雅地在JS中使用枚举定义
如何优雅地在JS中使用枚举为什么使用枚举去魔法数字枚举语义化定义一体化:枚举值和枚举描述写在了一起,不分散使用方便:无需额外的过滤器如何解释去魔法数字看如下代码// bad<span v-if="status == 0">审核中</span><span v-else-if="status == 1">审核通过</span><span v-else-if="status == 2">审核不通过</span>原创 2020-09-14 20:41:51 · 6432 阅读 · 0 评论 -
实现create-osdoc-app脚手架
介绍好久没更新了,最近一直忙于业务开发,没有多少时间学习自己的东西,抽着某天晚上的功夫写了一个脚手架,其实就是一个简单的node脚本。我们知道,在小公司很少有时间有精力从0到1基于webpack去封装一个类似于create-react-app、vue-cli、UmiJs之类的脚手架,更多的是我们基于上述的轮子二次封装服务于我们实际业务的应用模板。这样做的话,我们可以依次封装我们的业务模板,比如我自己在公司业务基础上,封装了三个业务模板,分别是:fast_h5_umi 基于 Typescript+R原创 2020-06-23 23:54:41 · 227 阅读 · 0 评论 -
react-native集成微信分享记录
前言最近做了第一个用react-native写的app,记录下相关第三方插件的配置关于微信分享,主要用到了这两个库 react-native-wechat-libreact-native-wechat其中第一个是在第二个基础上优化的。更新相关微信SDK等备注:本文使用rn版本为0.61.5步骤申请微信相关去微信官方网址https://open.weixin.qq.com/,注册...原创 2020-04-02 19:18:36 · 913 阅读 · 2 评论 -
使用plop实现自动新建项目文件
为什么一般项目开发过程中,我们都要编写(CV)一大堆重复性的代码,比如一个views/login/index.vue比如store/modules/app.js这些文件都是重复毫无意义的,找一个自动生成的工具就很有价值了使用在github上找到了这样一个包plop,具体信息可以自行去看官方文档,下面直接给出我在项目中使用的可以看我的这个项目,里面有具体的demofast_h5_vue1....原创 2020-03-14 14:40:45 · 616 阅读 · 0 评论 -
react-native 使用 F2实现折线图
前言最近工作入坑了react-native,有实现折线图的需求,使用了阿里的antv/f2可视化库。方案介绍:react-native-webviewantv/f2大概思路:使用webview加载本地html文件,通过injectJavaScript加载js脚本步骤新建f2chart.html,文件较大,文件地址:f2chart.html在ios中, 将此文件与组件放在同...原创 2020-03-12 18:30:12 · 1545 阅读 · 0 评论 -
从零构建Sentry v10 进行异常上报
简介Sentry 是一个开源的实时错误追踪系统,可以帮助开发者实时监控并修复异常问题。它主要专注于持续集成、提高效率并且提升用户体验。下面是Sentry官网支持的产品使用官网服务作为大多数个人开发者和中小企业,可以直接使用Sentry官网)提供的云服务,你只需要注册一个Sentry账号,就可以快速享受到集中处理异常日志的服务。本地安装Sentry服务官网支持docker与python...原创 2020-02-10 05:06:42 · 1191 阅读 · 0 评论 -
使用useSelector useDispatch 替代connect
前言随着react hooks越来越火,react-redux也紧随其后发布了7.1(https://react-redux.js.org/api/hooks#using-hooks-in-a-react-redux-app)版本首先是几个APIuseSelector()const result : any = useSelector(selector : Function, equa...原创 2019-12-12 19:31:25 · 11729 阅读 · 2 评论 -
自定义mixin.less并全局注入至项目中
前言有的时候写项目,需要一些通用的css样式来实现一些功能,比如居中、渐变、单行溢出省略号、多行溢出省略号等.项目使用的less预处理器,所以整理了一些常见的mixin函数实现新建mixin.less文件,整理了一些笔者常用的几个,其他的可以自行添加具体less如何使用可以看https://www.w3cschool.cn/less/less_installation.html.ell...原创 2019-12-06 00:46:12 · 810 阅读 · 0 评论 -
记一次线上接口404排查过程
前言今天周五美滋滋的划半天水,上个厕所回来客户群里来了一条信息,丢了一张截图,冲上来就问,这个怎么编辑不了了?我特么一脸蒙蔽,我也想知道为什么编辑不了了啊。打开线上系统,找到编辑弹窗,按下F12,调到network,使出浑身力气按下保存按钮,心里想着,xx用户肯定是你操作不当,看我这不是好的吗。network中血红的报错就像被一巴掌打过的脸一样,我太难了。为什么,为什么明明这个功能上线了一个...原创 2019-11-08 17:21:28 · 4577 阅读 · 0 评论 -
实现一个vuex-loading插件
前言在项目中,如何管理loading是一个很头疼的方式,有的是在请求封装里去做了一个全屏loading,有的是在单页面中管理一个loading,比如如下:data(){ return{ loading:false }},methods:{ async change(){ this.loading = true // 执...原创 2019-11-08 14:50:18 · 1190 阅读 · 0 评论 -
实现一个简化版的Vue3数据侦测
前言距离国庆假期尤大发布vue3前瞻版本发布已经有一个月的时间,大家都知道在vue2x版本中的响应式数据更新是用的defineProperty这个API。在vue2中,针对Object和Array两种数据类型采用了两种不同的处理方式。对于Object类型,通过Object.defineProperty通过getter/setter递归侦测所有对象的key,实现深度侦测对于Array类型,通...原创 2019-11-06 17:08:25 · 256 阅读 · 0 评论 -
探究call、bind、apply知识点
call、bind、apply知识点一、食用方式applyfunction.apply(obj, [param1,params2,...])// obj:要绑定的this// 第二个参数:类数组或数组,作为function的参数传入// 立即执行callfunction.call(obj, param1, param2, ...)// obj:要绑定的this// 第...原创 2019-10-23 09:12:54 · 277 阅读 · 0 评论 -
CentOS7 linux下yum安装redis以及使用
前言继之前 window环境下安装Redis及可视化工具Redis Desktop Manager 文章后,这里记录一下Linux系统下的redis的使用安装redis检查是否有redis yum 源yum install redis下载fedora的epel仓库yum install epel-release安装redis数据库yum install redi...原创 2019-07-09 10:43:03 · 367 阅读 · 0 评论 -
uni-app textarea auto-height 文字出现上下滚动
前言帮一个可爱的小姐姐改一个uni-app构建的微信小程序时,在使用textarea组件时遇到的一点小问题。描述问题:在uni-app中,<textarea>的auto-hetght属性会出现高度不够,文字能够上下移动的问题,具体见下图:当输入的文字过多时,textarea内的文字可以上下滚动。 这不属于产品的需求,产品要的是输入框高度随着文字的变化而变化不能出现滚动条,而...原创 2019-08-04 03:53:14 · 9209 阅读 · 1 评论 -
为什么我的样式不起作用?
关于今天被人问了一个关于react中的样式问题,一瞬间脑袋没反应上来好像还回答错了,有点尴尬水一篇文章记录一下。问题描述:在一个react父子组件demo中,实际效果与书写的样式不太一样。问题复现直接上代码描述问题:Parent.jsimport React from 'react';import Child from './Child'import './Parent.l...原创 2019-09-04 00:44:33 · 688 阅读 · 0 评论 -
你不知道的this关键字
一、什么是thisthis的值:当前执行代码的环境对象,this的指向不取决于它在什么位置创建,完全取决于函数在什么地方被调用,this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同。二、this的值在全局环境(任何函数调用的外部)中,this的值都是全局对象(浏览器中是window对象,node中是global对象)在函数内部环境,this的值取决于函数被调用的方式...原创 2019-09-07 16:31:07 · 191 阅读 · 0 评论 -
利用Gulp实现前端打包自动上传服务器
关于由于测试环境没有使用例如:CI/CD,Jenkins等服务。所以在平时开发中,时不时都要打个包然后手动打开ftp工具将包上传到测试服务器上,所以这里想有没有什么脚本可以实现打包完成自动上传资源到测试服务器。使用gulp实现首先安装gulp,gulp-ssh这两个包 npm install gulp gulp-ssh -D在项目根目录下新建gulpfile.js文件删...原创 2019-09-16 16:40:03 · 771 阅读 · 0 评论 -
实现一个自己的日志处理库并发布到npm
前言不折腾的前端不是一个好的前端,最近在搭建公司内部工具以及组件库,使用npm进行管理,所以学习一下如何创建一个属于自己的JavaScript库,并发布成npm模块。步骤创建账号点击进入npm官网 右上角进行注册[外链图片转存失败(img-56gwyZnq-1562634508793)(https://static.ahwgs.cn/blogImage/2019070820015...原创 2019-07-09 09:09:09 · 279 阅读 · 0 评论