Yusen's Blog

目前就职于视听行业相关的公司，故而需要接触流媒体传输相关技术。今天介绍一种基于 MIME 类型的服务端流媒体推送实现。 阅读全文…

静态数据所谓静态数据，本文内指的是一些静态常量、配置化数据以及枚举类数据等，很少变化或者说很少在运行时变化的数据。例如：API 服务器的 rootPath、常用的正则表达式、业务相关的枚举类数据、固定的填充数据以及 i18n 等。虽然这些数据很少变化，但在一个大的项目中非常容易到处使用。常见的问题有：同样规则的正则表达式，这写一个，那写一个业务枚举数据各种迷之 magicNumber 进行判断比较，如 if(this.type === 1)，1 是啥？？？对同一种数据的多处定义，A 组件一个 framework: ['Vue', 'React', 'Angular']，B 组件用的时候又定义一次i18n 时，不同模块中的类型场景定义多个描述……这些问题的出现就给后期项目维护增加了时间和沟通成本，有意识的提取静态数据是必须要做的事。 阅读全文…

记录我在使用 Vue 中发现的一些好的代码实践，希望能够保持更新。🤠 阅读全文…

过去的一年都扎在 SPA 应用开发里了，直到现在偶尔还会回顾和思考关于数据管理方面还有哪些可以改善的地方。过年后在找工作的期间，发现有些面试官都理解不了我描述的项目经历中的项目复杂度，也许是所在城市（郑州）的原因，水太浅。现在对过去的一些经验做一下总结，也期望与相关领域的开发者一起交流。 阅读全文…

一个多月没写博，最近一个月的 Github 提交数少了很多，总之就是各种状态不好。微博上看到上个月是水逆，看来我也是受灾群众了。😝单页应用的一个特点就是即时响应，对发生变化数据实现 UI 的快速变更。实现的基础技术不外乎 AJAX 和 WebSocket，前者负责数据的获取和更新，后者负责变更数据的客户端同步。其中要解决的最主要的问题还是数据同步。可以把这个问题拆分为两个具体问题：数据共享：多个视图引用的数据能在发生变化后，即时响应变化。数据同步：多终端访问的数据能在一个客户端发生变化后，即时响应变化。 阅读全文…

如何存放或更新缓存？缓存数据来源是预知的，我们可以预先定义哪些 mutation 是缓存相关的。我们期望这个过程更自然一点，通过某种变化自动映射，使以后不管缓存类别增加还是减少都能修改极少的代码来应对变化。Vuex的插件可以拦截 mutations，借助这个机制，我们可以制定一种策略化的规则。 阅读全文…

Vue 和 React 的大红大火，带来的是组件化和数据驱动的开发方式。Demo 很美好，但如果没有一定的实际开发经验积累，总是能把一个功能模块写成浆糊。依托于 Webpack 等构建工具，使得前端代码具备了后端编程语言的代码组织能力，摆脱了传统的「一泻而下」式的代码编写。至此，作为前端也该对自己的代码有更高的要求。 阅读全文…

最近一次团队会议中提到了这个问题，感觉有点意思，就有了以下的思考。我们可以很轻松的写出以下解决思路：每一项的数据模型都有一个字段order，表示排序的依据。拖拽每一项后对order字段进行一定的变更，并发送修改请求，持久化排序字段。问题就在于第二步中的 进行一定的变更，是如何变更？从这一点入手就出现了各种不同的解决方案。 阅读全文…

Vue2 取消了.sync指令修饰符，推崇单向闭环的数据流。即：父级通过props向子级传递数据，子级如果需要修改数据就需要在父级添加监听事件，并在子级中去触发事件修改值。在多数情况下，是不需要双向绑定的，单向数据流更容易追踪数据变化排查问题。但一些特定场景下，如弹窗，除了外部由父组件控制显示和隐藏外，组件内部也有关闭和取消等按钮需要控制显示和隐藏。这虽然可以通过触发事件让父级修改显示状态来实现，但每一个弹窗组件都需要做一遍这样的事总觉得很不爽。 阅读全文…

前言最近在项目中准备集成一个富文本编辑器，原来使用的是 Quill，之后发现项目打包体积瞬增了 200kb。虽然 Quill 完全能够满足项目需求，但其提供的诸多功能是用不上的，可以使用更轻量的实现代替。在寻找新的替代品时，也顺便瞄了下各种编辑器的内部实现。一些体积庞大的编辑器一般都兼容低版本浏览器，不得不写很多兼容性的代码。而一些 MINI、轻量的编辑器是不对低端浏览器作兼容的，使用Selection、Range或者document.execCommand实现。之前在 JavaScript 获取输入时的光标位置及场景问题 中提到过Selection和Range，这次就说说document.execCommand。 阅读全文…