前几天在知道上偶然看到一个问题——“如何去除一段HTML字符串中的已知图片名称的图片标签”,一时心血来潮,就使用JS正则表达式简单写了个答案。 1234var domStr = '<div class="bac">测试文字</div><div class="def"><img src="../../../已知图片名称.jpg">这里还可以加点文本做干扰</div>';var regImg = /<img\s+([\s\S]*?)src=("|')(.*?)已知图片名称\.(jpg|png|gif)(.*?)\2[^>]*>/g;var rs = domStr.match(regImg);console.log(rs); // ["<img src="../../../已知图片名称.jpg">"] 首先,解答这个问题,使用正则表达式并不是唯一的选择。只是我觉得这个问题,使用正则表达式来处理,可能更简单 ...
阅读全文 »

最近在工作上遇到一个使用自定义编辑器的需求。虽然市面上有很多优秀的开源或非开源的富文本编辑器可供选择,诸如:UEditor、CKEditor,以及随React而生的Draft-js等。但是结合项目中的使用场景——只需要支持文本内容输入、插入表情、插入图片、提到(Mention)功能以及指定代码块即可,通过调研后综合比较得出以下结论:UEditor、CKEditor都比较重量,使用在该场景完全是大材小用,投入产出不成正比;唯一可以基本支持该需求的就只有基于Draft-js进行二次开发,理由如下图: 首先,draft-js足够底层,轻量。其次,有现成的Mention、Emoji、Image插件可以支持大部分业务需求。 但是,通过深度调研后发现Draft-js并不能完全满足我们的需要,例如: Mention插件并不支持输入输出结构的定制,使用不够灵活 插入自定义代码块功能需要不小的二次开发成本 Draft-js为React而生,前端技术发展极快,后续底层技术栈如果需要升级,此处将是一个大坑 ...
阅读全文 »

现如今,微信已经成为绝大部分年轻人,甚至中老年人生活中一个不可或缺的元素。而经常使用微信的我们一定知道,就在前不久微信增加了一个可以将阅读中的文章最小化为一个浮窗按钮的功能。 今天,我就来和大家一起聊一聊我所读到的这个浮窗按钮背后的那些设计思想。 首先,我们先来考虑考虑,微信为什么要提供这么一个功能?以我个人的情况为例,作为一个上班族,每天用于阅读的时间非常有限,不外乎每天上下班乘车途中,休息用餐期间,或者抽烟蹲坑等。然而谁也不能保证在这些时间里刚巧能将一篇精致的文章阅读完,更关键的是,微信作为一个社交聊天工具,频繁的收到消息是正常现象。此时,矛盾便产生了——退出去回复消息吧,文章没了,再次阅读得从公众号里翻半天,繁琐而浪费时间;不回复吧,显得不礼貌不说,更可能使得一些紧急问题得不到及时的处理。那么,这时候有了小浮窗这么一个功能,以上问题迎刃而解。 其次,我们来说一说将文章收缩为一个小浮窗按钮的触发区域为什么是右下角?这个我想只要经常使用触屏手机的人稍微动动脑子就能想到,立足于大部分人 ...
阅读全文 »

近年来,Hybrid App对于绝大部分开发者来说已经不是什么新的东西。各类Hybrid App开发框架也是如雨后春笋般破土而出。最早进入广大开发者视野的应该是PhoneGap,也叫Cordova,随即而来的还有AppCan、Titanium等等。但是使用框架一方面不方便使用者了解Hybrid的实现原理,另一方面,框架往往会给项目带来一些附加的问题,比如降低性能、代码冗余等等。最近,我本着亦学亦用的态度,也开始加入Hybrid App开发的行列,通过本文跟大家分享一下在无框架环境下,作为Web前端,我如何与移动端的同事一起进行Hybrid App开发。 Hybrid App 如何工作简单的说,Hybrid App就是由Native App提供容器(UIWebView / WKWebView),承载Web(H5)页面。Native与H5之间通过JS调Native接口或Native调JS方法进行通信,完成一系列交互。 Hybrid App 因何而生在Hybrid App出现之前,原生的Nat ...
阅读全文 »

一个基于jQuery的气泡动画插件,在指定区域上方(左/右)定时间隔产生气泡,然后随机水平速度进行仿自由落体运动。到达区域底部之后做弹跳运动,速度逐渐衰减。直至停止运动。 在线演示 安装方法由于是基于jQuery的扩展插件,因此引入jQuery是必须的。此外,还需引入插件自身的实现脚本。 12<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script src="../js/jquery.bubble.min.js"></script> 在此之前,我们还需要引入样式依赖文件jquery.bubble.min.css,主要包含气泡自身基础样式。 1<link rel="stylesheet" href="../css/jquery.bubble.min.css"> 使用示例插件会在指定的元素范围内运行,如果找不到指定的元素,插件将以body ...
阅读全文 »

仿微信表情雨效果插件。在微信中发送“么么哒”、“想你了”、“恭喜发财”、“生日快乐”等关键字,屏幕上会下一小段时间的表情雨。本插件实现了下表情雨的效果,并且还进行了扩展,支持多表情的表情雨。实际效果请看: 在线演示 源码下载 安装方法由于是基于jQuery的扩展插件,因此引入jQuery是必须的。此外,还需引入插件自身的实现脚本。 12<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script src="../js/jquery.rain.min.js"></script> 使用示例插件会在指定的元素范围内运行,如果找不到指定的元素,插件将以body元素作为容器。 12345678910111213141516$(function() { $('body').rain({ // 使用哪个/组图标,可选值 sta ...
阅读全文 »

做这个尝试,只为了解决一个问题:如何在网页中读取剪贴板中的图片数据,并在页面中展示或保存到图片服务器。场景可以简单描述为,通过任意屏幕截图工具(QQ、旺旺,PrintScreen键等),截图之后网页中的文本框内粘贴(Ctrl+V、右键等),并在页面中使用图片数据。文字描述比较抽象,我们用一个gif图片来形象的展示一下效果: ClipboardEvent(剪贴板事件) ClipboardEvent 接口描述了与修改剪切板相关的事件,这些事件包括 cut 、copy 和 paste 事件。 先解决一个问题:为什么要说ClipboardEvent? 首先,无论是截图还是在网页中“复制图片”,最终都是将图片数据存储到了系统剪贴板中。其次,当执行“粘贴”操作的时候是将剪贴板中的数据读出来使用,而读取剪贴板中的图片(文件)数据,更需要直接使用paste事件完成。 第二个问题:为什么要在文本框中“粘贴”,是必须的吗? 先从paste事件来说,经测试paste事件可以绑定到任意HTML元素上的,并非 ...
阅读全文 »

进入正题之前,我们先来看看何为Mustache.js。在Github上的说明如下: Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object. We call it “logic-less” because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values. no if statements ...
阅读全文 »

最近,工作业务有点变化,碰巧遇到一个老生常谈的问题——如何去监听浏览器的“后退”事件。其实,情况是这样的,产品同学希望用户离开页面之前,能展现一个漂亮的弹出层给用户,可以通过这个浮层了解用户离开的原因、或者让用户给应用评分等。 我们知道,浏览器实现了onbeforeunload和onunload事件,onbeforeonload事件是在浏览器即将请求下一个页面(请求还未发出)的时候触发,它可以实现阻止onunload的触发。onunload事件则是浏览器已经将下一个页面请求回来,页面即将跳转的时候触发,该事件无法中断。看起来onbeforeunload事件似乎能满足我们的需求,但是,这只是一个假象。 onbeforeunload事件虽然能阻止onunload事件的触发,但是由于它是浏览器内置的事件,其出现的交互方式和UI界面,均由浏览器厂商控制,并未提供给开发者定义浮层内部内容更多交互的接口,甚至文本性质的提示内容也无法设置样式。所以,想要通过onbeforeunload事件提供的浮层实 ...
阅读全文 »

国庆黄金周已经悄然离去,在假期到来之前微信小应的出现着实引起了不小的反响。虽然目前微信小应用并没有对所有开发者开放,但也有很多开发工程师已经在本地进行了尝试,甚至实战。踩着国庆黄金周的尾巴,我也自己体验了一番——开发微信小应用:你问我答。 新建应用第一步,当然是要安装微信小应用开发软件(微信web开发者工具)。很多人可能感到很熟悉,因为这就是之前微信团队开放的基于微信APP进行移动网页远程调试的工具。最新版中改成了小应用开发工具,我们可以前往官方网站下载最新版(目前是v0.9.092300)。你还可以在该网站查看有关微信小应用的更多信息,如图所示: 第二步,启动开发工具,创建新应用。由于是第一次创建项目,所以工具启动界面很简单,根据界面提示点击“添加项目”会进入到项目基本信息填写界面。这里需要注意的是,也许是由于目前微信小应用开发并没有向所有开发者开放,从公众号中查看到的appKey并不能正常使用,所以我们在“AppID”栏选择“无AppID”。“项目名称”栏没有特殊要求,根据你自己的 ...
阅读全文 »