- 博客(31)
- 收藏
- 关注
RSS订阅原创 微任务，宏任务，DOM渲染的执行顺序
event loop过程同步代码，一行一行放在Call Stack执行遇到异步先记录下来，等待时机（定时，网络请求）时机一到立马推入Callback Queue中如Call Stack为空（同步代码执行完毕），Event Loop开始工作轮询查找Callback Quque，有则移动到Call Stack中执行然后继续轮询查找例1console.log(100)setTimeout(() => { console.log(200)}, 5000);console.lo
2021-01-11 11:26:43
5097
9
原创 小程序中hidden不会触发组件的detached
小程序的条件渲染hidden<view hidden="{{ hidden }}"></view>当hidden属性值为false的时候，view元素才会展示。wx:if<view wx:if="{{ show }}"></view>当show为true时，页面会渲染view元素wx:if vs hidden相同点都可以控制小程序元素的展示与隐藏区别wx:if是遇 true 显示，hidden 是遇 false 显示wx:if
2020-07-27 10:54:21
760
原创 解决百度地图内存泄露问题
百度地图内存泄露问题百度地图中，我们会遇到循环创建marker点时内存占用不停上涨导致页面直接崩掉。或者数据量过大页面渲染CPU占用过高导致页面卡死。如图：需求实例：使用百度地图展示车辆的位置，并且30s刷新一次位置信息。面对这样的需要，展示车辆的位置，每一个车辆需要一个Marker点，车辆太对需要考虑聚合，代码实现如下：const clustererInstance = null...
2020-04-22 17:51:46
4454
原创 筱筱日常踩坑笔记
new Date()在IOS中的坑我们平时的在工作中，创建一个指定时间的new Date对象时，通常的做法是new Date('2019-10-19 12:40');然后根据这个对象获取年月日等信息。我们发现这种方式在chrome,firefox,Android中使用都没有问题。但是在IOS中就会出问题，在IOS中使用这种方式创建时间对象，返回的值是valid Date（无效值）。因为...
2019-10-31 18:32:57
233
原创 基于Vue的日程排班表 - common-schedule
common-schedule基于Vue的日程排班表，根据不同的时间显示粒度设置granularity的值，支持年/月/日/小时安装npm install common-schedule实用场景为车辆添加班线计划实现代码设置粒度为day<commonSchedule start="2019-08-01 07:00:00" end="2019-8-31...
2019-08-24 10:28:01
15505
6
翻译 【译】DOM MutationObserver，在不影响浏览器性能的情况下响应DOM更改。
DOM MutationObserver，在不影响浏览器性能的情况下响应DOM更改。Dom Mutation Events 在提出时的确是一个很不错的想法, 随着web页面的动态性不断增强，web开发者非常欢迎这种能够侦听DOM中的更改并对其作出反应的事件，然而在实践中，DOM Mutation Events存在着严重的性能和稳定性问题，所以此方法已被弃用多年。然而，DOM Mutation ...
2019-07-06 17:16:40
1838
转载 浅谈requestAnimationFrame
背景在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout或者setInterval 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。但...
2019-07-01 16:39:06
411
原创 解决Vue多级动态面包屑导航
固定路由的面包屑导航我们在配置router的时候，可以将面包屑数据配置在meta中，例如路由配置：{ path: '/project/process/:id', name: 'process', component: () => import('@/views/project/process/main.vue'), meta: [ { ...
2019-06-10 17:45:03
2799
原创 path.join()和path.resolve()的区别
path.join()path.join():方法使用平台特定的分隔符[Unix系统是/，Windows系统是\ ]把全部给定的 path 片段连接到一起，并规范化生成的路径。若任意一个路径片段类型错误，会报错。例如：__dirname// __dirname返回当前文件所在的绝对路径const path = require('path');const path1 = path.jo...
2019-06-09 13:19:55
9033
原创 vue-cli脚手架打包的静态资源请求出错
vue-cli脚手架打包的静态资源请求出错问题vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题。静态资源打包使用相对路径后css文件引入大图片路径错误问题使用vue-cli2脚手架生成的默认打包配置文件，npm run build打包，部署项目到特定路径下：//ip:port/test/index.html此时访问//ip:port/test/index.html可以...
2019-06-05 18:04:53
379
原创 筱筱笔记：npm发包流程
npm发包流程我们在开发过程中，为了开发便利，可以下载别人已经封装好了的npm包，那么如何创建自己的npm包呢？第一步：创建账号我们想要发布自己的npm包，首先需要在npm网站上去注册一个账号npm网站地址：https://www.npmjs.com/npm网站注册地址：https://www.npmjs.com/signup注册完后，在电脑端登陆，输入注册时填写的用户名和密码，邮箱...
2019-06-03 17:22:46
248
原创 css自定义变量语法--*
为什么想到要写这篇文章呢，今天在掘金上面看到老姚的沸点“使用渐变，一个div实现进度条”，仔细看了一下内容代码才发现在css中存在的自定义变量语法，自己一直没有用过，哈哈哈！使用渐变，一个div实现进度条首先我们亮出老姚的代码，使用渐变，一个div实现进度条div { --c: #0ff; --p: 60%; height: 60px; backgroun...
2019-04-21 21:01:20
143
原创 微信内置浏览器私有接口WeixinJSBridge介绍
微信浏览器私有接口WeiXinJsBridge，大致有以下几个有用的知识点：分享给好友分享到朋友圈分享到微博隐藏下方工具栏隐藏微信右上角分享按钮（三个小圆点）关闭浏览器回到公众号对话窗口WeiXinJsBridge的分享函数WeiXinJsBridge的分享函数分为分享给好友，分享到朋友圈，分享到微博，但是这三种分享都是在下面在个函数内部实现的。function sendMe...
2019-04-16 16:19:17
36258
4
原创 ['1','2','3'].map(parseInt)返回结果是什么？
[‘1’,‘2’,‘3’].map(parseInt)返回结果是什么？你的第一反应结果是不是[1,2,3]，但是真正的结果是[1, NaN, NaN]。为什么呢？首先看一下数组中的map方法。map方法引入MDN的解释，map()方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。var arr = [1, 2, 3];var arr1 = arr.map(x...
2019-04-09 11:19:36
7099
1
原创 基于JS实现简单甘特图
基于JS实现简单甘特图最近同事求助到一个小小的需求，写一个时间甘特图，主要想表现一个车在一天的不同的时间点里，停靠的站点，先来看一下效果吧，这里的需求是从早上的5点为开始时间，到第二天到凌晨5点前期准备其实网上有很多甘特图的实现方式，但是他们都只能具象到天，不能具体到某个时间点，而且每一个具体的时间段中的描述是不能自定义的，所以准备自己写一下了。实现逻辑我们可以先模拟一些demo...
2019-02-28 16:43:19
13881
1
原创 简单解读高阶函数和纯函数
高阶函数定义高阶函数：英文叫Higher-order function，高阶函数是对其他函数进行操作的函数，可以将它们作为参数或返回它们。简单来说，高阶函数是一个函数，它接受函数作为参数或函数作为输出返回。在不同的编程语言中都存在高阶函数，例如Javascript,Python,C#,C等等，JS中一个简单的高阶函数：function add(x, y, f) { return ...
2019-01-29 18:42:32
864
原创 postMessage到底有多好用
postMessage是什么？postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。Html5中的postMessage解决跨域，跨窗口消息传递postMessage的优点两个跨域页面的消息传递多窗口之间的消息传递嵌套iframe的数据传递postMessage()postMessage()方法允许来自不同源的脚本...
2019-01-16 17:48:07
1682
2
原创 简单总结浏览器缓存
浏览器缓存浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行储存，当访问者再次访问同一页面的时候，浏览器可以直接从本地磁盘加载文档。为什么要使用浏览器缓存减少冗余的数据传输减少服务器负担，提升网站性能，加快客户端加载网页的速度提升用户体验浏览器缓存作为Web性能优化的重要方式之一，那么浏览器缓存的过程是怎么样的呢？浏览器缓存过程在浏览器第一次发起请求时，本地无缓存，向...
2019-01-14 19:45:25
134
3
原创 【每日一题】- 运算符优先级
你是否遇到过这样的面试题：var a = {n:1};var b = a;a.x = a = {n:2};console.log(a.x);console.log(b.x);输出的结果：a.x undefined;b.x {n:2}b不是和a一样指向的一个对象吗？为什么赋值以后a.x为undefined;而b.x为{n:2}呢？这里的关键是“.”是优先级最高的运算符；...
2019-01-11 18:48:11
164
原创 Fetch上传文件（不需要设置headers）
Fetch上传文件（不需要设置headers）最近在项目中有一个上传文件的需求，然后我使用了fetch进行文件上传，代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>测试fetch上传文件</title> &
2019-01-08 20:32:30
5962
2
原创 理解ES6中的TDZ（暂时性死区）
什么是TDZTemporal Dead Zone(TDZ)是ES6(ES2015)中对作用域新的专用语义。TDZ名词并没有明确地写在ES6的标准文件中，一开始是出现在ES Discussion讨论区中，是对于某些遇到在区块作用域绑定早于声明语句时的状况时，所使用的专用术语。let/const和var的区别在ES6之前，JS的scope只有两种，全局作用域和函数作用域，但是在ES6种出现了块级...
2019-01-05 20:04:04
579
原创 JS中的IIFE
IIFEIIFE： Immediately Invoked Function Expression，翻译过来就是立即调用的函数表达式。也就是说，在函数声明的同时立即调用这个函数。普通的函数声明和函数调用function bar() { var a = 10; console.log(a);}bar(); // 函数调用IIFE函数声明和调用(function f...
2019-01-04 20:06:26
1010
原创 Echart + 百度地图实现区域聚合（Vue版）
Echart + 百度地图实现区域聚合（Vue版）百度地图的聚合很简单，但是根据区域聚合怎么实现呢？结合Echart的百度地图怎么实现区域聚合呢？单独玩过Echart,也单独用过百度地图，但是两个结合起来使用还整没用过呢，Echart的API中有相应的地图注册方法，那么一般地图都是需要加载底图的，在Echart中加载地图底图的方式有三种。Echart中加载地图底图百度地图使用百度地图时...
2018-12-24 20:40:45
7800
5
原创 解决Echarts中多条markLine的Label重叠问题
解决Echarts中多条markLine的Label重叠问题 Echarts中设置markLine[参考线] const option = { title: { text: 'markLine Test' }, series: { name: '行驶里程（KM）', type: 'bar', ...
2018-12-20 15:53:44
12765
1
原创 React创建组件的三种方式
使用函数式创建import {render} from 'react-dom';function Hello(props){ return (<div>{props.name}</div>)}render(<Hello name='yf' />,document.getElementById('root'))使用React.createC...
2018-12-20 09:48:14
199
原创 【CSS笔记】— 使用calc()计算宽高（vw/vh）
【CSS笔记】— 使用calc()计算宽高（vm/vh）calc()是什么？简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等，calc()语法calc的语法就是简单的四则运算，使用“+”、“-”、“*” 和 “/”四则运算；可以使...
2018-12-18 19:23:56
5741
原创 Vue中使用Keep-Alive实现复杂页面缓存
Keep-alivevue2.0中提供了一个keep-alive的组建来缓存组件，避免多次加载相应的组件，减少性能消耗。keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM，结合vue-router中使用。可以缓存某个view的整个内容。语法：<keep-alive> <component> <...
2018-12-17 19:11:23
708
1
原创 你不知道的简单数组拷贝方法全解
在我们的日常工作中，经常会遇到一些把一个值赋给另一个值，简单数据类型我们可以直接用=的方式进行简单值拷贝，那么遇到数组或者对象这些引用类型的拷贝应该怎么做呢？接下来简单总结了一些数组的浅拷贝和深拷贝的方法浅拷贝【Shallow copy】concat()concat()方法主要用于数组的连接，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。var arr1 = [1,2,3,4...
2018-12-17 16:31:33
193
原创 【译】如何为团队定义CSS标准
如何为团队定义CSS标准How to Define CSS Standards for a Team “我们都经历过重构app,将每个页面分配给团队中的一个人，实现协同开发，但是页面的结构和样式，每个人都会按照自己的方式来实现，这样就很不方便团队的管理，每个人写的都不一样，代码管理困难，您是否有用于创建和实施SASS项目的建议，或者技巧，博客之类的？”我曾经也有过这样的苦...
2018-12-17 16:16:38
104
原创 Node + Elasticsearch入门
为什么要用Elasticsearch？以前一些简单的搜索功能，我们可以使用sql的查询语句实现，但是随着数据的增大，并且需求的增多，简单的sql查询已经不满足需求，Elasticsearch的功能：1，分布式的搜索引擎和数据分析引擎；2，全文检索，结构化检索，数据分析；3，对海量数据进行近实时的处理；Elasticsearch与编程语言交互Elasticsearch 使用的是标准的 ...
2018-12-17 16:12:07
556
原创 微信小程序读取用户openid【前端+后端代码】
微信小程序读取用户openid场景小程序中需要加入一个“收藏”功能。用户可以点击“我的收藏”看到自己收藏的文章。在这个需求中，我们需要得到一个关联用户的唯一标示，那就是openid,在小程序中怎么获取用户的openid呢？登录凭证（code）首先我们调用wx.login(object)接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 ...
2018-12-17 16:02:28
3882
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人