- 博客(85)
- 收藏
- 关注
RSS订阅原创 区块链技术概览
这是一次小组内技术分享的ppt，分享于2020.10.27日，记录于此注：还是一种通货紧缩型货币，总共2100万枚，没4年奖励减半，分别是12年、16年、20年，此时大概每10分钟6枚左右注：比特币的构想源自于一群无政府主义，被称为“赛博朋克”的人，由于现实是无政府世界是无法实现的，所以这其中有一部分互联网技术朋克开始转战到互联网世界，想要在虚拟的互联网世界构建一个无政府的世界。去中心化的支付系统就在这样的背景下诞生了。注：比特币区块链是一种追踪比特币单位状态和所..
2020-12-29 11:30:42
400
1
原创 谷歌V8引擎运行机制概览
最近学习了极客时间上李兵大佬的谷歌V8引擎课程，总结了一下，在公司内部小组分享了一波，在此也分享一下，原理图直接用的专栏的图，由于时间有限，总结略显粗糙注：解释执行、编译执行各有优缺点：解释执行，不需要做过多的编译，所以启动快，执行时不时直接运行机器码，顾运行慢；编译执行，因为编译成机器语言或者更接近于机器语言，耗时更长，顾启动慢，但是喂给cpu的是机器码，所以执行快注：核心在于监控热点代码，发现多次调用的函数或变量，直接编译成机器码，放在内存中，供下次调用，提...
2020-12-24 11:24:17
1141
原创 chrome浏览器原理概览分享稿
最近部门开始完善分享机制了，每周不定时分享一些知识，不限于前端方面。下面是我这周的知识分享，既是一个总结，也是一个很好的内化过程，只当抛砖引玉了。...
2020-09-01 11:01:20
512
原创 精确实现popover效果：内容超出容器则tooltips+popover展示，反之无效果
前端中对于：文字超出tooltip展示，鼠标滑过气泡展示所有内容，这样的需求是很常见的，element-ui也有专门的组件el-popover要实现这样的效果，使用el-popover组件即可。<el-table-column prop="date" label="原始popover" width="180"> <template slot-scope="{row}"> <el-popover placement="top" trigger=
2020-07-21 16:30:52
4392
原创 浏览器原理学习--如何保证页面文件能被完整地送达浏览器
在前后端交互过程中，前端页面所需要的一些页面信息是通过浏览器和后台服务器之间建立的TCP连接传输的。TCP连接就好比实实在在的运输通道，好比基础的交通设施，好比道路和桥梁，网络数据就在这些道路上运输，到达指定的目的地。数据的运输之前，双方必须达成协议，就好比买卖双方必须提前沟通好信息：价格是多少，要几斤几两，要哪种成色的货物等。双方都达成共识了之后，交流才会是无障碍的。如果传输数据太大，数据会被拆成一个个小的数据包分别发送，每个数据包会被标上描述顺序的标识，等到接收方拿到后，可以按照顺序重新组装成完
2020-06-14 18:02:19
1290
原创 浏览器原理学习--Chrome架构略谈
“js是一门单线程的语言”。这是初级前端都知道的一个最基本的知识点，虽然看起来平淡无奇的一个知识点，但以此为入口就会学到更多的知识点首先解释一下为什么js会被设计成单线程：这主要还是由于js是运行的环境和功能所决定的。js是运行在浏览器环境下，给前端用户提供操作页面元素，也就是DOM的一门语言。如果两段js代码同时运行在两个不同的线程上，对DOM做完全相反的操作，那浏览器就不知道该听谁的了，就会让用户很疑惑。为了避免复杂性，就设计成单线程的了。一个线程可以理解为完成一个逻辑功能的运行实例，把哪一块逻
2020-05-13 20:36:42
1003
原创 vue项目中动态创建模块以满足客户定制化需求的解决方案
前端项目中很多时候会遇到这样的业务需求：所有的客户都有共同的一些业务需求，即基础需求 基础需求需要根据业务发展进行升级 在共同需求的基础上，每个客户又有不同的需求（客制化）如果只是一两个客户还好，在基础版本上分两份前端文件，分别维护。但是客户达到一定数量级后，比如5个、8个甚至更多，这时候这种机械的本办法就费时耗力了，如果再考虑到基础功能的版本升级需求，那这种方法就完全不行了（升级一个基础功能就要分别复制到每个客户的项目中，同步代码）。以上情况就是我司的实际情况，下面介绍一下我司用的方法，不一
2020-05-12 22:13:28
3465
原创 element-ui中select下拉框加载大数据渲染优化
现在的前端项目中对于element-ui的使用几乎已经是一个常规动作了，但是组件库中的ui组件不一定都能满足实际场景的需求，比如今天要讲的select下拉框选择组件。我们公司是做证券行业基础设施的，股票和证券的数量动不动就是上千，当使用select渲染的时候就会很有压力，我司大致3000条数据，全部渲染出来大致需要4s左右，并且多选模式时，选中和反选时会明显感觉卡顿，这在体验上是觉得不能接受的...
2020-04-27 20:40:44
7120
1
原创 vue项目中画出优雅的线条（虚线、直线、折线、带箭头、流动效果等）
需求：运行监控图模块，模块之间用虚线或者实线连接，且带有箭头实现方法：1、canvas绘制2、echarts专业的表格软件（画带箭头的虚线有难度）3、svg方法4、leader-line插件5、背景图刚开始项目比较紧急，也没时间研究怎么划线比较好，就用了最笨的方法：背景图。就是让ui出一张背景图，只留下线条和背景色，其它元素的位置通过配置数据来动态渲染 ...
2020-03-18 17:27:17
34144
12
原创 for...in和for...of的区别和使用场景
这还要从一道面试题说起，请问下面两种情况分别打印什么：let arr = [1,2,3,4,5]for(let i in arr) { console.log(i) // 0,1,2,3,4} for(let i of arr) { console.log(i) // 1,2,3,4,5}可以看到，for in遍历的是数组索引，也是数组的键，for of遍历的...
2019-12-22 11:12:20
1711
1
原创 js线程和事件循环原理
先看一个案例：console.log(1)setTimeout(() => { console.log(2) new Promise((resolve) => { console.log(3) resolve(4) }).then(res => { console.log(res) })},...
2019-12-15 20:36:11
895
原创 vue中二次封装axios请求，支持url参数拼接、blob数据流和formdata上传等
现在vue项目基本上都是使用axios进行请求操作，但是axios有时候并不能完全满足业务的需求，因为官方axios只支持一些比较规则的请求参数和方式，比如body类型的post，params类型的get。而实际业务中后台给的接口可不会那么如你所愿的规范，当后台同事肆意挥洒，尽情装逼，完全是即兴发挥，不考虑前端感受的时候，往往给出来的api接口是很变态的：get方法的url后面拼接参数...
2019-11-24 16:47:24
8948
3
原创 几个javascript代码相关的简洁优化方法
1、条件判断Array.includes()这是业务中最常见的情景之一看代码：function isOk(color) { if(color=== 'red' || color === 'yellow') { return true; }else { return false; }}一个简单的条件判断，如果判断条件较少时，...
2019-11-12 18:30:25
729
原创 移动端H5下载文件
前段时间遇到一个需求，需要在H5页面中增加下载文件按钮，下载一个压缩文件，第一个想到的当然是最普遍和常用的方法：动态生成a标签，把链接地址给到href属性，触发一个click事件，完美下载。于是撸起袖子就开干。由于文件数据是通过接口请求回来的数据流,application/octet-stream类型，需要转换一下来使用： download() { ...
2019-11-12 15:11:48
25771
8
原创 vue-draggable-resizable定制化可拖动控件
最近遇到一个需求：前端定制化生成合同模板，生成时可以在指定位置拖放指定的控件，可动态编辑指定控件的属性和位置，最后将控件的位置等属性传给后台，后续使用模板签署合同时，乙方可在模板上指定位置签署。点击左边控件列表=》添加控件到文件上=》点击文件上的控件激活该控件=》编辑该控件的相关字段=》提交数据控件类型有多种，支持多个控件同时添加，文本类型支持长宽拉伸设置刚好有一个很好用的v...
2019-10-15 22:41:24
23732
10
原创 vue根据权限动态渲染按钮、组件等的函数式组件实现方式
前端工作中对于权限的需求是难免的，最近项目中就有这样的需求了。后台管理员可以新增前台成员，不通的成员具有不同的权限，有权限的人员可以看到一些操作按钮或者数据列表，反之则看不到。那么也就是说，前端需要根据登录用户的权限来渲染指定的dom。1、components文件下新建authorized文件夹，文件夹下新建auth.js校验权限const checkAuth = (authNa...
2019-10-03 16:15:27
2940
原创 vue-extend和vue-component注册一个全局组件
extend()是一个全局构造器，生成的是一个还没挂载到页面元素上的组件实例。在全局挂载插件的形式全局注册，就需要用到vue.use（）方法，官方文档：所以插件必须是一个对象，并且提供install方法，注册的时候自动调用该方法。所以组件的写作步骤就清晰了一些了，实践出真知，现在就来练习一下写一个简约版的全局alert弹框1、在components文件夹下新建alert文件夹，...
2019-10-03 14:11:46
1542
原创 vue中使用element-ui，重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法
项目中使用element-ui时，message弹框功能是必须使用的，有时会在点击按钮时提示无权限，或者请求报错时给出适当提示：但是重复点击按钮或者同一个页面多个请求同时报错时，就不美观了可以看到，element-ui是动态往页面根节点插入message元素来实现弹框效果的，都拥有el-message属性那么我们就可以通过判断页面中message的个数来决定要不要弹出第...
2019-09-24 16:18:32
42396
31
原创 css实现文字自定义下划线
1、文字下划线的实现可以使用原生api：text-decoration:underline.words{ font-size: 22px; text-decoration: underline;}但是没法调整下划线和文字的间距，太贴文字了也不好看2、于是就有了第二种方法：边框法，就是利用元素的下边框实现下划线的效果，还可以通过line-height调节距离...
2019-09-20 16:22:35
27809
原创 前端js下载文件压缩包
工作当中时常会遇到对文件的一些处理，比如下载表格、下载图片、下载文件等，这里说一种下载压缩包的方法。其实也很简单，需要用到一款插件jszip，官方用法都是有的：https://www.npmjs.com/package/jszip可以直接引入脚本：<script src='./jszip.js'></script>也可以在vue项目中直接安装，运行：...
2019-09-20 10:23:32
14460
6
原创 文件预览或下载中，axios设置responseType:blob时对于后台报错信息的捕获兼容
项目中难免会遇到预览文件或者下载文件的场景，如果后台返回的是base64或者图片格式还好说，文件信息直接放在返回body里，作为对象属性给到前端，很直观，也方便取用。但后台给到的是文件流就要麻烦一些了，一般来说文件流会直接凡在res.data里处理这种特殊返回值时需要设置axios的responseType为blob，防止axios内部默认处理返回值，导致无法解析：axios.g...
2019-09-01 16:58:06
24513
5
原创 vue不用window的方式刷新当前页面
vue项目中我们很多时候需要刷新页面，比如本地用户信息更新后，或者需要重新加载当前页面的数据时，使用window.location.reload()或者window.history.go(0)方法都是整个窗口的刷新，和h5快捷键一样，会有短暂空白出现，体验很不好，这里说两种在vue项目里使用的无感知刷新页面方法：一、provide/inject方法父组件中provide提供的属性可以在任何...
2019-05-20 21:38:50
2473
原创 H5项目中有滚动元素，ios系统拖动默认行为和滚动事件冲突解决
问题：h5页面，在ios系统中，拖动顶部固定元素（红色区域）时，会默认拖动整个浏览器，导致出现白色背景，影响到自定义的滚动事件（橙色区域），因为自定义滚动是用了ui框架的，会导致其短暂的无法滚动，必须要等整个页面停稳了才能滚动橙色区域，影响到体验。这应该是ios系统自带的缓动效果，当用户拖动页面元素时给了一个回弹吸顶的效果，显得更加柔和，但有时候我们是不需要的。想要的效果：到顶后继续向下滑...
2019-05-04 18:07:15
5896
1
原创 作用域和闭包
一说到javascript里的闭包，大部分人都好像有所耳闻，但又说不太清楚到底是个什么东西。那么闭包到底是何方神圣呢？闭包是javascript中非常常见，但是又非常神秘的一个概念，有多少人像我一样，看了好多关于闭包的技术文章，却始终没能彻底搞懂闭包的深层次原理，经常是面试前突击一下闭包相关的文章，似懂非懂，过段时间后又几乎全忘了，只留下些残破的似是而非的记忆。今天我尝试着来总结一下我自己...
2019-04-11 21:10:06
783
原创 vue组件通信方式小结
vue项目中，组件间的通信是最常用到的，也是面试必问的问题之一。组件通信可以分为几种类型：1、父子通信 1.1 父传子 1.2 子传父2、跨级传递 2.1祖父传孙 3.1孙传祖父3、同级组件间通信首先说一下通用的方式，即不管哪种场景都在功能上可以实现，撇开具体场景的适合程度，其实也就是全局的通信方式。一、vue bus 以vue实例为总线，...
2019-04-01 22:34:00
880
原创 自定义v-model用法
在vue中，v-model是用来进行数据双向绑定的一个语法糖，比如说用在input上，输入框数据变化，v-model绑定的对应的值也会跟着变化，无需单独获取。其实v-model还可以在自定义组件中使用，可以被拆解为props:value和event：input，也就是说组件必须接收一个value值以及名为input的自定义事件，就可以在自定义组件上使用v-model了。新建一个组件Inpu...
2019-03-31 20:39:01
5997
原创 pc端多页面公用回到顶部功能
在pc端，页面超过可视区高度后便会有滚动条，那么回到顶部的功能就必不可少了。现在我面临的情况：1、点击回到顶部，默认隐藏，滚动超过一定距离才显示回到顶部icon2、部分页面不需要回到顶部功能，比如登录、修改密码等模块；3、滚动效果的实现使用的是element-ui的scrollbar组件，看了下源码，并没有向外派发任何事件，仅仅实现了滚动效果，不提供诸如下拉刷新、回到顶部、返回滚动...
2019-02-27 20:12:29
1327
原创 当better-scroll 遇上element-ui时，dialog的层级问题处理
现在越来越多的开源工具使得开发效率大大提高，让开发者从繁琐的样式编写等工作中抽离出来，专注于前端逻辑的编写，很多时候只需要找到不同的工具、零件，按照自己的业务需求拼装在一起就是一辆很棒的车。只是不同的工具，组件也好、插件也好，都是由不同的人员开发维护的，属于独立的项目，但当我们要造车的时候，拿过来的零配件可能就有些地方无法相互兼容，比如多了个凹槽，导致两个零件无法很好的组装，这就需要手动去抹平这些...
2019-02-02 11:34:27
4633
原创 javascript中的this的四种绑定方式
在面向对象的编程中，最常用到的就是this关键词。this是在执行函数时绑定的，而不是在声明的时候绑定的，他的上下文取决于函数调用时的各种条件，和声明的位置没有关系，只和调用的位置有关。this有四种绑定方式：第一种：默认绑定var a = 9;function abc() { console.log(this.a)}abc() // 9在这段代码中，this....
2018-12-20 21:09:34
1056
原创 小程序购物车功能（支持手动输入数量）以及侧边栏和列表栏联动的实现
小组刚完成一个小程序项目，第一版正式发布了，过程中也遇到了很多问题，这里记录一下我负责的模块中的购物车功能的实现过程。后期再把其他小伙伴的模块也一并贴上来分析一下，自己也学习一下他们的独门技能！效果图如下：在这里，计数器、购物篮做成组件用于复用，由于左右联动的功能在另一个模块也有用到，所以就把这个功能也做成了一个组件，传入不通的数据即可，左右联动的实现方法在之前一片博客有写到htt...
2018-09-17 11:08:24
4569
1
原创 flex布局换行后均匀分布
今天做一个需求的时候发现一个问题，原型需要做出这样的布局效果首先想到的肯定是flex布局display: flex;justify-content: space-between;flex-wrap: wrap;嗯，确实达到了效果，完美！！但是当数据不是4的倍数的时候，就出现问题了可以看到最后一排依然遵循均匀铺开在父级宽度里面，但这显然不是我们想要的效果如果...
2018-09-12 16:02:24
42100
3
原创 vue在新窗口打开页面的方法
有时候后我们会需要在一个新窗口打开页面，而我们都知道，vue是单页面的应用，通过router在内部跳转的。但是依然有办法实现这个需求。刚开始在网上找了一下，有两种方式，一种是给outer-link标签添加tag=a跳转打开新窗口,亲测有效。<router-link tag="a" target="_blank" :to="{name:'detail',query:{goodsId:'...
2018-08-14 19:14:42
83004
8
原创 axios 请求参数格式与后台不对应导致415错误
用axios请求后台数据的时候，默认的头部配置是Content-Type： application/x-www-form-urlencoded;charset=UTF-8这样的话，data的配置格式和传递的格式就是一样的，都是是json键值对data：{"token":"eff6cd7f98a447daf14441c994913e46","ShopId":"2002094561039...
2018-08-02 10:44:15
6091
原创 weex踩坑日记
1、文字只能放在text里面，包括字体图标<text class="main-icon icon">&#xe7b8;</text>2、cell不支持任何样式，高度随内部子元素样式撑开，margin登也在内部样式设置3、css样式不支持嵌套写法： .icon-big .icon{ font-family: iconfont; ...
2018-07-22 22:09:38
1470
原创 better-scroll和vue-router中scrollBehavior不兼容处理
在做一个实战项目时，首页是一个商品列表页，引入better-scroll实现滚动效果 import BScroll from 'better-scroll';mounted() { this._initScroll(); },methods: { _initScroll() { this.$nextTick(() => { ...
2018-07-04 17:04:02
2073
原创 解决vue中keep-alive缓存问题
vue开发的时候，我们经常会有这样的需求：开发一个详细页面来展示商品的详细信息，根据列表页传入的id进行请求，拿到对应的数据进行渲染。但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id这时候可以使用vue的$destroy()方法这是vue...
2018-07-04 11:57:49
9780
1
原创 小程序滚动组件，左边导航栏与右边内容联动效果实现
最近公司要开发小程序，趁着ui还没出来，先把一些功能实现一下。其中有一个功能，需要左边的导航栏和右边的内容对应联动，其实就想饿了么外卖的选单界面，但是在小程序里实现又有点不同了。最终效果如图（丑是丑了点，关注功能就好）右边内容容器是可以滚动的，可以使用小程序提供的scroll-view组件，要强调的是，必须给节点设置高度滚动的问题好解决，那么联动呢？我们需要的联动必须是左右相互的，即点击导航栏，内...
2018-06-25 13:55:47
33772
22
原创 koa配置后台
新建server文件夹，npm init 初始化文件夹:新建服务器index入口文件，启动服务器，断开3000：npm i mogoose -S,安装mongoose新建database文件夹，存放数据文件新建schema文件夹，存放分类数据文件，在里新建User文件，用于插入用户信息新建init文件，连接数据库的入口：在index文件中开始写入数据：开启mongodb数据库： mongod执行i...
2018-06-23 15:45:32
1546
原创 mpvue本地开发环境搭建
将解压文件中server文件夹复制到项目跟目录，并修改配置项在开发者工具中操作，第一次上传勾选模块上传，之后就勾选智能上传每次修改后需点击上传部署，不方便一般搭建本地开发环境本地安装mysql指南 https://cloud.tencent.com/document/product/619/11442将CONF内的内容复制出来，添加到server下config.js里，并修改其中三项：https:...
2018-05-30 15:18:14
3944
1
原创 vue父组件异步获取数据传给子组件
最近一直在做一个vue移动端商城的实战，期间遇到一个小小的问题，值得一说，可能别人已经遇到过了，只是我第一次遇到而已。首页有个楼层区域，用于展示不同类别的商品，比如：水果，衣服，酒水等，布局都是一样的，所以将单个楼层独立出来成一个组件，只需要给响应的六层传入对应的数据就可以按需渲染了：先在父组件引入，并注册楼层组件 import Floor from '@/components/pages/com...
2018-05-15 09:19:41
33740
9
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人