分类为 ‘前端开发’ 的文章

使用Fiddler提高前端工作效率 (实例篇)

fiddler-title

上一篇(介绍篇)中,我们对Fiddler Web Debugger有了简单的接触,也许你已经开始在用Fiddler进行HTTP相关的调试,在这一篇,我们将通过一个实例了解Fiddler的神奇魔法。

在我们前端开发的日常工作中,发现服务器上某个css/javascript文件有问题,需要修改,那真是家常便饭。通常,我们需要将文件进行修改,然后重新发布再验证,这样就很容易影响到生产环境的稳定性。更普遍的做法是,我们在开发环境中修改文件并验证,然后发布到生产环境。虽然安全,却比较繁琐。而利用Fiddler的可以修改HTTP数据的特性,我们就非常敏捷地基于生产环境修改并验证,确认后再发布。 阅读全文

使用Fiddler提高前端工作效率 (介绍篇)

1. Fiddler 是什么?

Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅。

Fiddler是以代理服务器的方式,监听系统的网络数据流动。运行Fiddler后,就会在本地打开8888端口,网络数据流通过Fiddler进行中转时,我们可以监视HTTP/HTTPS数据流的记录,并加以分析,甚至还可以修改发送和接收的数据。Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具,对前端开发工作很有价值。 阅读全文

jQuery 1.4 Released 新特性官方诠释

一直以来,jQuery是我最喜欢的框架之一。1月14号 1.4 Released版本发布后,就迫不及待去了解了一下1.4版本对比以往1.3.2有什么新特性和改进。其实本文更多的是一篇翻译文章,但感觉还是发成一篇博客,能让更多不愿意看英文的同学了解jQuery。
自半年前发布的1.3.2版本以来,John Resig带领的jQuery团队一直没有大的动作。一方面1.3.2已经算是一个比较完善的版本,作为一款轻量级的框架,jQuery现在要做的已经不是方法的增加和功能的增强,而是要在优化结构提高上下功夫。虽然jQuery UI团队也在孜孜不倦地更新版本,但说实话它真不是一款搭建Web系统的框架,它的UI目前跟Ext这种大腕也有一定的差距。所以,1.4姗姗来迟,但它却从核心上带给了大家惊喜。
阅读全文

模板技术,设计模式和OOP实践心得–个性化list

提示:在firefox浏览将带给你更好的体验

个性化list它的一个特点是采用后台开放的api接口,通过前台配置参数来提取相应的数据,基于CMS系统,达到快速搭建页面的目的。历时两次改版,从数据分析来看,是非常不错的,目前在主推这个,有点欣慰。

先上效果图:gslist

http://view.china.alibaba.com/cms/search/wandie.html
阅读全文

一个兼容多种场合的Javascript图片大小自适应function

在实际应用中,图片自适应大小结合水平垂直居中,是非常常用的手段。今天就图片的自适应这里推荐一个方法,此方法已经通过多种常见场合和各大浏览器兼容性的测试。

阅读全文

UED能为WCAG 做些什么?

  Web Content Accessibility Guidelines(WCAG) 主要目的是实际体验一下网站访问无障碍化、网站亲和力(Accessibility)
主要服务对象是手持移动设备(包括mobile  phone)、屏幕阅读器和残障人士等.
甚至在美国更有具体化的WCAG–  Section 508法案
由于WCAG不是每个网站都那么容易做到,所以即使是Section 508规则的范围也只被限制于联邦部门

WCAG可以理解成是W3C的一个分支,做为前端来支持会有更好的基础,当然部分准则还需要交互,视觉的参与,WCAG不像W3C那样一定要做到,但考虑到受众正在逐年增多,在这样的背景下,我们完全可以花很少的时间,把一些不需要花很大成本准则渐渐加进网站,提高亲和力,何乐而不为呢!
阅读全文

Javascript Selectors 入门篇

Javascript-Selectors

