输入法与 keydown 事件

输入、回车提交,这是一组在搜索场景中常见、友好的交互形式,但要将其做好以获得更好的用户体验,还需要关注其中的小小细节。 监听回车 所谓的细节就是关于“回车”的监听。因为输入法的存在,引入了文本合成现象,使得字符输入变得不再纯粹简单。 若处理不当,就会出现在开着输入法的情况下,当只想使用回车输入字符时,却触发了提交动作。 就像这样(我想搜的可能是 “red 主题”): 大胆猜想一下,上面输入框的实现可能是这样的: input.addEventListener('keydown', (e) => { if (e.code !== 'Enter') return;

跨平台 Hooks npm 包的接口设计

一、Overview Taro 是用 React 的方式来写小程序,拥有与 React 一致的 api,因此可通过相同的实现来同时满足多端的需求。现在正在构建一个可跨端使用的 Hooks 包,关键的问题在于如何处理包的依赖。 当在小程序中使用时,实际上是依赖了  @tarojs/taro,而在 web 中使用时需要依赖 React: // cross-use(Hooks 包的包名) function useMyHook() { return useState(); } // 业务方使用时 import { useMyHook

基于 React Hooks 的小型状态管理

本文主要介绍一种基于 React Hooks 的状态共享方案,介绍其实现,并总结一下使用感受,目的是在状态管理方面提供多一种选择方式。 实现基于 React Hooks 的状态共享 React 组件间的状态共享,是一个老生常谈的问题,也有很多解决方案,例如 Redux、MobX 等。这些方案很专业,也经历了时间的考验,但私以为他们不太适合一些不算复杂的项目,反而会引入一些额外的复杂度。 实际上很多时候,我不想定义 mutation 和 action、我不想套一层 context,更不想写 connect 和

服务架构

插件化设计模式在前端领域的应用

软件开发中,随着系统功能变多,复杂度成指数级上升,而复杂度的增高多来源于模块间的耦合过于严重,插件化的设计模式能一定程度解决模块耦合的问题。抽象出系统的核心流程节点,基于这些节点与多个插件进行交互,最终实现整个系统。当然,前端领域的一些场景也有插件化应用的案例,本篇文章我们基于这些案例,一览其中的设计原理与插件核心执行流程。

Git Subtree 的使用

git 的 subtree 是一种复用源代码的方式,可以让多个仓库引用某个仓库的代码,也可以将仓库中的某个目录拆分成一个子仓库以供其他仓库使用。 相较于 git 的 submodule,目前社区中多更推崇 subtree,自己在使用了一段时间后总体也是认为 subtree 会更好用一些。 但同时,两者都有各自的一些问题,而 subtree 的问题目前有其他方式规避,整体用起来比较流畅,所以最终选择了 subtree。 实际上 subtree 命令需要在某个版本的 git 之后才被支持,但目前 git 的常用版本是完全足够的,所以也没去深究过。 为什么?

JavaScript中的相等运算符"==",你真的搞懂了么?

Brendan Eich在设计JavaScript的时候是没有加入类型系统的,所以JavaScript是一门动态语言,类型是进入执行上下文的时候可能才去确定,这就可能出现一个JavaScript变量在上一瞬间是String,下一瞬间就是Number了,在这个过程中,JavaScript变量进行了类型的转换。使用Javascript进行相等运算时,我们可能会用==,===和Object.is来进行比较两个值是否相等。 使用===时,恒等,严格比较运算符,不做类型转换,类型不同就是不等,NaN与NaN不相等。 使用Object.is()时,其行为与"==="基本一致,不过有两处不同: +0不等于-0。 NaN等于自身。 使用时,不同类型的值也可以被看作相等。这可能会让很多的JavaScript困开发者感到困惑。使用&

GraphQL可以为你带来什么

越来越臃肿的web应用 随着Web应用变得越来越复杂,特别是像一些toB的web应用(例如财务软件,ERP等企业级软件),传统的前后端REST架构交互方案在极大的限制了软件的开发效率,提高维护的成本,不仅是前端,后端的开发和维护成本也是越来越高。 对于REST架构来说,主要的问题是以下几点: 过度获取数据,例如,有的时候前端为了满足在web和移动端的业务需求,可能会在同一接口是获取相同的数据,但是有的数据在两端上并不是必须的。 前端业务数据可能要通过多个接口请求去获得,而想chrome这样的浏览器允许的请求的最大的并发数是六个,在一定程度上会有体验方面的问题。 有一些REST接口并不十分规范,比如一些查询接口的数据字段过多就会被定义成POST接口。 前端需要知道每个接口服务的地址,才能去获得对应的资源数据。 如果后端API发生了更改,那么可能会导致另外一个或者多个API奔溃,前端数据可能会受到破坏,哪怕只是一个简单的数据结构调整,这对于前端来说很可能是致命的,大概率会跟着调整。 当有新的功能需要开发时,后台需要去聚合多个微服务的数据提供给前端使用。 由于REST架构让前后端产生了一定的耦合,除了以上的技术问题之外,

初探Webassembly

在开始聊Webassembly(下文简称为wasm)之前,咱先了解一下为什么会出现wasm这个全新的web格式。这得从Javascript的诞生说起。 Javascript的诞生 在1994年的时候,网景公司成立,同年发布了Navigator浏览器0.9版本,这个浏览器只能用来浏览,不能和用户进行相关的交互。1995年,Brendan Eich进入网景公司,花了十天的时间研究出了Mocha,之后更名为LiveScript,最后因为网景公司想趁Java的热度才更名成Javascript。 Brendan Eich主要研究的方向是函数式编程,网景公司希望研究将Scheme语言作为网页脚本语言的可能性。Brendan Eich也认同这种想法。网景公司希望网页脚本语言要与Java足够相似,并且要比Java简单,要让非专业的开发者也能上手,然而,Brendan Eich对Java谈不上一点喜欢,所以他花了10天就设计出了JavaScript。 Javascript的弊端和改进之路 由于JavaScript最初只是为了简单的在浏览器上进行简单的交互,所以Brendan

浏览器录音实践与踩坑

之前做某个语音留言互动的需求时用到了浏览器录音相关功能,当时查了相关的资料,后续实际开发中也遇到了一些坑。 本次就web端实现语音录制的原理及一些踩坑记录做一个分享。 MediaRecorder MediaRecorder在原生app开发中,是一个应用广泛的api,用于在app内录制音频和视频。 随着web侧的应用越逐渐富媒体化,w3c也制定了相应的web标准,称为MediaRecorder API,它给我们的web页面赋予了录制音视频的能力,使得web可以脱离服务器、客户端的辅助,独立进行媒体流的录制。 该API由官方推出,对前端开发者友好,并且支持标准编码,直接返回媒体流数据,可以注入video/audio标签或者直接打包成文件。 基本API如下: MediaRecorder.start() 开始录制媒体 MediaRecorder.pause() 暂停媒体录制 MediaRecorder.resume() 继续录制之前被暂停的录制动作 MediaRecorder.

前端

node_modules 与包管理器

身为前端开发的我们应该每天都会接触 node_modules,但对于 node_modules 的认知是否充分?也许因为包管理器的存在,平时只需要一个 install 命令,可能就不会去过多关注 node_mdouels 本身。 简单而言,node_modules 是为 Node 设计存放依赖的文件夹。一直到今天,node_modules 能满足很多场景的使用,但同时也存在不少缺陷。 从一个常见的版本冲突场景开始切入主题,查看以下依赖关系: 当出现这种情况时,node_modules 下的文件结构是如何组织的? 如果

git hooks

现在代码一般都会使用git来进行管理, 其中git hooks(git钩子)是git提供的在代码管理的生命周期中会被触发的一个阶段, 如同react里面组件的生命周期一样, 随着组件的状态的改变, 一些生命周期函数会被触发, 然后可以在触发的时候进行自定义的操作, git 也是如此, 例如我们可以在代码被提交(git commit)前进行代码的自动检查, 通过了检查才允许提交, 否则提交失败, 然后还有常见的自动化部署也是利用了 git hooks, 当新代码被提交到服务端(git push)的时候触发git hooks, 然后服务器自动进行重新部署. 我目前的使用来说用到了上面提供的两个钩子pre-commit(git commit时触发)和post-update(git push时触发) 一个是在本地提交js代码的时候使用eslint先对代码进行lint,

前端

<<CSS World>>笔记

前段时间断断续续的把张鑫旭的《CSS World》看了两遍,这本书很偏基础,也很有张鑫旭个人特色,不像是那么多技术类书籍章法森严罗列技术词汇,这本书的内容都是他长年累月的实践中沉淀下来的干货和私货,更像是在看一个程序员的笔记, 值得一看的一本书。 书里的内容只精专于CSS部分,而且由于出书时间比较久了,CSS3现在的发展比书中的内容丰富了很多,有些实现在现在看来已经更好的解决方案了,不过里面涉及到的一些基础知识和实现确是出乎了我的意料,有不少意外的收获,以下内容记录的仅是我个人平时没有注意到或者比较意外的点,配合codepen提供的demo,demo集合地址:https://codepen.io/collection/ngQGBY, 部分知识点很简略所以无demo知道即可 1. 替换元素不支持伪元素 :before和:after 例如<img />

toLocaleString

冷门的toLocaleString

冷门的toLocaleString js 里面除了我们日常使用的api以外, 其实还是有不少大多数人都不知道的很好用的api的, toLocaleString算一个, 也许你在面试题中看到过用正则来实现数字千位用逗号分隔的做法, 但是如果你能直接说出toLocaleString, 应该是出乎面试官的意料的, 而它的用法可不止于此. toLocaleString方法在Numnber和Date类型上都有部署, 实现的作用都是格式化数字或者日期, 返回格式化后的字符串. Number.prototype.toLocaleString api: toLocaleString([locales [, options]]) locales指定地区, 默认是按照当前电脑环境的语言, 也可以指定不同的语言, 中文是zh, 英文是en, 其它可选项请查看MDN, 不区分大小写. 例如: const a = -2345679.56789; const b

酷家乐平台前端招前端实习啦~

我们是干嘛的 酷家乐是目前全球最具创新体验的 VR 智能室内设计平台,国内最大的互联网家装公司之一,从 2011 年成立到现在,已经 D 轮融资,估值 6 亿美金,跟天猫、淘宝、小米等都有非常多的合作。 我们推崇硅谷氛围,在这里没有职位之分,每个人对自己负责,扁平化的氛围保证工程师的自由和创新。 小哥哥小姐姐们都在干点啥 酷家乐平台前端团队,负责酷家乐PC 门户、大家居 SaaS 平台以及桌面端等的开发,在这里你将与最优秀的小伙伴一起,与公司一同成长 业务:大家居 SaaS

URI

URI’s fragment

URI & URL URI,Uniform Resource Identifier,统一资源标识符。 URL,Uniform Resource Location,统一资源定位符。 URI 简单来理解就是标识/定义了一个资源,而 URL 在定义/标识资源的同时还需要描述如何访问到该资源。可以认为 URL 是 URI 的一个子集。 举个例子: 公司里每个人都有一个内部唯一的花名,这个花名其实就可以认为是 URI,它对应了公司内部唯一的一个人(资源)。当我需要找这个人时,虽然我知道了花名(