最近的文章列表

前端web开发的MVC模式 - 从一个简单实例讲起
MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序;view为发送给客服端的内容;control为servlet程序控制跳转和工作流。 随着前端Ajax兴起、前端开发工作进一步划分:js程序员和ue页面制作、另外从整个前端项目的清晰明朗以可扩展性角度来看,MVC的应用也越来越必要,特别是对大的项目。 例如 需要给一个页面上的button注册一个onclick事件。 1、我们可以有如下最简洁的写法:(view和model control完全混合)<HTML><HEAD><TITLE> example </TITLE></HEAD><BODY
2011/11/10 Comments:
Flash真的适合做网站应用吗?
两年前,我们开发了一套基于Flash的文件(主要是图片)上传RIA应用,提供给阿里巴巴的用户使用。如果你使用过Wordpress或flickr上传图片,你应该已经用过类似的产品。这个程序基于YUI Uploader开发,增加了一个实用的功能在客户端先将图片缩小,再上传到服务器。用户用数码相机拍摄的照片往往有600万以上的像素,但产品图片放到阿里巴巴网站上显示,并不需要这么大的像素,通常等比例缩小到1024&times;1024之内就可以了。借助于Flash对图片先缩小再上传的技术,我们在没有增加服务器投入的情况下,将原先上传图片的尺寸限制由250KB/张提升到了5MB/张。同时,Flash上传还比传统HTML表单方式上传有更好的体验,例如可以多选一批文件同时上传、可以实时展示上传进度
2011/11/10 Comments:
使用Fiddler提高前端工作效率 (实例篇)
在上一篇(介绍篇)中,我们对Fiddler Web Debugger有了简单的接触,也许你已经开始在用Fiddler进行HTTP相关的调试,在这一篇,我们将通过一个实例了解Fiddler的神奇魔法。在我们前端开发的日常工作中,发现服务器上某个css/javascript文件有问题,需要修改,那真是家常便饭。通常,我们需要将文件进行修改,然后重新发布再验证,这样就很容易影响到生产环境的稳定性。更普遍的做法是,我们在开发环境中修改文件并验证,然后发布到生产环境。虽然安全,却比较繁琐。而利用Fiddler的可以修改HTTP数据的特性,我们就非常敏捷地基于生产环境修改验证发布。假设我们发现这个页面有问题,需要修改所引用的js文件(http://www.aliued.cn/wp-includes/js
2011/11/10 Comments:
改进自己的JavaScript脚本性能
改进自己的JavaScript脚本性能语言层次方面循环 循环是很常用的一个控制结构,大部分东西要依靠它来完成,在JavaScript中,我们可以使用for(;;),while(),for(in) 三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以就应该尽量少用。for(;;)和while循环的性能应该说 基本(平时使用时)等价。 而事实上,如何使用这两个循环,则有很大讲究。我得出的结论是: 如果是循环变量递增或递减,不要单独对循环变量赋值,应该在它最后一次读取的时候使用嵌套的++或操作符。 如果要与数组的长度作比较,应该事先把数组的length属性放入一个局部变量中,减少查询次数。 局部变量和全局变量 局部变
2011/11/10 Comments:
HTTP页面的优化,JS,IIS连接数,代码 前端开发优化
本文是针对网页设计师(WEB前端工程师)的,不涉及程序以及系统。一、基于减少HTTP连接数的优化像刚才这篇文章,就是基于减少并发HTTP连接数的优化。由于IE每次在一个域上并发连接数默认为8个,这意味着超过8个文件的时候,需要等待前8个文件之一传输结束。我们可以:1、将图片,尤其是大图片放到另外一个域名中。大站可以用另一个服务器来专门用于图片的传输。对于虚拟主机可以绑定另外一个域名。这在大网站中很常见。2、合并CSS和JS文件。以及在可能的时候合并图片。3、预加载技术。最近很常见的,就是先用js显示缩略图,然后setTimeout延时加载大图片。二、基于减少体积的优化减少体积意味着减少带宽,能够很直接地减少硬件与带宽的开支。由于网站每日接待成千上万的访客,就是一个字节的优化也可以带来显著的效
2011/11/10 Comments:
十条js优化原则

定义局部变量。对于当前函数作用域内,如果需要使用这个作用域外部的一些变量,那么就尽量使用局部变量储存外部的变量吧,特别是对于嵌套多级的作 用域查询,这个耗时也是比较严重的。还有就是获取DOM节点、NodeList、HTMLCollection等等,可以将NodeList、 HTMLCollection转化为数组的形式进行操作,减少DOM即时更新所造成的性能消耗。不要使用with语句。with语句会在当前作用域下面增加作用域链,造成当前作用域下面变量的遍历性能消耗更大。对于闭包的使用,节省点,不要太过多了。闭包就是提供一个所谓的封闭式的作用域,只允许向包含它向别人访问,而不允许别人访问它。但是声明一个闭包的代价比声明普通的函数的代价是要更高的,况且还有IE下内存泄漏的危险。获取字面量对象的属性

2011/11/9 Comments:
document.write()和document.writeln()的区别

解决思路: 两者都是JavaScript向客户端输出的方法,对比可知写法上的差别是一个ln--line的简写,换言之,writeln 方法是以行输出的,相当于在?winte?输出后加上一个换行符。 注意:document.write方法可以用在两方面:在网页载入过程中用实时脚本创建网页内容以及用延时脚本创建本窗口或新窗口的内容.该方法需要一个字符串参数,它是写到窗口或框架中的HTML内容.该字符串参数可以是变量或值为字符串的表达式,写入内容常常包含HTML标记.记住,载入网页后,浏览器输出流将自动关闭.在些之后任何一个对当前网页的document.write()方法都将打开一个新的输出流,它将清除当前网页输出内容(包括源文档中的任何变是和值).因此,如果希望用脚本生成的HTML内容替换当前网

2011/11/9 Comments:
web前端优化之动态加载
网站最近搞了次优化,效果比较明显,以前不敢用的动态加载(我自己起得,洋名叫lazy load,这样翻译应该也算得体,延迟加载也说得过去..)终于派上了用场.总的来说是这样的:页面加载时不会初始化的脚本不引用,不显示的ui用的样式不加载.用户交互用到时加载.除用户可视区域外的图片不加载,用户有滚屏操作时加载.具体实现:1 . 实现js和css的动态加载适用 : 页面的pv较高,功能模块较多,每次刷新页面都需要重复解析和渲染.缺点 : 用户从点击一个按钮到函数响应,中间会有静态的下载和解析的一段延迟(有客户端缓存会好的多)优化 : 为了尽量让用户感觉不到延迟,我们在登录页面预载的一些经常用到的脚本(由于网站的更新周期固定,所以脚本仅会在更新当天预载)实现 :XN.dynamicLoad({fil
2011/11/9 Comments:
JavaScript优化方案二
JS优化已经讨论了很多了,最近又看到aimingoo的一篇。大体上,aimingoo的说法都是非常正确的。 除了像aimingoo做个案研究外,这里我想从更一般的角度总结在浏览器编程中JS优化的几个原则。 首先,与其他语言不同,JS的效率很大程度是取决于JS engine的效率。除了引擎实现的优劣外,引擎自己也会为一些特殊的代码模式采取一些优化的策略。例如FF、Opera和Safari的JS引擎,都对字符串的拼接运算(+)做了特别优化。显然,要获得最大效率,就必须要了解引擎的脾气,尽量迎合引擎的口味。所以对于不同的引擎,所作的优化极有可能是背道而驰的。 而如果做跨浏览器的web编程,则最大的问题是在于IE6(JScript 5.6)!因为在不打hotfix的情况下,JScript引擎的垃圾回
2011/11/8 Comments:
JavaScript优化方案一
作为一名网站开发WEB前端工程师,对自己开发的网站项目应该尽可能地对其性能进行优化,现在互联网上搜索到的网站性能优化多是翻译转载自Yahoo14条或34条。Yahoo的优化建议关注在大的方面,下面,W3C Group为大家呈现WEB前端开发高性能优化部分之JavaScript的优化细节!一、避免出现脚本失控不论什么脚本,在任何时间、任何浏览器上执行,都不应该超过100毫秒。如果实际执行的时间长于这个底限,一定要将进程分解成若干更小的代码段。脚本失控基本上有以下四个方面的原因:1. 在循环中执行了太多的操作解决这个问题的诀窍就是用下面这两个问题来评估每个循环:这个循环必须要同步执行么?循环里面的数据,必须要按顺序执行么?如果1和2都可以否定,那么建议使用setTimeout方式将循环体切分成小
2011/11/7 Comments: