分类 前端技术 下的文章

关于 js 的取整

今天在写一个倒计时的时候,突然想起一个问题,“对于 js 的小数取整,那种方法效率最高呢?” 然后我就把我能想到的取整的方法做了一下测试,大概是这个样子 Math.floor(-100/3) parseInt(-100/3) ~~(-100/3) (-100/3 >> 0) (-100/3 | 0) ( -100 - (-100%3) ) / 3 然后我把每种方法跑了 10^7 次,取了一下平均值,然后发现: Math.floor 耗时 0.0000197 ms parseInt 耗时 0.0000225 ms ~~(-100/3)、(-100/3 >> 0)、(-100/3 | 0) 三个耗时基本相同,大概都是 0.0000029ms 的样子 ( -100 - (-100%3) ) / 3 耗时 0.0000155ms 基本可以看出,三个位运算的方法耗时最少,而且少很多,那么是不是我们就可以使用这三种方法了呢? 在说答案之前,我们先来看看他们都干了什么吧 首先,位运算为什么能取整? 因为 js 是弱类型的语言...

Javascript 中的装饰器

前言 在 ES6 中增加了对类对象的相关定义和操作(比如 class 和 extends ),这就使得我们在多个不同类之间共享或者扩展一些方法或者行为的时候,变得并不是那么优雅。这个时候,我们就需要一种更优雅的方法来帮助我们完成这些事情。 Python 中的装饰器 decorators 即 装饰器,这一特性的提出来源于 python 之类的语言,如果你熟悉 python 的话,对它一定不会陌生。那么我们先来看一下 python 里的装饰器是什么样子的吧: A Python decorator is a function that takes another function, extending the behavior of the latter function without explicitly modifying it. 装饰器是在 python 2.4 里增加的功能,它的主要作用是给一个已有的方法或类扩展一些新的行为,而不是去直接修改它本身。 听起来有点儿懵,“show me the code !” def decorato...

safari 10 下 rem 失效问题

上个月苹果更新的系统版本,包括 iOS 10 和 MacOS,伴随更新的还有新的 safari。 新版本上来必然会多多少少存在一些坑。还好上个月有段时间在休假,并没有踩到坑。 但是,就在昨天,终于被我踩到了。。。。 大概是这样的: 公司的项目会使用 rem 来做不同屏幕的适配,然后昨天做完一个页面以后,发现在 chrome 下调试没有任何问题,自己的安卓手机也没有问题,但是到了 iphone 上就会出现:上半部分样式正常,下半部分 rem 布局的样式全部都缩小了! 从来没有遇到过同一个页面里面,一部分样式没问题,另一部分样式有问题的情况。。 切换各种浏览器测试发现,只有 safari 10 下会出现这个问题,包括 iOS 下、MacOS 下 和使用 safari 10 的微信浏览器,都会出现这样的问题。。。 好吧,经过了一晚上蛋疼的排查问题,终于找到了原因: 原来是因为一个 summary 标签!!!! 最终发现在 summary 标签前面的样式都没有问题,后面的元素全部缩小了,而把 summary 标签一去掉,样式就全部正常了! 然后自己...

关于字体那些事儿

事情起源于一次 github 的改样式... 某一天安然君告诉我:“你看 github 是不是改字体大小了?”,然后我就兴冲冲地去看了一眼,噫!丑死了! 但是毕竟是作为一条职业前端,我还是很自然的点开了它的样式代码,看了一眼是这样儿的: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" 哎?好像好多没见过的?那个 -apple-system 是个什么东西,好像没有见过? 遇到不认识的为什么不去问一下神奇海螺呢? 于是,我就去搜索了一下,然后事情大概是这样的: 从名字上就可以看出来,-apple-system 是表示使用苹果系统默认的字体,那么,它具体是指的什么字体呢? 大概了解了一下苹...

safari 下旋转动画的迷之 bug

