女王控的博客

预研

21 篇文章

记一次组件打包为链接的实践

需求背景 最近要做一个将第三方聊天库打包为链接,以便于顾客端使用,类似于这个样子 , 以实现将代码嵌入到顾客端网站的 标签之前即可完成部署,开发过程中遇到诸多难点 需求难点 打包工具选型 最容易想到的办法就是沿用公司之前的 webpack 框架,这里升级到了 webpack4(见之前的文章 Webpack 配置笔记 ),考虑到打包后可能会包含一些 webpack 的多余代码,因此不是最优方案。但迫于技术的不成熟以及开发时间的压力,还是把 webpack… »

webpack 配置笔记

webpack4 配置一览 基于 react-boilerplate 技术栈 antd + react + less 不断更新 前端的发展 模块化 模块化是指把一个复杂的系统分解到多个模块以方便编码。 挂载到变量 jQuery 库把它的 API 都放在了 下,在加载完 jQuery 后其他模块再通过 去使用 jQuery 命名空间冲突,两个库可能会使用同一个名称,例如 Zepto 也被放在 下; 无法合理地管理项目的依赖和版本; 无法方便地控制依赖的加载顺序。 CommonJS… »

UI自动化测试疑难点

项目背景 最近帮平台组做 UI 自动化测试,在多次调研下,选定阿里的 macaca 作为技术栈,参考 sample-nodejs ,在模板 macaca-nodejs-boilerplate 的基础下进行 UI 自动化测试的开发 前期准备 因为 UI 自动化测试需要用到 CSS 选择器,为了查找的方便,要在做自动化测试的项目中设置锚点,本人以 属性作为自动化测试的锚点 研究过程以及疑难点 查看报告结果 目标:在 macaca 编译成功输出报告后打开相应的浏览器查看 安装 open… »

基于wavesurfer.js声音波形图的研究

需求背景 最近要做一个声音波形图组件,方便运营人员对声音进行切分,以配合完成人工切分录音的工作 核心思路 利用 ref 属性调用原生方法 解决方案 功能点 点击播放只会在播放区域进行播放,再次点击暂停播放,鼠标右键点击播放区域也可播放 可以添加播放区域,添加时会删除上一个播放区域,按住 shift + 鼠标右键可删除播放区域 可以放大缩小波形图 WaveFormDivider/index.js WaveFormDivider/styles.css 类似实现效果 »

富文本框疑难点处理过程

需求背景 最近要做一个需求类似于富文本框的功能,需要输入带有 span 标签并显示,同时 span 标签是一个整体,只能同时输入同时删除,目前需求只有这一个 html 标签,暂时无其他标签 需求难点 placeholder 提示语 input 和 textarea 能轻松实现 placeholder 提示语的效果,但作用于 contenteditable 的元素,placeholder 不起作用,可以通过 css 的 :empty 解决 获取输入框的内容 可以利用 innerHTML… »

0%