Python学习笔记:本地文件处理和抓包

Python 无疑是目前最热的编程语言了,从小学生到老大爷,都乐此不疲。作为程序员如果不跟下时髦,恐怕是不行的。 个人感觉 Python的学习曲线还是比较平和的,比较容易入门。 可以说大数据和人工智能的兴起推动了Python的进一步发展,Python最大的优点就是简单易用。 Python有着直观的语法并且还是个强大的多用途语言。这一点在大阅读全文…

阅读 评论 0 阅读全文

HTML DOM Script 对象对addEventListener支持试验

这是一个很基础的问题,以前没有仔细想过,直到实际工作中才知道。 Script 对象 原则上也属于dom对象,在w3文档中,是这样写的:Script 对象同样支持标准 属性 和 事件。 实际使用中,发现对于事件绑定的支持,是有条件的。 对于普通的dom对象,我们可以使用addEventListener来绑定事件,如下: document.g阅读全文…

阅读 评论 0 阅读全文

浅谈前端随机抽样算法以及验证方法

在项目中要在前端做一个抽样的功能。 前端某个方法执行100次,抽取10次,进行数据上报:比如某个按钮,点击要记录日志,但是犹豫这个按钮触发的可能性比较大,我们希望用户点击100次才上报10次,也就是抽取10分之1进行上报。 其实这种场景下,在前端做抽样是比较难的。我们要考虑到一个问题,如果用户点击不到10次如何处是上报还是不上报? 开始,阅读全文…

阅读 评论 0 阅读全文

从一段代码看缓存对性能的影响

当然,我们这里的缓存是封装在闭包里面的私有变量,外部是没办法访问到的,这里的缓存,生命周期就是程序的生命周期,在实际中,页面unload生命周期之后会被销毁(也就是刷新页面后会清空),当然,也可以自己在代码中设置该缓存的有效时间。

阅读 评论 0 阅读全文

axios跨域请求使用凭证以及默认xsrfCookieName和xsrfHeaderName的坑

对于axios而言,xsrfCookieName 和 xsrfHeaderName 其实是可以不用设置的,在服务端api不需要从header中获取token的情况下我们不需要设置。但是单单只设置 xsrfHeaderName 为空时却也是不行的,根据axios给的官方解释,应该是只要设置axios.defaults.xsrfCookieName = ”,后面xsrfHeaderName的这个设置不设置其实就不重要了。

阅读 评论 0 阅读全文

基于axios集成前端请求重试功能

请求重试的意义 我们在访问网站的时候,在发起http请求或者访问远程数据库,可能会发生一些异常,有些异常或者错误可能是短时间的网络环境不佳造成,若我们重新发请求也可能会成功获取到数据。 实际运用中,前端会使用一些第三方的库来处理请求,本文就是基于目前流行的axios来集成请求重试。 axios以及拦截器介绍 axios(官网:http:/阅读全文…

阅读 评论 0 阅读全文

webpack插件开发之异常日志收集插件

最近要做一个前端异常日志收集的功能,仔细想想,如果只是做一个日志上报的功能,貌似没多大意义。本着服务大众的想法,结合之前图片重试功能的开发,何不开发一个webpack插件来完成收集日志的功能呢。最终目标就是只需要简单配置一些配置项,就可以自动生成一份异常监控的代码,insert到入口文件。 先看看使用效果: 配置以下打包脚本: plugi阅读全文…

阅读 评论 0 阅读全文

ie6常见bug汇总

1. 强制浏览器是用Web标准解析
译文出自:http://www.1x3x.net/blog/web-design/2009/03/10-fixes-for-ie6-problems.html

HTML的写法

1
2
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd“>

或者XHTML的写法

1
2
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

2. Set Position: relative
给元素指定Position: relative能够解决很多奇怪的问题,比如对齐和显示不正确等。对于Position的属性要小心设置,特别是设为absolute。

3. 给Float的元素加上inline属性避免双倍margin
这大概是最著名的一个bug了,IE6下对于浮动元素,会莫名其妙的双倍空白边,解决的方法也很莫名,设上display:inline属性就好了,对于float元素这个属性本身没有任何意义。 (双边距bug)

4. 给特定元素加上hasLayout属性
很多IE6(甚至是IE7)的问题可以通过设置hasLayout这个ie only的内部属性来解决,比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候,你不能显示的为其设定高度,可以使用设置高度为1%,而其父元素如果没有确定的高度时,该设置不会被应用到实际的高度上,但是hasLayout会被激活。

5. Fix字符重复bug
这是IE6上面一个非常奇怪的BUG,他的触发条件也是相当诡异,在浮动元素间如果有
<!– comment –> <!– comment –> <!– comment –>
这样的普通的HTML注释的话,会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中,具体的介绍大家可以看这里 positioniseverything 。

解决的方法也很奇怪
* 将所有的浮动元素设为 display:inline;
* 给最后的浮动元素设置 margin-right:-3px;
* 使用条件注释避免IE6下的问题 <!–[if !IE]>Put your commentary in here…<![endif]–>
* 在最后的容器内放入一个空的div (这种添加这种无语义的workaround并不是最理想的选择)

6. 需要悬浮效果的地方,尽量使用<a>标签
IE6中只能对<a>应用css hover效果,所以尽可能使用<a>标签来获取最大的兼容性。

7. 使用!important或者高级选择器来兼容IE6
使用!important和高级选择器来兼容IE6,可以避免使用那些通不过校验的非常规hack,比如所谓的_width这样的东西。我们来看个简单的例子。

1
2
3
4
5
#element {
min-height: 20em;
height: auto !important; /* understood by all browsers */
height: 20em; /* IE6 incorrectly uses this value /*
}

IE6是不能正确解读!important这个修饰符的,所以他会错误的使用height:20em这个属性来实现最小高度。(IE6下容器会自动扩展)

1
2
3
4
5
6
7
8
9
#element {
min-height: 20em;
height: 20em;
}

/* ignored by IE6 */
#element[id] {
height: auto;
}

或者使用高级选择器,同样也能实现该目的,这样代码既能保持合法性,也能很好的去兼容IE6这个诡异的产品。

8. 避免在IE6下使用百分比尺寸
1
2
3
4
body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}

在IE6下是用百分比的尺寸是件非常让人头疼的事情,尽可能避免这样的使用,而是采用结合!important和精确尺寸来明确元素的大小。

9. 频繁测试,尽早测试
别忘记尽早测试,经常测试, 除非你的程度已经完成。不然,你可能花更多的时间来解决IE6的问题。一般情况下,如果你的网站能在IE6和firefox下良好表现,估计其他浏览器就不会有什么大问题了。

10. 重构你的代码
很多情况下,解决一个问题,可能比重构你的代码要花更多的时间。比如上一次给公司写一个频道页面的,没有一边制作,一边测试IE6的表现,导致最近有很多奇怪的问题,因为布局比较复杂。后来,干脆重构代码。用了2天。我想,如果是想解决方法,或许2天都搞不定

阅读 评论 0 阅读全文

记录工作生活点滴。

返回
顶部