前言 近期在项目中集成软电话插件，遇到不少小问题， 其中iframe播放问题花了较多时间， 此处整理下 media 自动播放 简单来说， 是浏览器限制自动播放。下面是官话 解决方法: iframe设置标， 这种方式适合能操作容器页面的情况， 使用时会有权限提示， 需要用户手动允许 保证iframe同源，即容器域名和iframe域名一致。 Reference Chrome autoplay
背景 近期公司产品需要嵌入第三方平台，需要和平台页面进行一部分信息通讯，广泛使用了 , 本文主要介绍 postMessage 的使用和注意事项 使用 targetWindow targetWindow 需要为一个 window 对象， 常见使用方为 window(同页面之间,实现 pubsub) window.parent(或者 window.top) 向父级推送消息 window.frames[0].contentWindow(向 iframe 页面通讯) window…
背景 typescript 配置项很多，不像 js 有固定语法，实现一种功能根据配置有多种写法，配置不同会出现不同的 语法错误。本文主要分析主要的参数，提高自我对 ts 的理解能力 更准确的强烈推荐使用官方文档, 本文只是阐述个人的理解 compileOptions target 编译结果版本，ts 本身可以直接替换 babel 编译代码，个人更喜欢使用 babel, 故 ts 的作用仅仅用于 typings。target 作用不大, 用 es…
背景 埋点分析通常使用图片或者 xhr, 但在一些特定条件下有可能无法正常发出请求，例如埋点记录页面关闭。sendBeacon 就用于这种特定的场景使用 使用方法 其中 就是请求地址，可以是任意有效的 Post 数据类型。 与 xhr 不同，不会产生跨域问题。 常用方法: 在离开/隐藏页面发起埋点 ie11 不支持 Beacon API Reference sendBeacon
背景 最近在阅读一些底层库时，发现都会使用操作符，而不是。 和我个人经验略有区别，故查询了些资料，作为 2 者对比。 共同点 都支持es6 symbol 不同点 操作符会返回 true 原型链中的属性, 不会。所以, 无法获取 es6 中 class getter, settor 中的字段 主要区别如下表 in hasOwnProperty Symbols ✅ ✅ inherited properties ✅ ❌ es6 getter/setters…
前言 react hooks 底层机制参考了 algebraic effects，但在网上搜索这个词汇，大多都是偏学术的，我不擅长谈论学术，只能根据个人经验对 algebraic effects 做一些相关思考 什么是algebraic effects 简单来说， 其实就是 的一种变体。 algebraic effects 主要解决2个问题 抛错后无法继续执行 上述代码若入参缺失， 会直接停止执行， 导致后续 方法不被执行。algebraic effects…
systemjs 背景 与传统 webpack 开发时构建不同, systemjs 着重于运行时构建。故 systemjs 更适合大规模零散开发集成项目。 systemjs 历史其实比 webpack 更久远, 最早用于 angularjs 模块集成。最近由于 chrome 最新版本支持一下子重新受到了关注 特性介绍 运行时加载 systemjs 类似于 amd…
背景 最近遇到一个线上解码 bug, 默认的 转码乱码，初步查明原因是因为 仅支持编码，而我们使用的底层库返回的为(unit8Array)数据 解决办法 使用实验阶段的 处于实验阶段, ie 浏览器需要使用 polyfill Reference The Encoding Standard defines encodings and their JavaScript API polyfill encoding api String.fromCharCode
在 mogul 实现image 组件懒加载图片时, 第一次接触到该 API, 当时由于开发紧张，故没有深入研究，现在有点空余时间，深入研究一下 Intersection Observer API 用途 图片,内容懒加载 窗口无限滚动(当滚动到页面底部时, 自动加载更多资源,实现无限滚动) 以前我通常使用监听滚动时间, 然后基于 和 综合判定是否需要加载更多资源 react…
背景 前端业务系统遇到性能问题主要有 3 种 网络请求过多 dom 滥用 Big O notation 数组循环 算法过多 本文主要解决 Big O notation 问题 另外 2 种情况 , 的问题，我会另外写一篇文章总结 在实际业务中, 往往从服务端获取的数据不是真正 UI 想要的，故必须对数据进行一个操作(过滤，排序，格式化等)。然而, UI…
过年在家，闲来无事，总结一下我为什么使用 react 的原因。 背景 起初, 使用 react 的原因很简单：公司项目需要迭代, 原有技术(jquery)已无法满足需求, 故需要切换为更现代的框架技术(angular, react, vue, knockout)。 由于小公司，没有能力做不同框架之间的调研，只能通过查询科技新闻(2015)，选择了 react。现在回想起来, 盲选的结果不错。 现在个人认为: 重大核心技术选择, 需要以大厂、开源、Do One Thing…
背景 我最终打算将我的项目慢慢向 typescript 迁移了，不是因为原生 javascript 不好，而是遇到了其无法解决的问题。如下是我总结的原因 手写文档太痛苦 我当前使用手动写文件来实现客户端代码的自动补全和提示, 这种方式不论在 webstorm, 还是 vscode,效果相当不错。起初，这没有什么问题。但是随着版本的迭代, 我发现如若修改一点点的内容，我必须手动 去修改相关文档。而这原因导致我多次重新发布版本。故我希望将文档和代码合并, typescript…
背景 最近手头项目不多，抽空将公司底层的一些代码重构了一下，试着想要加入单元测试(unit test)，之前总听大神说单元测试多么好，但是一直没空了解。当前总共有 2 中测试模式, TDD 和 BDD， 这里总结一下他们之间的优势和缺点。 TDD TDD(Test-driven development…