- 博客(60)
- 收藏
- 关注
RSS订阅原创 敏捷数据指标三率一值
我们的目标( 个人 / 团队 )：做好产品的同时，需要每个人自我的提升，提升的标准 ----> 三率一值 ( 暂时想到这些 )本迭代新增bug修复率：处理完的迭代bug / 迭代总bug （或根据时长计算率值）历史bug修复率：修复的历史bug / 总的历史bug （或根据时长计算率值）产出值：完成任务总时长 - 遗留bug处理所需总时长。任务完成率：已完成的任务总时长 / 迭代总的任务时长。根据迭代的数据来看， 可以基本订一下基础目标。
2024-07-18 15:34:56
141
原创 React Antd 前端生成cron表达式
不知道你在玩游戏的时候是否发现过以下情况：（1）玩某些游戏的时候，发现他的排行榜并不是时时更新的，而是每半个小时，或者一个小时更新一次。（2）又比如很火的王者荣耀手游，它的日常任务，都是每天5点进行更新。那么，这些时间控制，到底是由谁控制得如此精准呢？原来，这些都是corn表达式的功劳。【1】什么是cron表达式 ？在了解之前，我们先举几个例子，看看corn表达式长什么样子cron="0 */5 *** ?"cron="0 30 8,10,12,14,16* * ?"cr...
2021-11-22 15:20:25
3869
8
转载 Hooks
Hooks是 React v16.8 的新特性，可以在不使用类组件的情况下，使用 state 以及其他的React特性；Hooks是完全可选的，无需重写任何已有代码就可以在一些组件中尝试Hook 于React v16.8发布，100%向后兼容，Hooks不包含任何破坏性改动. React也没有计划移除class类组件，而且Hooks不会影响对React的理解，它为已知的React概念提供了更直接的APIHooks解决的问题1. 函数式组件不能使用state：函数式组件比类组件更简洁好用，而Hoo
2021-11-22 14:37:56
233
原创 sharp node图片处理
市场目前公开可处理图片的有七牛云，阿里云等大厂进行图像处理，应某S3Store 业务需求，自行解决图片处理；这里结合node 的sharp库，很好用npm 地址：sharp - npm教程API地址：sharp - High performance Node.js image processing首先进行图片正则规则匹配for (const rule of rules) { const m = pathname.match(rule.pattern); if (m &...
2021-11-10 16:03:55
932
原创 阿里系 JavaScript 编码规约
1.1 缩进1.1.1【强制】使用 2 个空格缩进。eslint: indent统一使用 2 个空格缩进，不要使用 4 个空格或 tab 缩进：// badfunction foo() {∙∙∙∙let name;}// goodfunction foo() {∙∙let name;}### 1.2 分号1.2.1【强制】使用分号。eslint: semi统一以分号结束语句，可以避免 JS 引擎自动分号插入机制的怪异行为，在语义上也更加明确。自动分号插入机制（即 .
2021-04-13 14:15:58
1714
原创 粒子动效果 particles.js在vue上的运用
粒子动效总觉得很炫酷，搜了一下，发现是用particles.js编写的。这个用得好的话，页面是可以很酷的，譬如我现在写的项目安装particles.jsnpm install --save particles.js配置particles.jstemplate这个就是动态粒子要展示的位置。当你的使用范围比较小时，可以直接在当前vue文件的script中引入，即//vue单文件import particles from ‘particles.js’或者你觉得这样不好管理，一定要放在main
2021-03-30 17:04:57
751
原创 React推动消息 解决长列表方案
react-virtualized使用react-virtualized优化在react生态中, react-virtualized作为长列表优化的存在已久, 社区一直在更新维护, 讨论不断, 同时也意味着这是一个长期存在的棘手问题! ?解决以上问题的核心思想就是: 只加载可见区域的组件react-virtualized将我们的滚动场景区分为了viewport内的局部滚动, 和基于viewport的滚动, 前者相当于在页面中开辟了一个独立的滚动区域，属于内部滚动, 这跟和iscroll的滚动很类
2021-01-15 11:37:55
419
原创 工作中常用的24个ES6 代码片段，看完不亏
基于实际使用场景总结了24个ES6代码片段，可用来解决项目中遇到的一系列问题1、如何隐藏所有指定元素？const hide = (...el) => [...el].forEach(e => (e.style.display = "none"));// Examplehide(document.querySelectorAll("img")); // 隐藏页面上所有<img />元素2、如何确认元素是否具有指定的类？const hasClass = (el, c.
2021-01-15 10:01:16
203
原创 单点登录的三种实现方式
单点登录，基本上是程序员必碰的一个知识点，在这里解释一下单点登录的三种实现方式，方便大家理解！方式一：父域 Cookie方式二：认证中心方式三：LocalStorage 跨域补充知识：域名分级在 B/S 系统中，登录功能通常都是基于 Cookie 来实现的。当用户登录成功后，一般会将登录状态记录到 Session 中，或者是给用户签发一个 Token，无论哪一种方式，都需要在客户端保存一些信息（Session ID 或 Token ），并要求客户端在之后的每次请求中携带它们。在这样的场景下，
2021-01-15 09:46:43
624
原创 antd pro使用iconfont
ant design Pro 项目中官方文档提供给我们定义菜单的icon方式有两种:使用ant design内部的icon使用http url地址但是怎么使用iconFont的icon呢，这里文档里没有说明我查看了下它的源码，了解到它内部是可以使用iconFont的，可以看如下代码// https://github.com/ant-design/ant-design-pro-layout/blob/master/src/SiderMenu/BaseMenu.tsx// scriptUrl: ic
2021-01-07 10:57:38
1585
原创 Echarts 的取消动画效果，animation、layoutAnimation:false,
做公司项目需要实现一个关系图，却发现初始化动画一直无法取消，图示：在echarts 中相关案例中，都有差不多的效果，但在初始化时，都会有一个初始化动画（非Loading动画），可参考实例：https://www.makeapie.com/editor.html?c=x5rYx4aXK在echarts5 的相关实例中尝试 加上 animation:false 属性，即可停止初始化动画，在echarts4中 除关系图外，别的图示加上 animation:false 属性，也可以停止动画， 但关系图却不可
2020-12-14 14:45:46
21774
4
转载 ant-desigh+prolayout布局，修改面包屑的分隔符号，百度搜遍了都找不到办法，csdn解决了
ProComponents前端小伙伴对此是又爱又恨啊，一些属性配置实在隐藏的太深了，搜索引擎翻了个遍，难道全世界只有我想改面包屑的分隔符吗，简直是难为胖虎。@ant-design/pro-layout@ant-design/pro-layout. npm install --save-dev @ant-design/pro-layout这是默认的面包屑样式：/为了修改面包屑样式，需要改进其中的breadcrumbRender，代码如下（这里很重要！！！！！！*****）breadcrum
2020-12-14 14:24:54
3040
2
原创 Vue中Axios封装和API接口管理
我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。安装npm install axios; 引入一般我会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和
2020-10-22 12:20:27
207
原创 某溯源平台：vue生成二维码压缩包下载(二)
项目还需要下载二维码打印，依赖两个包：1.jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，2.工作需要通过 JavaScript 保存文件到本地，我们都知道 JavaScript 基于安全的考虑，是不允许直接操作本地文件的。IE 可以通过 VB 插件的方式进行，而 Chrome 和 firefox 都不支持 JavaScript 向本地写入文件，所以 VB 插件的方式存在兼容性问题。那有没有适合的方法呢？答案是肯定的，我们可以通过 FileSaver.js 这个小插件实现我们的
2020-09-29 16:20:21
181
原创 某溯源平台：vue生成二维码下载
前端做二维码处理，需跳转链接路径（必须），文件名。懒人，引用了vue-qr 很好用，贴部分代码<vue-qr :text="listItem.traceCodeUrl" :margin="0" color-dark="#000" color-light="#fff" :logo-scale="0.3" :si
2020-09-29 11:54:05
302
2
原创 Promise.any()
promise.any() 的类型签名是：Promise.any<T>(promises: Iterable<Promise<T>>): Promise<T>Promise.any() 返回一个 Promise p。它的结果取决于参数 promises（迭代 Promises 的结果引用）:如果有一个 Promise 的状态为成功（fulfilled），p 的状态为成功（resolved）。如果所有的 Promises 都失败，p 的状态将失败（re
2020-08-26 09:44:03
3841
1
原创 JSON.stringify 之 5 大隐秘特性
众所周知，JSON.stringify() 方法可以将一个 Js 对象或值转换成一个 JSON 字符串。
2020-06-04 10:40:39
191
原创 vue中v-model等父子组件通信
前言我们在vue项目中，经常有这样的需求，父组件绑定v-model，子组件输入更改父组件v-model绑定的数值。很多朋友对这种操作不是很清楚，这需要对v-model有比较深入的了解，今天谈谈v-model。vue的双向数据绑定这个问题在很多前端面试中，会提及。面试官问你，vue的双向数据绑定原理是什么？当然，这个也是耳熟能详的问题，百度随便一搜索，到处都能找到答案。一般都会搜索到，是用Object.defineProperty( )，来监听数据get和set，来实现数据劫持的。假如对Object
2020-05-18 09:27:29
3095
原创 css样式的基本规范
CSS 规范语法使用四个空格的缩进，这是保证代码在各种环境下显示一致的唯一方式。使用组合选择器时，保持每个独立的选择器占用一行。为了代码的易读性，在每个声明的左括号前增加一个空格。声明块的右括号应该另起一行。每条声明 : 后应该插入一个空格。每条声明应该只占用一行来保证错误报告更加准确。所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出错。...
2020-04-28 08:43:30
316
原创 京东前端技术选型
一、前端技术选型和框架调研PC端1、兼容性：是否要求兼容IE8，需要调研一下，目前埋点系统子午线有统计用户设备的功能。2、开发模式： 前后端分离，后端需提供restful接口，开发需设置固定端口号允许跨域访问。3、框架选择：vue4、UI组件库：外部：目前流行的两大组件库element-UI、iview，star数很多，有专人一直维护内部：dui http://dui.jd.c...
2020-04-26 10:02:37
2027
原创 vue使用的基本规范
VUE规范基于Vue官方风格指南整理一、强制1. 组件名为多个单词组件名应该始终是多个单词的，根组件 App 除外。正例：export default { name: 'TodoItem', // ...}反例：export default { name: 'Todo', // ...}2. 组件数据组件的 data 必须是一个函数。当在组件中使...
2020-04-22 09:57:35
328
原创 html标签基本规范
HTML 规范语法使用四个空格的缩进，这是保证代码在各种环境下显示一致的唯一方式。嵌套的节点应该缩进（四个空格）。在属性上，使用双引号，不要使用单引号。不要在自动闭合标签结尾处使用斜线 / - HTML5 规范 指出他们是可选的。<img src="images/logo.png" alt="Company">不要忽略可选的关闭标签（例如，</li> 和 &...
2020-04-14 10:49:39
332
原创 设计有关
催生灵感的必备神器 | IDEAS设计工具大放送不会画画看这个 | 矢量插画素材网站3分钟搞定一幅插画海报的秘籍这三个网站中的插画素材，均为免费可商用的，快速制作海报或是搭建网站，都可以从中找到令人满意的优质素材，在画风学习上亦可提供极高的参考价值。01 | stubborn.fun线上的免费插画生成工具，包含25个角色和50种不同的背景，素材下载后可以使用sketch和figma进行...
2020-04-01 08:57:22
147
原创 vscode配置eslint
vscode配置eslint在文件 -> 首选项 -> 设置中 -> 搜索eslint ->在setting.json中覆盖{ "editor.tabSize": 2, "files.associations": { "*.vue": "vue" }, "eslint.autoFixOnSave": true, ...
2020-03-31 14:15:27
195
原创 从ES6到ES10
ES6(ES2015)Let 和 Const在ES6以前，JS只有var一种声明方式，但是在ES6之后，就多了let跟const这两种方式。用var定义的变量没有块级作用域的概念，而let跟const则会有，因为这三个关键字创建是不一样的。区别如下：{ var a = 10 let b = 20 const c = 30}a // 10b // Uncaugh...
2020-02-21 19:07:21
242
原创 JS的节流、防抖与使用场景
概念和例子函数防抖(debounce)在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时eg：//模拟一段ajax请求function ajax(content) { console.log('ajax request ' + content)}let inputa = document.getElementById('unDebounce')inputa...
2020-02-12 07:05:53
112
原创 amazing！CSS 形状
CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。我们还可以使用 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个...
2020-01-06 09:49:50
209
原创 Promise 原理详解
一旦Promise 被 resolve 或 reject，不能再迁移至其他任何状态（即状态 immutable）。基本过程：初始化 Promise 状态（pending）执行 then(…) 注册回调处理数组（then 方法可被同一个 promise调用多次）立即执行 Promise 中传入的 fn 函数，将Promise 内部 resolve、reject 函数作为参数传递给fn ，按...
2019-11-29 08:21:38
891
原创 web 安全问题及解决方法
介绍几种常见的 web 安全问题及解决方法：同源策略XSSCSRFSQL注入点击劫持window.opener 安全问题文件上传漏洞同源策略如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源。同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作。同源策略限制了不同源的站点读取当前站点的Cookie、IndexDB、...
2019-11-28 16:51:30
704
原创 JS中高阶函数方法
map、some、every、filterevery()方法用于检测数组中所有元素是否都符合指定条件，若符合返回true，否则返回false；不会对空数组进行检测，不会改变原来的数组。some()方法用于检测数组中的元素是否有满足指定条件的，若满足返回true，否则返回false；不会对空数组进行检测，不会改变原来的数组。map()方法返回一个新数组，新数组中的每一个元素为原始数组对应每一...
2019-11-13 16:15:41
952
原创 做场景页必备css动画
实现如下的效果：即，一个小球从向右匀速移动 200px，然后移动回来，再移动过去，最后停留在 200px 处。动图效果如下：
2019-11-09 09:54:52
334
原创 解释 HTTPS
引言：密码学是个很难理解的课程。它包含很多的数学证明。但是其中很多复杂性都不需要深入的去理解，除非你要去开发加密系统。鸽子传信你在网上的一切行为活动（比如：阅读这篇文章；在京东买东西；上传朋友圈的照片）都可以归结为：向服务器发送信息或者接收来自服务器的信息。所以我们想象一下：这些信息通过信鸽传送。对比速度，HTTPS 虽然速度快很多，但是它们的工作方式相同的。LiLei , HanMe...
2019-10-23 13:47:00
305
原创 React 重难点总结
各种在线评论都说，React比Vue更难上手。可能难以深入理解JSX，或者难以深入理解ES6的某些功能，然后React变得更难以使用，甚至有些反人类。为什么要引入 React在写 React 的时候，你可能会写类似这样的代码：import React from ‘react’function A() {// …other codereturn 前端桃园}你肯定疑惑过，下面的代码都没...
2019-10-10 09:38:11
3126
2
原创 async await 与promise知识点与逻辑题
求下题运行结果async function async1(){ console.log('async1 start'); await async2(); console. log('async1 end'); } async function async2(){ console.log('async2'); } ...
2019-09-04 11:22:49
197
原创 居中一个元素
一、水平居中1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。.parent{//在父容器设置 text-align:center;}此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为...
2019-08-30 10:52:22
106
原创 Cookie使用对比session
背景在HTTP协议的定义中，采用了一种机制来记录客户端和服务器端交互的信息，这种机制被称为cookie，cookie规范定义了服务器和客户端交互信息的格式、生存期、使用范围、安全性。在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信，所以除了JavaScript以外，服务端的语言(如PHP)也可以存取 c...
2019-08-27 08:25:18
230
原创 分支管理
上面三个可以认为是平行分支,都能运行项目的,master(上线代码),和你没关系,将来项目经理自己同步.test分支是用来测试的分支dev分支是你同事和你都可能提交的分支,写代码的时候,1.新建一个分支(用分支的名字命名)git branch 分支名字2.git checkout 分支名来到这个分支搞开发,3.搞开发完毕想合并到dev上了.git checkout dev来到dev分支,...
2019-08-15 09:53:25
278
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人