- 博客(83)
- 收藏
- 关注
RSS订阅
原创 欢迎使用 find-file-cli 插件
find-file-cli 是一种方便查找项目未使用文件，减少项目体积、使用纯js书写的提效插件工具，您可以使用最少的配置来生成极简约的结果；尽管该插件还只是第一版，但它依然可以做到以下功能为您愉快编码助力。
2022-05-31 23:15:20
175
原创 vue异步加载的简单试验
网络上关于vue的优化手段非常多，有些有效有些就一般般了，习惯了ctrl+c/v拿来主义的人来说，直接照搬过项目就好了，然而这些优化手段是不是都用上才会秒开呢？或者说也许我们只要一个就好？因为优化的目的就是为了减少项目体积，增强体验的。下面利用工作之余 我做了些优化手段的简单对比，也让新手们知道怎么去做简单的对比试验来检验自己的优化效果。注明：以下测试都是本地、wifi环境 实际生产环境优化效果会更明显！！路由的异步加载项目代码通过使用webpack提供的import方法可以让对应的.
2021-12-18 13:17:53
868
原创 记一个简单react自定义hooks的迭代历程
好久没有写过博文做分享了，之前觉得能在论坛上发表自己观点的都是大牛级别的才会在上面晒出自己的代码和想法，后来发现其实不然，我觉得论坛上就是汇聚了一群热爱编程热爱生活的同行，偶然发点有趣话题，一起用代码或者算法的角度去玩玩也挺有趣的。不知道大家是如何去带自己的组员，尤其是刚出校门不久的小学弟快乐编码呢？今天就遇见一个很有普适性的事情，值得跟大家分享分享的。事情是这样，产品经理从用户那获得了一个需求，与其说是需求，倒不如说是吐槽。用户说以前的系统长table的表头都是可以固定的，这样我滚
2021-11-24 22:07:18
419
原创 阅读element-radio有感
radio.vue<template><!--label用于控制位置和公共样式的--><labelclass="el-radio":class="[border&&radioSize?'el-radio--'+radioSize:'',{'is-disabled':isDisabled},{'is-focus':focus},...
2021-06-22 20:22:24
138
原创 vuex是怎么工作的
vuex插件是vue全家桶中十分重要的一款插件，它的作用是沟通各个组件通信的桥梁，通过定义state状态，所有组件都可以通过this.$store.getter或者是mapState来获得状态，也可以通过this.$store.commit来改变状态，那么它是如果开始的？又是如何做到所有组件共享状态的？为什么状态变了其他组件也能立即感知并重新渲染？下面就让我们带着问题一步步去揭开这些神秘的面纱吧首先我们看看插件的源码结构然后再看看我们是如何使用它的Vue main.js...
2021-06-22 20:15:17
145
1
原创 vue-diff的鼻祖snabbdom patch函数源码
import{Module}from"./modules/module";import{vnode,VNode}from"./vnode";import*asisfrom"./is";import{htmlDomApi,DOMAPI}from"./htmldomapi";typeNonUndefined<T>=Textendsundefined?never:T;functionisUndef(s:a...
2021-06-06 22:59:30
171
1
原创 欢迎大家npm i echarts-json
##echart-json是什么?##echart-json有哪些功能或特点？*非常方便的在项目中`引入`*npminst...
2021-04-10 23:11:41
238
1
原创 巧妙解决js超大数字相加问题
我们知道在Js中，超过一定位数的数字会以科学计数法的方式呈现，然后这样的话会造成我们无法在进行一些常规的计算和显示，那么我们应该如何处理这种超大数字的运算呢？这里我提供一个加法的思路，非常简单，也非常易懂，废话不多说，直接上代码。//利用补齐法来解决js超大数字之间相加的问题 let a = '123456444565456' let b = '121231456' let c = '000000121231456' ...
2020-11-05 22:27:25
3991
2
原创 react一看就会的简单路由设置
不管是vue还是react 这种单页面的框架一定都少不了路由下面给大家讲讲在实际项目中react的路由设置第一步： 在src目录下新建一个目录route 在该目录下新建一个index.js用于管理路由如:import React ,{ Component } from 'react'import {Switch,Route,Redirect} from 'react-router...
2018-07-01 17:44:03
8793
原创 h5如何添加水印
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #cans{ display: block; margin: 0 au
2018-03-23 00:09:02
3418
1
原创 前端大批量并发请求的处理
/ 如果进队列的速度大于某个任务执行过程 则会限流执行 但会加进任务队列中等待执行 相当于并发执行的数量始终控制在limit内。// 如果任务队列数量小于限制数量且任务队列有任务则 出队一个任务执行。// 每一个任务都有独自的resolve将执行结果吐出去。// 每执行完一个任务 就从队列中再释放一个出来执行。// TODO 这里可以对报错超过3次的异步任务进行剔除。// 判断是否所有异步任务都执行完毕。// 判断是否所有异步任务都执行完毕。// 存储promise异步的任务队列。
2023-09-22 21:04:13
670
原创 前端杂记1
尽管react的fiber借助链表的schedule 和浏览器分片实现了大任务的异步可中断，防止了更高优先级任务被阻塞，但是它毕竟是以应用作为单位进行重构，而vue是借助响应式将重构控制到了具体组件的颗粒度，也就是说它可以很清楚的知道哪个组件发生了变化，从而只重新diff这个组件就可以了，再加上预编译阶段的动静节点标记，使得它在大组件更新上看起来性能更优。4.前端用什么方式进行数据上报，上报什么数据、何时进行上报（项目信息、报错信息、模块信息、功能信息、页面信息、开发人员信息等）、上传频率、百分比。
2023-09-21 20:36:56
229
原创 React useRequest解读
5.借助class类来承载各种属性和方法 并通过state和setState来串联模拟class的响应式。可以看到虽然是一个hooks（具有一定功能且具备状态的单一函数） 但是各种文件功能分得也是很细的，方便抽离和复用。不明确类型的参数都可以用泛型占位定义 泛型可以用在interface/type/class/fn作为参数传入。1.非常清晰的功能划分，比如纯入口文件，很明确的参数配置（useRequest.ts）只有入参和出参。2.各个功能都单独抽离成了Plugin并结合各种钩子函数处理数据和返回数据。
2023-09-21 20:22:46
291
转载 react-fiber以及schduler机制
react fiber reconcile schduler 双缓冲 render commit diff
2023-09-18 19:29:33
89
原创 ElementUI组件系列解读之＜Radio/Group＞
El-radio 源码部分 这几句都是用来为不方便的人士提供的功能，比如屏幕阅读器，role的作用是描述一个非标准的tag的实际作用。比如用div做button....
2022-04-05 22:24:30
2057
原创 ElementUI组件系列解读之＜Button＞
El-button button组件基本就是通过props来控制样式，同时暴露了一个click事件 需要注意的是 它这里使用provide & inject来传递父组件实例 样式
2022-04-05 22:22:45
712
原创 ElementUI组件系列解读之＜Container＞
El-Container (容器)主要是用来控制子组件布局和全局样式，默认为弹性布局中的纵向排版。
2022-04-05 22:20:05
842
原创 ElementUI组件系列解读之＜栅格布局＞
ElementUI组件系列解读之<栅格布局>El-row主要就是通过flex弹性布局来控制样式和子组件排版的
2022-04-05 22:18:45
5808
转载 微信小程序如何优化长列表
index.js 页面constthrottle=(fn,delay)=>{varstartTime=newDate();returnfunction(){varcontext=this;varargs=arguments;varendTime=newDate();varresTime=endTime-startTime;//判断大于等于我们给的时间采...
2021-04-24 11:07:37
774
2
原创 原生实现图片裁剪和导出
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">.big-box{width:500px;height:500px;position:rel...
2020-12-09 21:22:07
350
原创 仿天猫下拉刷新
<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-...
2020-10-14 15:35:55
171
原创 个性化小程序单选按钮开发思路
效果图如下：思路：利用radio有个属性checked 当我们点击选中时该属性变为true 同时让它的透明度变为0，利用css3中属性选择器选中其下一个兄弟节点并设置样式 从而实现个性化的单选 缺陷就是多出一倍的标签<style lang="less" scoped="scoped"> .question-box{ padding: 48rpx 30rpx 18rpx 30rpx; border-radius: 15px; ...
2020-07-20 20:29:07
260
翻译 将真实dom保存到内存中，将内存中的vnode变成真实dom
<div id="demo" class="test"> <p>你好javascript</p> <ul> <li>{{name}}</li> </ul> </div> <script type="text/javascript"> ...
2020-07-18 16:22:37
394
原创 微信小程序电商常用滚动套路
<template> <view style="height: 100vh;background: #C7C7C7;"> <!-- 顶部tab导航部分 1.scroll-into-view="{{showView}}" 这里需要借助这个属性来指定显示tab 2.scroll-left="{{navScrollLeft}}" 借助left来使scroll能让遮盖的tab动画显出 -->...
2020-06-17 21:59:07
286
原创 纯js实现的图片查看组件
HTML部分：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图片组件</title> <link rel="stylesheet" type="text/css" href="index....
2019-12-13 16:14:41
824
原创 IE兼容6，7,8版本盒子阴影写法
<html> <head> <meta charset="UTF-8" /> <style type="text/css"> .wrap { position: relative; }...
2019-11-11 17:21:35
170
原创 给指定的元素添加水印
let watermark = {}/*@desc:给指定的元素添加水印@params { Object }obj@params1 { String } canvasId canvas元素@params2 { String } contentId canvas父容器元素@params3 { String } canW canvas生成图标的宽度@params4 { Str...
2019-07-18 14:37:46
846
原创 vue将table导出成excell
首先安装 file-saver、xlsx依赖包<template> <div class="tb-contaner" style="font-size: 14px;"> <header style="background: white;"> <p class="tb-name"> ...
2019-07-16 10:51:50
536
原创 如何将本地代码上传到github
第一步：安装git第二步：在github上new 一个 仓库 并clone ssh或者是url地址第三步：到本地项目的目录右击 选择 git bash第四步：第五步：设置ssh key 否则无法更新代码...
2019-07-05 09:14:20
138
原创 H5内嵌原生app
其实我们不管是从ios还是安卓都可以看出 原生app能内嵌H5的原因是因为有了webview这个app内嵌浏览器视图，从而使得我们可以开发html然后加载到app中（原理几乎跟pc端请求、加载、渲染是一样的），一般的当我们将h5开发好后就可以有两种方式请求到原生app中，一个是将html代码放到服务器上，一个是放在当前app项目目录中本地请求（一般用于调式）。因此，可以看到内嵌其实并不难，...
2019-05-23 22:21:08
7961
原创 如何写github的README.md
我们在写一个开源项目的时候 往往需要写一下readme来让别人简要的了解一下项目的运行环境、以及采用的思路，那么如何写一个好的readme呢 github有自己的符号来进行标题、正文、分行、代码片段等的实现，以下几个是常用的符号：一、## （注意：#越多字号越小） 这个符号是用来生成加粗标题字体的 同时会生成一条底边线 比如：## 技术栈：二、1.```英文...
2019-05-22 16:48:52
520
原创 开发一个项目前应该要做的那些事
很多前端新手在开发的时候总是显得效率不高，其实很大程度上是准备工作不到位，大部分新手一拿到设计稿就开始上手，等到快完工的时候才发现这没做好那没做好，常常导致返工不断，因此在正式开发敲第一行代码前不妨静下来好好思考下整个项目的逻辑以及项目开发会遇到什么，根据本人开发经验，总结以下开发前要准备的工作，希望能帮助到新手在项目开始前要做的工作：一、统览所有的设计稿，找出共同元素...
2019-05-17 16:24:58
2739
原创 Mysql优化学习-查找慢查询语句
如何添加索引1.在表创建时加create database table1{ id primary key not null, index|keys 索引名 (id)}2.在已经创建好的表中添加create index|keys 索引名 on 表名 (字段名)3.如何使用索引 一般是用添加了索引的字段作为where的条件如：selec...
2019-05-09 09:59:20
158
原创 Mysql优化学习-创建索引
索引分为：普通索引(index)、主键索引(primary key)、全文索引(Fulltext index)、唯一索引(unique index)如何创建主键索引/唯一索引?1.在创建表的时候创建 ：create table stu( id int primary key, name varchar unique (加了unique就默认为...
2019-05-09 09:59:10
139
原创 Mysql优化诀窍-定时维护（定时备份）
1.我们在使用分组的时候 可以把默认排序关闭select * from stu group by name order by null;2. 我们在联表查询的时候 left join on 左连接的效率要比其他连接效率高？ 有疑问3.选择正确的引擎一般的 如果是需要事务能回滚的 要高安全性的 就需要使用innoDB引擎 但是这个引擎的执行效率没有myisam高什...
2019-05-09 09:58:59
257
原创 Mysql优化诀窍-定时维护（定时任务案例 定时发送邮件）
mysql获取当前时间的时间戳函数unix_timestamp()利用定时任务 制作简易的定时发送邮件功能PHP脚本 版本我们利用定时任务 每隔一分钟就调用下面这段脚本 去查找出那些邮件状态为0（未发送）的数据，然后取出它的发送时间与当前时间进行比较，小于或等于当前时间就执行发送逻辑以上是模拟发送成功 并没有发送逻辑 实际开发中我们需要借助第三方邮...
2019-05-09 09:58:44
905
原创 Mysql优化诀窍--分表技术
当一个表的数据达到了上千万或者是上亿条记录时 查询起来就非常费时，那么我们就需要拆分该表 以便增加运行效率那我们如何进行分表呢？分表sql语句：insert into table1 values(字段1，字段2...) from select * from table2 当然可以使用存储过程和方法三 将图片和视频放在图片或视频服务器上最大连接数 可...
2019-05-09 09:58:32
112
翻译 Mysql 集群 pxc
数据库多节点 冗余设计达到集群pxc 有利于防止单节点故障后影响整个项目的运行使用pxc集群方案 的好处是能保证集群中各个数据库节点数据的强一致性 但是也需要消耗很多得性能来达到这个目的，对于金额和交易等高价值数据就必须要保证一致性一般的可以使用haproxy来做数据库负载均衡的中间件一般可以使用阿里开源的数据切分中间件mycat世界500强企业架构：...
2019-05-09 09:57:12
187
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人