/^1?$|^(11+?)\1+$/


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。

为了用户体验而做的事情

嗯你没看错,这篇文章的主角还是那个编辑器,还是熟悉的 react-dnd 和 immutable-js。现在这个编辑器已经可以替代目前线上的旧版编辑器了,而且功能更全。接下来我就说一说,为了让这个编辑器的用户体验更好,我都做了哪些事情——有技术方面的,也有设计方面的。技术方面拖拽时显示元素的详细内容由于用的是 react-dnd,之前的效果是默认效果——对元素 DOM 所占矩形区域的网页截图,这样就造成了一些神奇的现象。后来我用了一个临时的解决方案,就是使用 dragPreview 来为拖拽添加预览图,但是预览图很简单,就是生成一个与元素大小相同的矩形。这周我对 dragPreview ...

对 react-dnd、immutable-js 与树形结构的优化

背景最近一直在做一个低配版网页编辑器,这是我刚入职的时候从同事那儿接手的一个 React 项目,项目中使用了 react-dnd 作为拖拽库,Store 中的信息都是 Immutable 对象。按理说应该效率挺高的,于是我就一直专注于业务需求,这周就差不多写完了。如果一切顺利的话就不会有这篇文章了,起因是前天我手贱,搞了 256 个元素进去,别说拖拽了,选中一个元素都得卡上一秒左右……这怎么行,赶紧祭出之前摸索出来的 Performance 优化大法。由于支持 JSON 格式的导入导出,于是我就导出了个测试用例(512 个元素),这样就不用每次都重新画了:火焰图的局限性在 Chrome ...

一次很蠢的优化经历:判断数组 A 是否是数组 B 的一部分

原问题昨天一个同学问了我一个问题,他想扩展 JavaScript 中的 Array.prototype,以判断当前数组是否被包含于另一个数组(不考虑 a = [a] 这样的循环引用),例如:[1] 被包含于 [2, [1], 3] 和 [[2], [3, [1], 4]] 两个数组中。其实这道题如果只需要考虑引用相等,例如这样设计测试用例:const a = [1]; const b = [2, a, 3]; console.log(a.isPartOf(b)); // => true那就比较容易了,如果对 JavaScript 比较熟悉的话,应该可以快速写出如下的代码:Array...

陈独秀同学请你坐下