作为前端开发工程师,平时对于Dom的查找遍历和操作是家常便饭。对于优秀的前端来说,也肯定早已有了自己的一套方法来封装这些重复的操作。但是,现在市面上已经有很多成熟的框架已经提供了这么一套封装的方法来极大地方便我们的工作,而且在浏览器兼容及效率上也各有深入的研究了,我们何不来看看这些解决方案是否好用,从来再次提高我们的工作效率呢?这些解决方案,有一个统一的命名:Javascript Selectors

阅读全文

[AS] 异步+Vector版本的JPEG编码器,关键词:效率

业界大牛 Thibault Imbert (bytearray.org) 近日将很常用的JPEGEncoder类用vector类改写了一下,做了一个vector版本的JPG编码类,效率大幅提升。正好,前不久我也已经做了一个vector版本的JPEG编码类,在项目中使用,最近正在整理代码准备分享出来。当然啦,我所做的没有Thibault那么深入,仅仅是把Array换成Vector,所以现在就拿他的版本重新修改了一下,加上了异步功能。

所谓的异步编码,是延时处理代替循环处理。比如写入1000行文字到一个文件内,可以用for/while循环1000次,一次性写入,这就是同步处理;也可以写1行,隔0.5秒再写下一行,再隔0.5秒继续写下一行,这就是异步处理。同步处理的好处是快速,但是对计算机的压力也比较大,在浏览器中使用时,会造成假死,可能会引发稳定性问题。

Vector的效率比Array高了大约4~10倍,但还是不够高,Alchemy或者haxe的效率会更高一些,因为它们使用了Flash10未公开的opcodes接口,可以直接操作一段内存数据。Mateusz Malczakhttp://segfaultlabs.com)做了一个异步Alchemy版的JPEGEncoder,效果很赞,速度比我vector异步版的要快很多,但是缺少了一些自定义参数设置(在压缩小图片的时候,看上去效率反而不如Vector,其实不然,实际上,这是因为程序中写死了大小2800×2800)。Alchemy的C源码修改起来也比较麻烦,要用Alchemy重新编译。而且因为编译了整个libjpeg,所以文件体积也比较大,用C重新写一遍所有相关的类可以解决大小问题,但问题也会更加麻烦。看起来,haxe生成的swc应当是最佳选择,正在考虑有空的时候改写一个。 :)

我将这个几个放在一起,来看一下例子吧!(需要安装Flash Player10)

下载 源文件
下载 带有异步压缩功能的vector版JPEGEncoder

关于 Alchemy 和 Haxe:

Alchemy 是Adobe实验室的一个项目,它的前身是Scott Petersen的“FlaCC (Flash C Compiler)”,目标是让C语言写的类能够被Flash重用。在MAX 2007大会上,Scott凭借Flash中畅玩Doom一鸣惊人。Alchemy可以将C语言代码变成Flash可用的swc文件。这种方式类似于在C语言里面直接执行汇编语言,效率自然提高很多。目前Alchemy还只是测试项目,但是已经开放了SDK下载,可以编译许多常用的C类库。

Haxe 是传奇的 Nicolas Cannasse 创造的语言。Nicolas 发明了大名鼎鼎的MTASC (Motion-Tween Actionscript Compiler),在AS2.0的时代,改变了AS开发的方式,Flash也进入开源时代。进入AS3.0时代后,Nicolas选择了自己创造一种语言,这种语言吸取了Flash的优点,并且在语言和编译器上做了很多优化,使得效率上大幅度提升,这就是Haxe。时至今日,Haxe已经发展为一个丰富、高效的高级语言,也对Actionscript的发展产生了影响,例如Flash10的Vector,就和Haxe的概念和语法非常相似。

Alchemy公开之后,Nicolas 找到了 Flash播放器中留给Alchemy的未公开的接口,通过这些接口,AS可以直接操作一段内存中的数据。Haxe也使用了这些接口,并称之为Flash Memory,借助Alchemy的接口,Haxe的效率也大为提升。

阿里巴巴(中文站)用户体验设计部官方网站

Copyright 2008. All right reserved. Powered by WordPress.