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();

阅读全文

git命令有这一篇就差不多了

哈哈,有点标题党,人还是要谦虚一点。这里为了方便查字典,整理了常用的git操作,正常开发工作情况下应该很全了,如果随后遇到新的奇淫操作会不断更新的~

生成ssh key
1
2
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
ssh-keygen -t rsa -C "joacycode@163.com
用户名、邮箱配置
1
2
git config user.name yourname --local
git config user.email yourname@emmail.com --local

阅读全文

H5项目常见问题及注意事项

Meta基础知识:

H5页面窗口自动调整到设备宽度,并禁止用户缩放页面

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
//一、HTML页面结构
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 设置viewport宽度,为一个正整数,或字符串‘device-width’
// height 设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置
// initial-scale 默认缩放比例,为一个数字,可以带小数
// minimum-scale 允许用户最小缩放比例,为一个数字,可以带小数
// maximum-scale 允许用户最大缩放比例,为一个数字,可以带小数
// user-scalable 是否允许手动缩放

//二、JS动态判断
<script>
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
</script>

阅读全文