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基础,看看下面的代码就知道柯里化是咋回事了。

阅读全文

来,认识下XMLHttpRequest2

XMLHttpRequest综述

XMLHttpRequest在维基百科的定义”XMLHttpRequest (XHR) is an API in the form of an object whose methods transfer data between a web browser and a web server.” 它是一个在服务端和客户端之间进行传输数据的浏览器接口,说白了就是HTTP(S)的通信,依赖于浏览器的javascript环境。通信的数据格式限于XML,JSON,HTML,plain text。
但是这个接口的最初版本,各个浏览器厂家的实现也不尽相同,没有被标准化。这么下去也不是个事儿,技术总得进步,接口总得统一,不然不仅开发者闹情绪,用户都快不满足了,后来html5出现以后,这个标准化的工作就提上了日程,谁去做?当然W3C那帮老大哥啊,凡是和www有关的草案,正式标准都是得那发话。
所以众望所归,这个XMLHttpRequest的标准草案在2008年落成,因为增加了许多新的技能,所以叫XMLHttpRequest有点赶不上时代潮流了,叫XMLHttpRequest plus?这个名字有点apple,还是叫XMLHttpRequest level2吧。
到底增加了哪些功能了呢?那先研究下XMLHttpRequest level1基础?那还废什么话直接捋袖子干~
在控制台吧XMLHttpRequest打出来会发现他是一个构造函数,是一个可以继承的类,要使用其上的接口方法属性需要实例化这个方法。
新建一个XMLHttpRequest的实例

阅读全文

重新认知下History这家伙

DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退。从HTML5开始,我们可以开始操作这个历史记录堆栈。

1.window属性history的方法

使用back(),forward(),和go()方法可以在用户的历史记录中前进和后退

用户后退行为,这个方法会像用户点击了浏览器工具栏上的返回键一样。

1
window.history.back();

阅读全文