前几天在写一个活动页的时候发现一个你一样问题,先还原一下现场 页面中有一个地方要做一个一直旋转的动画,类似转盘的效果,很简单是不是?是的! .rotate{ animation: rotate 1s linear infinite; } @keyframes rotate{ from{ transform: rotate3d(0,0,1,0deg) } to{ transform: rotate3d(0,0,1,360deg) } } 简洁明了,有木有,还带 3D 加速,完美是不是? 然而。。。 为什么 safari 下并不动。。。。 = =!,老夫可是最新的 safari 9.1.1 呀! 额,这就尴尬了~ 请教一下同事,然后试着改成了这样 @keyframes rotate{ 0% { transform: rotate3d(0,0,1,0deg) } 50% { transform: rotate3d(0,0,1,180deg) } 100% { transform: rot...

用 mocha 和 istanbul 测试你的 Babel 应用

补一篇文章,攒了好几篇想写的内容,今天先补一篇,然后慢慢补 单元测试这种东西大家都很熟悉了,它可以很方便的帮助你进行自检,增加代码的稳定性,同时可以帮助我们完成持续集成。mocha 大家也比较熟悉了,这里也不说了 先说一下 istanbul 这货吧,没错,就是伊斯坦布尔,其实就是一个检测代码覆盖率的一个工具,然后 Github 长这样儿 istanbul 这货可以帮你检测你各个地方的 js 代码,服务端、浏览器端都可以,也可以生成多种格式的检测报告。好吧,我知道你们对这个不感兴趣,那就直接来试试喽~ npm install -g istanbul 安装完成后,我们就可以去我们的代码目录试一下啦~ istanbul cover test.js 如果你在使用 mocha 也可以这样: istanbul cover mocha 然后你就会发现,你的文件夹下出现了一个 coverage 的文件夹。对了!这就是我们的检测报告~ 报告里会标注你的测试覆盖率以及那些代码没有被覆盖到,是不是感觉一下子就清楚了要完善什么了呢,哈哈哈哈哈 然后有小伙伴会...

在 ajax 跨域请求中携带 cookie 做身份认证

好吧,一如既往的短篇记录性文章,记下坑供查阅 原因大概是这样的,公司有很多内网的服务系统,同属于同一个主域,但是是不同的子域,然后呢,当在一个系统需要调用另一个系统的时候,就会出现跨域的问题。所以呢,我们打算写一个通用代理程序来做中转,然后呢,先简单贴一下代码吧 var server = http.createServer(function(request, response) { ... var options = { hostname: address.hostname, port: address.port || 80, path: address.path, method: request.method, headers: request.headers, }; options.headers.host = address.host; var proxy = http.request(options, fun...

手机下 marquee 滚动长度问题

小问题,简单记一下 今天用 marquee 标签做滚动的时候,在 Chrome 下看效果没有问题,但是后来发现在手机微信上,每当内容滚动过 marquee 宽度的距离以后,就会重置重新从头滚动,这一点让我着实蛋疼了一下。。。。 然后后来排查的时候发现,是因为我在样式里给 marquee 设置了宽度(因为不想整个屏幕宽度滚动,所以就设置了一下宽度),然后就出现了问题,这个宽度被继承到 marquee 里面的滚动块上了,所以导致当滚动过这个距离以后,marquee 会以为滚动内容结束了,从而又重新滚动。 那么,当我们确实需要改变 marquee 的宽度的时候怎么办呢? 哈哈,给它外面加上一个 div,然后给 div 指定宽度就可以了 <style> #marquee{ width: 300px; ... } </style> <div id="marquee"> <marquee behavior="scroll" direction=&q...

sass 中使用 calc 传入变量无效

是的,我又用上 sass 了,新公司在用,所以就又写 sass 了。 然后今天遇到的小问题,随手记一下 当我们用 sass 写如下代码的时候 .class{ $padding: 5px; width: calc(100% - $paddding * 2); } 嗯嗯,看上去好像很正常。。。 错!! 编译完了之后,你会发现这段代码是这样的 .class{ width: calc(100% - $padding * 2); } 然后浏览器就无情的忽略掉这一行谜一样的样式了 这尼玛是什么呀?! 摔! 好吧,看样子 sass 在编译的时候,把括号里面的变量当做字符串处理了。 所以我们该怎么办呢? 哈哈哈,对!还记得 sass 怎么在字符串里拼接变量么? 就是它! .class{ $padding: 5px; width: calc(100% - #{$paddding * 2}); } OK,解决!

关于 js 的 event loop 的再研究

事件起因源于对我之前写的一个小工具的再优化,工具遇到的场景大概是这样的: 工具需要在用户点击完按钮后做大量的循环操作(这里暂时没有算法层的优化),大概有 6 万次,然后与此同时,界面上还需要显示出当前循环进行的程度,百分比。大概是这样的: setInterval(function() { // trigger progress... }, 16); for(var i=0; i<60000; i++) { // do something... } 这里在之前就遇到一个问题,就是当 js 去在一个函数里进行循环操作时,js 会被卡住,因为是一个同步过程,所以界面的更新事件会在循环进行完以后再触发执行,这当然不是我们想要的。然后后来,我就把它变成了下面这种递归模式: function loop() { // do something ... setTimeout(loop, 0); } 这样的话,就把每次循环变成了一个异步事件,等上次循环执行完后,再把下次循环的事件挂到事件队列上,等待下次 ...