限频节流函数debounce&throttle

lodash的function模块里有两个方法,debouncethrottle,可以做节流限频使用,为在某些特定的环境下做必要的优化。
这两个方法了解原理后也可以自己去实现。

场景一 曝光埋点

在一个多屏长度的页面中,A模块的A元素在出现在屏幕可视区域时候(即曝光)触发埋点事件,随即上报相应参数。
思路:A模块A元素距离文档顶部的高度是固定值设为bodyOffsetTop,添加onscroll事件到window上,通过监听滚动事件,不断计算此时被卷入上去的文档高度docScrollTop,假设屏幕可视区域的高度为viewHeight
当以下条件成立的时候,我们就认为该元素是出于可曝光的区域的。

1
bodyOffsetTop <= docScrollTop + viewHeight

阅读全文

vue vuex相关长笔记整理

Npm install

1
2
npm install -S vue
npm install -S vuex

Vuex

root组件处进行store注册注入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Vue.use(Vuex)
const store = new Vuex.Store(storeParams)
const storeParams = {
state:{
point: [55,90,29,66,86,85,99],
count: 0
}
getters:{
pointBoder(state){
const maxPoint = Math.max.apply(null, state.point)
return maxPoint-20 //最高分以下20分被认为是高分的边界
},
highPoints(state, getters){
const pointBorder = getters.pointBoder
return state.filter(item=> item > pointBorder)
}
}
mutations:{
// 'increament'称为事件类型 对应方法称为回调函数
increament(state, { baseNum = 1}){
state.count += payload.baseNum
}
}
actions:{
asyncIncreament({ commit }){
setTimeout(()=>{
commit('increament')
},1000)
}
}
}

阅读全文

webpack搭建react基础项目框架

初始化,生成package.json

1
npm init -y

初始化git

1
git init

阅读全文

hexo搭建自己的博客详细过程

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

阅读全文

Mac利用charles进行本地服务调试

Charles官网
mac上我一般都会用Charles作为抓包和代理映射工具
1.普通抓包很简单,Charles和需要抓包的网络请求设备处于同一网络环境中,工具栏的proxy -> macOS Proxy勾选就可以抓包本机的请求,移动设备或者其他设备抓包请将代理设置成手动,代理地址即为Charles所在设备的网络环境ip,端口一般为8888,设置完成后Charles会有弹框提醒是否允许信任之类的询问,直接选择allow,这样就可以愉快的抓其他设备的请求包来看了,这种抓包不需要安装ssl证书也可以抓https

阅读全文

js的this指向实践问题记录

遇到的this问题的翻车事故

this对于当时刚接触js的人来说幽灵一般的存在,就是老司机也不免有大意翻车的时候,印象中很多前端面试的基础部分考察prototypethis是必不可少的。
前几天改一个bug改出this的问题,大意翻车,虽然很快就解决了,但还是警醒下自己,温习梳理以免再出错。
问题类似下面的代码块,对象外提取公共模块导入,对象内部方法和属性通过对象传参params的方式进入setTime方法执行业务逻辑。

阅读全文

mac转windows入职舒适体验手册

“这辈子不可能windows的,不可能用windows的,体验太差了”,这是我用三年的mac之后感受到的,appple对于软硬件结合使用的用户体验真的是做到了极致,几近完美的retina和字体体验,三年几乎没有关过机的情况下没有任何卡顿。我从A出来之后到了J,这边强制性的配置了台式机windows7系统,当时我是拒绝的,个人电脑也没有很好的办法加到公司的网络,当时真的是硬着头皮从mac转windows的,果然一开机,这个开机速度,渣渣的屏幕和windows的默认字体,没有了习惯的Spotlight,加上J公司相对较差较慢的网络环境,强大到github,各种云,各种音乐视频网站都上不去的网络限制,真是感觉自己会因为一台设备和开发环境离职的感觉。但是,我要说但是,自己不可能这么幼稚的,一个人强大的表现是跳出自己舒适圈,去适应和挑战一些东西。随手查了资料,发现自己可以打造一个相对于舒适的设备环境体验,不用mac又如何?
so…

阅读全文

根据唯一标识进行UI定制化

UI可定制的地方:

  • 字体
  • 图片图标背景
  • 文案
  • 位置
  • 数量
  • 外观(形状背景)
  • 请求地址(通过标识的更改)

阅读全文

各种浏览器咋实现元素的全屏模式

最近自己做H5的播放器,里面的各种按钮都要悉数去做,去调整样式,详细的属性方法事件在我另一篇‘js基础核心梳理之Video’里有堆,可以去全面的做个概览。却没有发现有全屏播放这个方法或者属性,不知道未来会不会封装这个方法进去。比如有个属性叫fullScreen设置为true就可以全屏显示。既然没有那就查查资料自己封装一个全屏方法,原则上市场上存在的产品现象背后都有可实现的方法,你就可以去做。

以下是实现全屏和退出全屏的各种浏览器兼容方法,也可以利用 fullScreenElementfullScreenEnabled去检测某个全屏的元素和全屏状态。

阅读全文

柯里化函数是个什么

最近碰到这个概念,就来做个笔记,啥都不说了上定义。

柯里化通常也称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果。

talk is cheap,show me the code
如果你有js基础,看看下面的代码就知道柯里化是咋回事了。

阅读全文