昨天在推上看到某大佬的一条推文:“程序员往往是最会生活,最能感受生活的吧”。我不敢完全认同,毕竟每天累死累活的程序员我也见过;但这个问题的“幸存者偏差”其实刚好反着:会享受生活的程序员往往自己享受去了,反而是各种苦逼的同行们发声比较大。所以为了纠正这个偏差,我就诞生了~(被打上次的面试通过了,第二次来到深圳,还有十几个小时就满两周了,在新公司蹭着零食,跟旁边两个小哥哥一起写项目,日子过得其实挺滋润的。当然,首要的原因是公司的办公环境。之前听同事说,中国储能大厦是地铁站旁边的甲级办公楼,其它公司都用来做总部,Shopee 居然把深圳分部放这儿了……里面的环境大概是这样:卫生间里面有上下两个...

深圳一日游兼 Shopee 终面酱油记

突然发现好久没写过酱油记了,看来退役之后以前的习惯都变了呢……之前经由三三内推,绕过了 Shopee 招聘要求中“一年以上工作经验”的限制,然后莫名其妙通过了让我跪到怀疑人生的技术面,进入了终面。终面是要去公司现场面试的。很开心的是公司可以报销往返的机票和一晚的住宿费,于是我在想如何才能尽可能呆的久一点,毕竟深圳是个大部分时间都可以穿着短袖短裤拖鞋到处晃的城市!最终定下来是前一天早上的飞机到,面试完当天晚上飞回来。在准备安检之前,感觉自己带的东西有点太多了(一共就两天所以没带行李箱),于是就将衣服一件件套到了身上,书包果然轻下去了,还好看起来似乎并没有胖许多:这是我第三次坐飞机,也是解除...

Rex 的 2018 新年红包例行题解

今年又来出题凑热闹了。依旧是五道题,由于前面挂了一层 Cloudflare,并为这个域名开了浏览器检验,因此题目就直接用纯静态文件了。这次的界面比上次稍微好了一点,框的图片用的是我很久以前做的游戏中的窗口。具体的实现方法就请大家自行扒代码吧。下面说说题目。Level 1传送门:https://red-packet.rexskz.info/2018/?s=the_first_levelconst encrypted = 'gard dna kcilc'; const decrypted = reverse(encrypted); const { id } = new ComicCollec...

从连接器开始的一系列旅程

偶然认识的连接器最近有小伙伴在群里问一些关于 Underscore.js 中 fnull 函数的问题,我并没用过这个函数,于是就去翻文档,于是就发现了一个之前没见过的词:combinator。其实光看英文“连接器”大概能知道是带有“函数组合”的意思,并且文档里写到这个函数是个高阶函数,于是我就大概知道是怎么回事了。在我看来,combinator 其实跟之前见过的 decorator(装饰器)差不多。对装饰器的第一印象第一次见到装饰器,是在 Coding.net 的后端代码中,Spring 自带的 @RequestMapping 等一系列注解(Annotations)。@RequestMa...

对于不可变数据的思考

Redux 中的一个隐藏 BugBug 的成因我在 这篇文章 中曾经说了一句关于 Redux 的话:“就算程序员未经过专门的训练(例如掌握框架的 Best Practice),也可以显著降低 Bug 出现的概率。”然而最近同学遇到的一个 Bug 让我想把这句话改掉:只有当 Redux 配合 Immutable-js 的时候,才可以显著降低 Bug 出现的概率。我相信这个坑大部分人都踩过:// action function updateData(data) { // .... dispatch({ data }); // .... } // componenet...

2017 年的回顾和结论

写在前面的话当年身为信息特长生进了大学,学习一直不怎么好,也没想学的怎么好,不过还是最终顺利毕业了。这一年我最大的感触就是,大神们的事迹和经验,真的只是看看就好了,不要太往心里去。没有任何人的方法适合你,只能自己寻找适合自己的方法。回顾技术毕竟是技术博客,所以技术还是占重头戏的。在已经涉猎过的技术方向上,我都是有进步的,至少从之前的只会谷歌和必应,变成了现在的谷歌、必应、Issue、翻源码。给 Element UI、PhalApi、DPlayer、node-ffi 提过一些 Issue,不过好像从没贡献过代码的样子。唯一提过 PR 的 sound.js 作者一直没有合并,不过也没办法,毕...

使用函数式编程思想来优化代码

首先我作为一个普通的开发人员,肯定不是主攻函数式编程的,对它顶多算是浅显的了解,并没有深入去研究。但是目前的这些“了解”已经可以极大提高我的开发效率,因此就把我的经验写一写,方便一下那些跟我一样“不准备入坑函数式而只是观望一下”的开发者。先上一个非常简单的、大家已经习以为常的函数式编程的例子:function f(x) { return x <= 1 ? x : x * f(x - 1); } f(5); // => 120我与“函数式”一词的历史第一次听到“函数式编程”这个概念是高二,当时一个一起搞竞赛的大佬提到了 Haskell 是一门函数式编程语言。听他讲了很久,我现在...

在 Electron 下调用 Win32 API 的经历

写在最前面的话公司有个需求,就是在 Electron 运行的时候,调用系统的一部分 Win32 API。我的方向是前端,并不是很懂 Win32 API,因此只需要给出可以供其他同事使用的地方就行了。在 Windows 上搞 Node.js 开发,一定要装好各种构建工具。如果不想装那个巨大的 Visual Studio 的话,可以看一下 这里。但由于某些众所周知的原因,身在大陆的同学们会很不愉快:不管是文中的哪个选项,都会卡在 Visual C++ Build Tools 的安装上。主要是微软这智障不提供离线安装包了。我用 VisualCppBuildTools_Full.exe /lay...

IT 创新区招新题部分题解

本文只会写我出的那些题,然而最终版笔试题把我一开始出的有点难度的题都给砍掉了,那些题也一起写进来吧。笔试部分Web 大前端1. 下面哪个标签表示该元素是一个超链接?(A) A. <a> B. <b> C. <i> D. <link>HTML 概念题。2. 目前在 HTML 中最新的 DOCTYPE 是什么?(A) A. <!DOCTYPE html> B. <!DOCTYPE html5> C. <!DOCTYPE HTML5> D. <!DOCTYPE HTML4.1>HTM...

这是我们共同度过的

第 885 天