• a + b in JavaScript

    计算方法

    1. 将A和B都转换为原始值(primitive,执行ToPrimitive),这里记为A1,B1
    2. 如果A1和B1中有一个值为string,则将A1、B1都转换为string(执行ToString),其值记为A2、B2,将A2 B2连接后就是A+B的结果
    3. 否则的话将A1、B1都转换为number(执行ToNumber),其值记为A3、B3,将A3 B3相加即为A+B的结果

    ToPrimitive(obj,preferredType)

    JS引擎内部转换为原始值ToPrimitive(obj,preferredType)函数接受两个参数,第一个obj为被转换的对象,第二个preferredType为希望转换成的类型(默认为空,接受的值为Number或String)

    在执行ToPrimitive(obj,preferredType)时如果第二个参数为空并且obj为Date的实例时,此时preferredType会被设置为String,其他情况下preferredType都会被设置为Number

    如果preferredType为Number,ToPrimitive执行过程如下: 更多...

  • 一行命令kill所有被node占用端口

    lsof -i:3000 | grep node | awk '{ print $2 }' | xargs kill
    lsof -i:3000

    列出所有占用3000端口的文件

    grep node

    过滤结果,使其只包含有node的行

    awk '{ print $2 }'

    awk对每一行进行处理 ,以空白符(空格、tab等)将每行数据分割,$0为所有数据,$N为第N列 更多...

  • fetch下载文件

    fetch跨域下载文件

    为何读取到的content-disposition header为null

    在跨域访问时,XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头,

    • Cache-Control
    • Content-Language
    • Content-Type
    • Expires
    • Last-Modified
    • Pragma

    如果要访问其他头,则需要服务器设置Access-Control-Expose-Headers

    Access-Control-Expose-Headers:Content-Disposition

    保存文件

    fetch(`${url}`, { method: 'POST', headers: { ... }, mode: 'cors', body: JSON.stringify({ companyId: this.state.params.companyId, startDate: this.state.listParams.startDate, endDate: this.state.listParams.endDate, }) }).then(res => res.blob().then(blob => { let a = document.createElement('a'); let url = window.URL.createObjectURL(blob); // 获取 blob 本地文件连接 (blob 为纯二进制对象,不能够直接保存到磁盘上) let disposition = res.headers.get('content-disposition'); let filename = (disposition && disposition.replace(/attachment;.*filename=/, '')) || 'uv.xls' console.log('disposition:', disposition) console.log('filename:', filename) a.href = url; a.download = filename; a.click(); // 使用完ObjectURL后需要及时释放, 否则会浪费浏览器存储区资源. window.URL.revokeObjectURL(url); })) }

    参考文章

  • 亲手实现一个Promise

    为何要手写Promise?直接import不行吗?

    身处技术圈,前端技术真的是日新月异,异步的实现方式从callback、到Promise、再到Generator、Async/Await,有了长足的发展,Promise作为发展过程中的一种产物其既是callback的一种改良,也是Generator、Async/Await的基础。

    直接import一个Promise类库当然可行(在支持的浏览器中直接使用Promise也未尝不可),但是如果我们能够亲手实现一个Promise,那么我们还能够:

    • 对Promise的理解更加深刻
    • 提升自己的类库编写能力,尤其是各种边界值的处理

    另外有一点需要说明,本文针对的是有一定Promise基础的同学,基础知识不在本文范畴之内,不了解的话请自行Google :) 更多...

  • JS原型链回顾

    前两年在看JS原型链的时候花了挺久终于搞懂了,时间一久又渐渐生疏,趁机画个图总结下

    主要知识点: 更多...

  • iterm2自动恢复会话/标签设置

    自从换了公司并习惯在Mac上做开发之后,与命令行打交道的机会就变多了,经常用iterm2这个神器但是有一个很蛋疼的地方,就是在退出之后上一次的会话,或者是标签等都没有保存,这样就不得不再打开一个个tab,敲一遍遍路径(虽然有autojump会稍微快点)。好了,不废话,下面告诉你怎么搞。

    1、下载2.9beta版

    因为这个功能在2.1.4中还没有,所以乖乖去下吧,不然打破头皮也没用。

    下载地址在这里: iTerm2 2.9.20151111 beta (OS 10.8+) 更多...

  • 01-洗澡时的思考

    最近总是在想为什么会有一事无成的感觉,思来想去,在洗澡水的冲击下我终于想到了两点,懒惰与害怕。

    至于害怕,可以说是打小就有的。对外面的世界,对未知的问题,对一切不确定的东西,只要遇到第一反应就是退缩,总想找到屏障好让自己舒舒服服的不用去面对,亦不用承担失败的后果。对,也许根源就在这里,怕失败,被人嘲笑,承担责任。但这也让自己错过了很多机会,比如遇到心仪的女孩总是擦肩而过。对于一个二十几岁的人来说,害怕这个东西真是让人没面子唉。

    再来说懒惰,现在唯一想到的原因是没有动力让自己必须勤奋起来,即使懒惰也不会有什么特别让人无法接受的事情发生,不会有严重后果。然而没有动力这件事又该怎么说呢,压力,兴趣,都有关系。 更多...

  • CSS3 transform的一些细节

    之前虽然用CSS3 transform做过动画相关项目,目的就是让元素动起来,看着比较酷炫,仅此而已。但是最近想用transform实现小于12px文字的时候却发现transform并未将由于文字过长而换行的文字改为单行,那正好趁着这个机会小小的研究一把。

    用transform实现小于12px大小时的一些细节

    众所周知Chrome里面(据说只有中文版,未测试)文字最小为12px,那么要实现10px的文字大小,就会用到transform

    transform:scale(.5)

    这对于正常的应用来说是没问题的,比如下面的例子 更多...