R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。 MUGer, hacker, developer, amateur UI designer, punster, Japanese learner.

分类“开发”下的文章

为了用户体验而做的事情

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

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

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

一次很蠢的优化经历:判断数组 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)); // => tru...

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

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

对于不可变数据的思考

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

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

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

Rex.sh:一个伪 Web terminal

之前写过一个“rexskz.info in terminal”,打算用伪 Web terminal 来展示自己的博客,但是后来发现简直是太简陋了,于是萌生了重写的念头。经过一段时间,居然写完了。这篇文章就是分析一下里面用到的一些技术。虽然这个终端还是很简陋,对命令的支持仅限于 command arg0 arg1 ... 的格式,但是它支持自动补全、颜色,也有文件系统和变量,所以还是比之前的稍微高级那么一点的。按照惯例,先上图:CSS 部分首先,一个 Web terminal 要长的像 Te...

一个由全屏引发的问题

最近在搞一个跟全屏有关的东西,我知道 Fullscreen API 浏览器的支持很有限,于是在写的时候加足了浏览器的私有前缀,包括 CSS:.video-container-inner:-webkit-full-screen, .video-container-inner:-moz-full-screen, .video-container-inner:-ms-fullscreen, .video-container-inner:fullscreen { position: fix...

翻一翻自己的黑历史——rscss、rsjs

惯例在写正文之前扯一堆没用的,想直接看正文的话可以点 这里。敢于自爆黑历史也是一种勇气。刚才无意间看到了 AmazeUI。没忍住于是发了条动态:现在再看 AmazeUI 感觉已经不是那么回事了,现在的几大前端框架以及各种工具改变了前端开发的几乎全部内容,除了基础语法以外都得重新学。。明明才过去几年啊。。想当年我还在纠结于写一个 CSS 库(类似于 <input> 等标签的样式库),某人问我:“你听说过可以点击链接不跳转页面,直接局部刷新的东西没?”我还觉得很不可思议,一个月后的...

CSS 中关于 overflow 的限制和绕过方法

在写毕设的时候遇到了一个看起来很难搞的问题。假设有如下 HTML 结构:<div class="scrollable"> <table> <thead> <!-- headers --> </thead> <tbody> <!-- contents --> </t...

Laravel 版本与 PHP 版本之间的坑

又到了一年一度五四评优的季节,技术部又有的忙了。作为陪伴这套系统时间最长的人,也是目前唯一了解全部技术细节的人,我自然需要帮现在负责的同学们一点小忙。于是我又把这套系统 clone 了下来。如果用的是 Apache,那么 Laravel 已经有了 .htaccess 文件;但是Nginx 的配置并不像官方说的那么简单,下面是我尝试了许多次才配置成功的:location /evaluation { if (-d $request_filename) { rewrite...

讲一讲 Canvas 究竟是个啥

本文已授权 Coding博客 转载。HTML5 的标准已经出来好久了,但是似乎其中的 Canvas 现在并没有在太多的地方用到。一个很重要的原因是,Canvas 的标准还没有完全确定,不适合大规模用在生产环境。但是,Canvas 的优点也是很明显的,例如在绘制含有大量元素的图表的时候,SVG 往往因为性能问题而无法胜任,例如我见过的一次技术分享会的抽奖环节,虽然效果比较炫,但因为每个头像都是 DOM,利用 CSS3 控制的动画,导致了性能非常低下。此外,随着硬件性能的提高,视频截图、图像处...

这是我们共同度过的

第 1725 天