做这个尝试,只为了解决一个问题:如何在网页中读取剪贴板中的图片数据,并在页面中展示或保存到图片服务器。场景可以简单描述为,通过任意屏幕截图工具(QQ、旺旺,PrintScreen键等),截图之后网页中的文本框内粘贴(Ctrl+V、右键等),并在页面中使用图片数据。文字描述比较抽象,我们用一个gif图片来形象的展示一下效果: ClipboardEvent(剪贴板事件) ClipboardEvent 接口描述了与修改剪切板相关的事件,这些事件包括 cut 、copy 和 paste 事件。 先解决一个问题:为什么要说ClipboardEvent? 首 ...
阅读全文 »

进入正题之前,我们先来看看何为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, else clauses, or for loops,这句话明确了Mustache模板的特性,在Mustache模板中不可能出现复杂的条件判断。当然,“不可能”并不等于“不能”,Mustache.js可以通过{{#list}}循环一个列表,也可以用{{#key}}、{{^key}}这样的标签进行简单的条件判断。 虽然,这已经能解决我们日常开发中遇到的大多数问题,但是当我们需要在& ...
阅读全文 »

最近,工作业务有点变化,碰巧遇到一个老生常谈的问题——如何去监听浏览器的“后退”事件。其实,情况是这样的,产品同学希望用户离开页面之前,能展现一个漂亮的弹出层给用户,可以通过这个浮层了解用户离开的原因、或者让用户给应用评分等。 我们知道,浏览器实现了onbeforeunload和onunload事件,onbeforeonload事件是在浏览器即将请求下一个页面(请求还未发出)的时候触发,它可以实现阻止onunload的触发。onunload事件则是浏览器已经将下一个页面请求回来,页面即将&#x ...
阅读全文 »

国庆黄金周已经悄然离去,在假期到来之前微信小应的出现着实引起了不小的反响。虽然目前微信小应用并没有对所有开发者开放,但也有很多开发工程师已经在本地进行了尝试,甚至实战。踩着国庆黄金周的尾巴,我也自己体验了一番——开发微信小应用:你问我答。 新建应用第一步,当然是要安装微信小应用开发软件(微信web开发者工具)。很多人可能感到很熟悉,因为这就是之前微信团队开放的基于微信APP进行移动网页远程调试的工具。最新版中& ...
阅读全文 »

前段时间和一群小伙伴讨论了一个名为《大话前端-从小书签应用说起》的话题。内容是前端开发中极小,乃至已经被一部分前端开发工程师遗忘掉的一部分——书签应用(Bookmarklet)。但是,我们需要明白,台湾虽小但终是中国的一部分,书签虽小,也是前端开发的一部分。技术不分大小,合理使用就能创造价值,用好了就能有所创新。 还是在2012年前后,那时刚步入社会的我对前端充满了好奇,正逢前端开发风生水起。国外各种好的前端开发技术开始进入ԣ ...
阅读全文 »

忙忙碌碌又半年,别人都在做年中总结,回顾上半年点点滴滴的辛酸历程,或辉煌战绩。而我好不容易在时间隧道中捕捉到片刻的闲暇,终于可以做一点自己的事情。最近,其实也是由于项目需要,用Node.js写了一些有助于前端开发的本地小工具,才逐渐意识到Node.js似乎离自己越来越远,于是又想找回与Node.js的那些甜蜜时光。然后,思来想去还是从一个简单的命令行工具开始吧。 为什么做这个尝试?为什么从一个命令行小工具开始?我也曾问自己这个问题。首&# ...
阅读全文 »

首先呢,我要感谢一下和我配合的设计师同学,给了我一份如此漂亮的时间线设计稿。拿到设计稿后,我们首先要做的是去分析整个作品的结构,及设计意图。当然这些工作我们可以提前完成,在设计师设计的时候进行充分沟通,而当我们动手去实现的时候就更为得心应手了。开始之前,我们还是先看看最终的交互效果: 第一步,分析控件结构,说多了反而容易引起误导,直接看图吧,直观明了: 接下来,我来说说我为什么要这么去划分。简单的说&#x ...
阅读全文 »

最近,我遇到一个令人苦恼的问题——如何将XMind做的结构图导出为Excel文件?首先我们来预览一下这张脑图中的一小部分。 本来这实在算不上什么苦恼,打开XMind文件,依次:“文件(F)”——“导出(E)…”——“表格文件”——“Microsoft Excel[Pro]”,然后“下一步”就可以完成这个任务。但是,就是那个“[Pro]”硬生生将这个问题变得无比的复杂。对于一向只用XMind免费功能的我来说,要完成这项Pro版本中才支持的功能,实在是心有余而力不足。虽然只要支付不算太高 ...
阅读全文 »

有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要。 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一 ...
阅读全文 »

多年前,有知名企业前端前辈如是说:前端是做什么的?在一个网页上你看到的就是前端工程师做的。也有人说:前端是设计师在UED最亲密的合作伙伴。很显然,这些概念放之今日都显得太片面。 诚然,让时光倒流几年,回到div+css刚刚统治网页设计前端领域的时代,将设计师制作的设计稿用html+css的形式高质量的还原,并最终呈现给互联网用户,这几乎就是前端工程师的全部。如果还能用Javascript(后简称:JS)给页面增加一些动画或其他交互效果(如:无缝滚动、& ...
阅读全文 »