雨夜带刀's Blog

2013年度总结

忙碌的一年过去了,马上又要迎来同样忙碌的新年。在北京,加入了新的团队,认识了新的人,接触到新的事物,工作节奏比在上海明显要快,挺怀念上海的。

1.

展望马上过去的2013年,专业技术上正如前几天开团队总结会说的那样,并没有什么突飞猛进,一直在忙于实际项目的开发和打磨,纯技术性的研究反倒少了。不过眼界确实更开阔了,能更多的去思考产品本身,而不是局限于技术,期间有段时间还逢人便说自己是啥都干的打杂的。

刚加入360搜索团队时,图片搜索还刚刚起步,项目还显得有点简陋和粗糙。经过一年的努力,360的图片搜索与主要的竞品–百度图片搜索在功能上已是处于同一个量级了,在体验上,有些地方超越百度毫无压力。从最开始我们向百度学习,到现在百度在有些方面要反过来向我们学习。这期间,有人离开,也有人加入,大部分时间内,只有我一个前端,而百度的图片搜索前端团队有十来号人,对比下来,还是略有点成就感的。但我心里清楚,这其实还远远不够的,虽说人往往会否定掉自己的努力,但也正因为不满于现状,才能有继续前进的动力。

浅谈浏览器的原生拖拽事件

虽然之前有写过模拟浏览器拖拽行为的组件,但这种拖拽仅限于改变 DOM 元素的位置,只是 UI 层面的交互效果。最近在做的拖拽上传文件,拖拽时需要和服务端进行数据层面的交互,此时就需要用到浏览器原生的拖拽事件。

在高级浏览器中,DOM 元素都有一个 draggable 属性,用于标记其是否可以在浏览器中拖拽,常见的 a 、img 元素的 draggable 默认值为 true,浏览器默认其是可以拖拽的,而其他的布局元素如 div、p 这些默认并不支持拖拽,所以值是 false,如果想让其可以拖动,需要先将其设置成 true。

再来看看原生的拖拽相关的事件类型:

  • drag : 元素被拖拽时由拖拽元素频繁触发的事件(每隔几百毫秒就会触发一次)
  • dragstart : 拖拽时开始时由拖拽元素触发的事件
  • dragend : 拖拽结束时触发由拖拽元素的事件
  • dragover : 当拖拽元素进入放置区域时由放置元素频繁触发的事件(每隔几百毫秒就会触发一次)
  • dragenter : 当拖拽元素进入放置区域时由放置元素触发的事件
  • dragleave : 当拖拽元素离开放置区域时由放置元素触发的事件
  • drop : 当拖拽元素在放置区域放置时由放置元素触发的事件

浏览器缩放的检测

很多 WEB 开发者可能都会碰到这种头痛的问题,就是当用户对页面进行缩小或放大时,原本好好的布局就被破坏了。如果让网页支持自适应的缩小和放大布局,对于开发者来说是一个不小的挑战。

在我看来如果用户有意识的去对网页进行缩放,那么就应该知道缩放会破坏布局。还有很多用户其实压根不知道自己是何时对网页进行了缩放,此时就需要提醒用户应该将浏览器的缩放级别重置成默认的比例。

说到浏览器的缩放检测,可能有好几种方法都可以实现,从检测 CSS 样式到检测 Flash 的尺寸,可以说是各显神通,但我都觉得有点麻烦。其实还有更简便的方法的,当然各个浏览器的检测方法又有不同,对于 IE6,就直接无视了,因为 IE6 只能对文本进行缩放。

先来说说浏览器提供的标准检测接口,window.devicePixelRatio 是设备上物理像素和设备独立像素的比例,该属性就可以用于检测网页是否被缩放了。在普通的 PC 浏览器上,在默认无缩放的情况下其默认值是 1。可惜这么方便的属性目前只有 Firefox 支持。

利用 clipboardData 在网页中实现截屏粘贴的功能

见某网站的输入框支持截屏粘贴的功能,觉得有点意思,于是将代码扒出来分享下。

可惜,目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴( IE11没测试过 ),当然这种增强型的用户体验功能有总比没有好。

输入框的结构代码:

<input type="text" id="testInput" />

为输入框绑定粘贴事件:

var input = document.getElementById( 'testInput' );

input.addEventListener( 'paste', function( event ){
    // dosomething...
});

未来不迎,当下不杂,既往不恋,读《当下的力量》

多年前,我就一直有这种困惑,明明在做着一件事,但总是会去想一些跟事情本身毫不相干的其他事。大多数情况下都是无意识的,这种漫无目的思考还停止不了,吃饭、走路、打扫房间,甚至是睡觉,只要是和工作无关( 因为工作时要保持注意力的高度集中 )就会出现这种“思考强迫症”。当时认为,这对于一个正常人来说是很正常的事,可能正是因为有了思考才证明“我”存在于这个世界上,笛卡尔不是说,我思故我在吗?虽然是有些困惑,但是还没有怀疑过。

据说人的一天平均会产生6万个念头,有些念头是稍纵即逝的,有些念头会让你去忍不住思考,这些念头在耗费着脑力,让人觉得很累。就像一台电脑,在系统初装的那一刻,运转速度挺快的,随着应用程序越装越多,垃圾越来越多,电脑的运转速度就慢了下来。

头像

雨夜带刀

主要折腾前端
现居北京

第 7 页,共 18 页« 最新...56789...最旧 »