- 博客(62)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 令人兴奋的三大新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
720
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
316
原创 什么是Web安全
前言Web安全主要有如下几大分类XSSCSRF(跨站请求伪造)SQL注入命令行注入DDos注入流量劫持XSS非持久型XSS（反射型）漏洞简介攻击者通过给别人发送带有恶意脚本代码参数的URL，当URL地址被打开时，特有的恶意代码参数被HTML解析、执行，从而达到攻击目的（获取用户信息，侵犯隐私）特点注入方式不是来源与URL，通过后端从数据库读取数据。不需要诱骗点击，只要求攻击者在提交表单的地方完成注入即可解决方法Web页面渲染所有内容或渲染的数据必须来源于服务器不要从 U
2020-12-18 18:23:45
2140
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
522
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
6163
原创 实现create-osdoc-app脚手架
介绍好久没更新了，最近一直忙于业务开发，没有多少时间学习自己的东西，抽着某天晚上的功夫写了一个脚手架，其实就是一个简单的node脚本。我们知道，在小公司很少有时间有精力从0到1基于webpack去封装一个类似于create-react-app、vue-cli、UmiJs之类的脚手架，更多的是我们基于上述的轮子二次封装服务于我们实际业务的应用模板。这样做的话，我们可以依次封装我们的业务模板，比如我自己在公司业务基础上，封装了三个业务模板，分别是：fast_h5_umi 基于 Typescript+R
2020-06-23 23:54:41
199
原创 让你的git message更加规范
前言规范比业务开发搬砖更为重要，没有一个好的编码规范，维护老的代码或者是编写新的代码都非常痛苦Eslint与prettier大大小小也做过了好几个项目，每个项目都要做eslint校验,所以我封装了一个npm包以后直接安装引入即可yarn add osdoc-lint -Dyarn add prettier新建.eslintrc.jsmodule.exports = { extends: [require.resolve('osdoc-lint/dist/eslint')], ru
2020-05-21 18:57:34
396
原创 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
812
2
原创 使用plop实现自动新建项目文件
为什么一般项目开发过程中，我们都要编写(CV)一大堆重复性的代码，比如一个views/login/index.vue比如store/modules/app.js这些文件都是重复毫无意义的，找一个自动生成的工具就很有价值了使用在github上找到了这样一个包plop，具体信息可以自行去看官方文档，下面直接给出我在项目中使用的可以看我的这个项目，里面有具体的demofast_h5_vue1....
2020-03-14 14:40:45
579
原创 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
1501
原创 从零构建Sentry v10 进行异常上报
简介Sentry 是一个开源的实时错误追踪系统，可以帮助开发者实时监控并修复异常问题。它主要专注于持续集成、提高效率并且提升用户体验。下面是Sentry官网支持的产品使用官网服务作为大多数个人开发者和中小企业，可以直接使用Sentry官网)提供的云服务，你只需要注册一个Sentry账号，就可以快速享受到集中处理异常日志的服务。本地安装Sentry服务官网支持docker与python...
2020-02-10 05:06:42
1130
原创 遇到 Loading chunk {n} failed问题不要慌
前言最近在写个vue的demo,调试过程中出现个问题,vconsole中提示[vue-router] Failed to resolve async component default:Error:Loading chunk 10 failed.大致意思就是路由异步加载组件的时候报错了报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。...
2020-02-09 00:14:40
6260
2
原创 使用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
11666
2
原创 自定义mixin.less并全局注入至项目中
前言有的时候写项目，需要一些通用的css样式来实现一些功能，比如居中、渐变、单行溢出省略号、多行溢出省略号等.项目使用的less预处理器，所以整理了一些常见的mixin函数实现新建mixin.less文件,整理了一些笔者常用的几个，其他的可以自行添加具体less如何使用可以看https://www.w3cschool.cn/less/less_installation.html.ell...
2019-12-06 00:46:12
784
原创 记一次线上接口404排查过程
前言今天周五美滋滋的划半天水，上个厕所回来客户群里来了一条信息，丢了一张截图，冲上来就问，这个怎么编辑不了了？我特么一脸蒙蔽，我也想知道为什么编辑不了了啊。打开线上系统，找到编辑弹窗，按下F12，调到network，使出浑身力气按下保存按钮，心里想着，xx用户肯定是你操作不当，看我这不是好的吗。network中血红的报错就像被一巴掌打过的脸一样，我太难了。为什么，为什么明明这个功能上线了一个...
2019-11-08 17:21:28
4492
原创 实现一个vuex-loading插件
前言在项目中，如何管理loading是一个很头疼的方式，有的是在请求封装里去做了一个全屏loading，有的是在单页面中管理一个loading，比如如下：data(){ return{ loading:false }},methods:{ async change(){ this.loading = true // 执...
2019-11-08 14:50:18
1154
原创 实现一个简化版的Vue3数据侦测
前言距离国庆假期尤大发布vue3前瞻版本发布已经有一个月的时间，大家都知道在vue2x版本中的响应式数据更新是用的defineProperty这个API。在vue2中，针对Object和Array两种数据类型采用了两种不同的处理方式。对于Object类型，通过Object.defineProperty通过getter/setter递归侦测所有对象的key，实现深度侦测对于Array类型，通...
2019-11-06 17:08:25
240
原创 探究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
228
原创 利用Gulp实现前端打包自动上传服务器
关于由于测试环境没有使用例如:CI/CD,Jenkins等服务。所以在平时开发中，时不时都要打个包然后手动打开ftp工具将包上传到测试服务器上,所以这里想有没有什么脚本可以实现打包完成自动上传资源到测试服务器。使用gulp实现首先安装gulp,gulp-ssh这两个包 npm install gulp gulp-ssh -D在项目根目录下新建gulpfile.js文件删...
2019-09-16 16:40:03
758
原创 你不知道的this关键字
一、什么是thisthis的值:当前执行代码的环境对象,this的指向不取决于它在什么位置创建，完全取决于函数在什么地方被调用，this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。二、this的值在全局环境(任何函数调用的外部)中，this的值都是全局对象(浏览器中是window对象，node中是global对象)在函数内部环境,this的值取决于函数被调用的方式...
2019-09-07 16:31:07
182
原创 为什么我的样式不起作用？
关于今天被人问了一个关于react中的样式问题，一瞬间脑袋没反应上来好像还回答错了，有点尴尬水一篇文章记录一下。问题描述：在一个react父子组件demo中，实际效果与书写的样式不太一样。问题复现直接上代码描述问题:Parent.jsimport React from 'react';import Child from './Child'import './Parent.l...
2019-09-04 00:44:33
639
原创 uni-app textarea auto-height 文字出现上下滚动
前言帮一个可爱的小姐姐改一个uni-app构建的微信小程序时，在使用textarea组件时遇到的一点小问题。描述问题：在uni-app中,<textarea>的auto-hetght属性会出现高度不够，文字能够上下移动的问题,具体见下图:当输入的文字过多时,textarea内的文字可以上下滚动。 这不属于产品的需求，产品要的是输入框高度随着文字的变化而变化不能出现滚动条，而...
2019-08-04 03:53:14
8838
1
原创 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
338
原创 实现一个自己的日志处理库并发布到npm
前言不折腾的前端不是一个好的前端，最近在搭建公司内部工具以及组件库，使用npm进行管理，所以学习一下如何创建一个属于自己的JavaScript库，并发布成npm模块。步骤创建账号点击进入npm官网 右上角进行注册[外链图片转存失败(img-56gwyZnq-1562634508793)(https://static.ahwgs.cn/blogImage/2019070820015...
2019-07-09 09:09:09
245
转载 JavaScript异步编程
前言从我们一开始学习JavaScript的时候就听到过一段话：JS是单线程的，天生异步，适合IO密集型，不适合CPU密集型。但是，多数JavaScript开发者从来没有认真思考过自己程序中的异步到底是怎么出现的，以及为什么会出现，也没有探索过处理异步的其他方法。到目前为止，还有很多人坚持认为回调函数就完全够用了。但是，随着JavaScript面临的需求越来越多，它可以运行在浏览器、服务器、甚至...
2019-07-02 10:28:35
239
原创 cross-env使用以及根据环境打包
关于之前的项目打包都是靠手动去改环境变量(纯属沙雕行为)，随着项目越来越多，每一个项目打包都要去改这个变量的话真的是太蛋疼了，所以研究了一下webpack打包以及node env主要这样做有什么好处? publicPath: process.env.APP_ENV === 'production' ? 'https://cdn.xxxx.com/brand-mall-chengd...
2019-06-17 17:47:13
2272
原创 使用openssl 生成证书
关于最近在用egg写一个简单的CURD项目，使用的是jwt并打算使用RS256加密方式进行加密，这里记录一下如何生成RS256证书步骤检查是否安装opensslopenssl version -a发现已经安装了openssl,这里我们将版本更新至最新版如果没有安装的话可以直接使用yum安装yum install openssl更新opensslyum upd...
2019-06-16 01:03:29
238
原创 反向代理华为云OBS实现自定义域名访问
前言之前上了一波华为云的车，买了一台小鸡，然后又买了华为云的OBS服务（对象存储），这里主要记录的是如何反向代理配置，对象存储的内容暂不介绍为什么?对象存储建立之后是有一个默认的域名的，但是通过默认的域名会产生流量，一般的云服务厂商都会有同地区的内网访问免流的策略，所以这里我们可以在中间搭建一个桥梁，借助我们的ECS间接访问我们的对象存储服务如何做?首先，打开华为云对象存储控制...
2019-06-12 01:31:42
1566
原创 Failed to minify the bundle Error from Uglifyjs 记一次打包压缩报错
前言今天刚写完一个需求准备打包测试，眼看着进度快跑满了啪的一下给我来了一个错，如下图:简单分析Failed to minify the bundle看了下大概的错讲的应该是压缩代码报错了，而Uglifyjs确实也是webpack打包压缩的插件。看下一行，大概讲的是index.295edf21.js文件的第264048行报的错。找到我们打出的包的文件夹使用nodepad++打...
2019-05-23 18:59:43
5248
原创 移动端H5 input输入完成后页面底部留白问题
说明最近在用vue写几个H5页面在微信上展示，遇到一个在弹窗上input输入完成之后点击键盘的完成，页面底部留出一片空白的问题出现原因分析当键盘抬起时，window.scrollY会从0变到键盘的高度，所以解决办法就是当input失去焦点的时候，将window.scrollY重新设置为0解决给所有的input``textarea组件设置获取焦点和设置焦点事件，失去焦点的时候将...
2019-05-21 16:42:20
2537
1
原创 优秀文章收藏（慢慢消化）持续更新~
better-learning整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhangshoucang.htmlgithub:https://github.com/ahwgs/better-learning规范协作规范中文技术文档协作规范(阮一峰)Javascript编程风格凹凸实验室前端代码规范vuejs风格指...
2019-05-15 11:11:41
557
原创 重头开始学Docker
前言新买了一台服务器（阿里云学生鸡配置低的要命,但胜在便宜,适合折腾）,以前买的服务器都是装可视化面板去管理的,最近工作中接触Docker比较多,所以写下这篇文章去记录。先简单讲一下什么是Docker?Docker 是一个开源的应用容器引擎，基于 Go 语言 并遵从Apache2.0协议开源。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任...
2019-05-07 15:50:48
207
原创 微信小程序版本自动更新
说明1: 当用户点击左上角关闭，或者按了设备Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台，只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。2: 小程序的启动分为"冷启动" 和 “热启动”.热启动是指: 小程序打开后，在一段时间内（目前：5分钟）再次被打开，此时会将后台的小程序切换到前台。冷启动是指:...
2019-05-06 15:04:15
546
原创 微信小程序之自定义倒计时组件
开头最近写小程序写上瘾了,业务上需要实现一个倒计时的功能,考虑到可拓展以及使用方便,便将其封装成组件(写习惯了JSX不得不吐槽小程序自定义组件的繁琐)需求可配置倒计时的时间倒计时结束后执行事件可配置倒计时时间的格式步骤先定义自定义组件的properties,这里有两个父组件传给该倒计时组件的参数target倒计时的时间,format倒计时时间的格式properties:...
2019-04-28 16:48:00
2392
转载 CSS 16种水平居中垂直居中方法
水平居中若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.若是块级元素, 该元素设置 margin:0 auto即可.若子元素包含 float:left属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:.parent{ width: -moz-fit-content; ...
2019-04-28 09:10:18
757
原创 微信小程序 button 组件去除黑边
关于继昨天写的微信小程序左滑删功能之后之后，今天打算分享几个微信小程序编写过程中遇到的样式问题正文button组件，有的时候需要自定义分享按钮这时候需要使用<button open-type="share" >调整些许样式之后发现会有一个黑色边框去不掉.btn{ border:none; //使用border:none 发现并没有任何作用}.btn::aft...
2019-04-28 09:08:42
2647
原创 微信小程序修改checkbox组件默认样式
关于UI设计的多选框的样式十分好看，微信自带的样式丑到爆，这时候就需要我们自定义checkbox的默认样式了。正文checkbox组件，默认的组件样式很丑，有的时候需要根据业务UI实现自己的checkbox。先给<checkbox class="checkbox"/>一个.checkbox类名.checkbox .wx-checkbox-input { border...
2019-04-28 09:08:21
5286
原创 微信小程序之列表左滑删除功能
介绍第一次写小程序，记录一下遇到的需求以及解决方法。可能功能不是很难，主要是做下记录。为以后遇到相同的需求做铺垫。什么是左滑删除用过QQ的人都知道，消息列表内，左滑单个聊天可以删除、置顶的操作。对于移动端窄小的屏幕来说，这种交互可以说是非常的节省地方。故受到了众多产品狗的喜爱。实现原理最外层一个view水平方向排列，里面包含一个内容区view,一个操作区view让你要展示的...
2019-04-26 11:36:09
2223
原创 antd-design Form，Select联合使用 placeholder 不起作用问题
antd-design Form，Select联合使用 placeholder 不起作用问题起因最近在用antd写表单的时候遇到个问题:Form,Select组件一起使用时,设置Select组件的placeholder属性并没有起作用。如下图：发现Select组件的placeholder属性并没有起作用。排查对照官方文档看了一下官方的代码<Form.Item ...
2019-04-26 11:35:38
3711
4
原创 vue-cli3配置骨架屏方案
vue-cli3配置骨架屏方案前言最近在学vue,准备使用vue写一个移动端项目。考虑到首页白屏优化，需要实现骨架屏需求。这里介绍两种方案，当然都是根据现有的轮子搭的步骤安装vue-skeleton-webpack-plugin插件npm install --save-dev vue-skeleton-webpack-pluginvue.config.js配置const p...
2019-04-26 11:35:04
2664
2
Jmeter-5.1.1.zip
2019-09-11
CC2530中文数据手册
2017-03-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人