摘要: 功能强大的模板引擎大都需要对模板进行语法解析，会有性能问题。通过把一个大的模板引擎根据不同呈现需求分隔成多个互相独立模板控件，可以降低处理复杂度提供处理性能,可以根据需求灵活组合这些模板控件得到一个可以定制的模板功能库。一个模板控件规定了它的模板语法和js api，这是一个repeater控件的JS实现:<!DOCTYPE html><html><head><meta charset="gb2312" /><title>JavaScript Repeater控件</title></head>阅读全文
posted @ 2012-05-10 16:16 rentj 阅读(106) 评论(0) 编辑
摘要: Pinterest/瀑布流布局一 加载页面时,先页面中对已有元素进行定位。使用对象保存每一列的列高度和列索引如:var column = {index:0, height:0}；使用列数组存放来这些对象。如：var columns = [column1,column2....]；使用cloumns.sort(function(x,y){return x.height - y.height}); 可以找出最短/最长高度的列的索引。元素left= 列索引* 列宽 ； 元素top = 最短一列的高度；二 鼠标滚动到最短一列的底部时动态加载数据。if（文档scrollTop + 视口高度 > 容阅读全文
posted @ 2012-03-26 11:25 rentj 阅读(551) 评论(1) 编辑
摘要: 返回顶部是经常会见到的效果，代码比较简单，使用2个对象和一个主函数。职责明确方便复用。在性能方面考虑了由于连续触发onscroll事件，频繁调用回调函数而产生的性能问题。可以将回调函数缓存一段时候后执行，即当这段时间内多次触发了onscroll事件，但回调函数只会执行一次。<!DOCTYPE html><html><head><meta charset="gb2312" /><title>结合淡入/淡出/减速运动效果实现的返回顶部功能</title><style>.fixed{ positi阅读全文
posted @ 2011-12-31 10:05 rentj 阅读(215) 评论(0) 编辑
摘要: 减少DOM数可以加快浏览器的在解析页面过程中DOM Tree和render tree的构建，从而提高页面性能。为此我们可以把页面中那些首屏渲染不可见的部分HTML暂存在TextArea中，等完成渲染后再处理这部分HTML来达到这个目的。 要把TextArea 中暂存的HTML内容添加到页面中，使用元素的outerHTML属性是最简单方便的了,不过在DOM标准中并没有定义outerHTML，支持的浏览器有IE6+,safari, operal和 Chrome，经测试FF4.0- 中还不支持。所以我们就来实现一个可以跨浏览器的outerHTML。outerHTML 就是获取或设置包含元素标签本身在阅读全文
posted @ 2011-12-28 09:34 rentj 阅读(149) 评论(0) 编辑
摘要: JS只是一门支持面向对象编程的语言，通过OO可以让我们的代码组织更加人性化。可是与传统基与类的面向对编程语言不同它没有类概念并且没成员访问修饰符。这多少会给我们编程工作会带来一些束缚。 其实通俗的讲类就是对象的模板，为了增强JS的OO特性，受mootoos框架启发我们可以使用一个JSON对象来描述这个对象的模板。在这个模板中我们可以模拟实现私有成员，受保护成员，静态成员。 这是一个在JS中模拟的类定义语法，代码中Class是一个自定义函数，它接受两个参数，第一个参数是类名、第二个参数是一个JSON用来一个对象的模板。在这个JSON对象中其中字段 "extend"，,&quo阅读全文
posted @ 2011-12-08 20:42 rentj 阅读(231) 评论(1) 编辑
摘要: 图片减速度滚动,一般用于产品的展示效果。作为前端，互联网上一些常见效果都要尝试去实现，不能因为公司用不到就不做。阅读全文
posted @ 2011-12-06 13:40 rentj 阅读(223) 评论(0) 编辑
摘要: 电子商务网站经常用到简单模仿一下,用得着的点击"html"选项卡可以复制源码当鼠标移动到缩略小图上时，在它上面显示半透明的放大蒙板并计算其位置，移开时隐藏半透明的放大蒙板 鼠标指针移动到放大蒙板的中心才会开始移动蒙板，半透明蒙版位置计算：鼠标指针当前位置 - 图片的位置 - 蒙版的宽度/2。 根据比例计算出大图的偏移演示代码View Code <!DOCTYPE html><html><head><meta charset="gb2312" /><title>放大镜</title>&阅读全文
posted @ 2011-12-05 10:37 rentj 阅读(307) 评论(1) 编辑
摘要: 有效的团队协作开发，可以提高工作效率。但在实际的协作开发中情况并非总是这样一帆风顺，最常见的一种情况是当大家都完成各自负责的部分后需要进行集成时往往会让我们大费周章。如过您也有类似烦恼，下面是我对如何改善这一状况的思考，欢迎探讨交流。一 模块化模块化概念：和模块化相关的一个概念就是样式作用域，作用域是模块化基本条件。样式作用域是一条样式规则可以影响的范围，在不同样式作用域中的同名.class可以互不影响。CSS模块就是把一些相关的样式定义同一个样式作用域中。模块化优点：模块化可以方便复用模块代码，可以减少复制黏贴产生重复代码，重复的代码不仅增加代码的可维护性同时也会增加文件尺寸，导致样式加载时阅读全文
posted @ 2011-11-30 09:44 rentj 阅读(209) 评论(0) 编辑
摘要: 网站性能优化中首要的一条就是要减少HTTP请求，那么为要减少HTTP请求呢？其实有些HTTP分析工具可以帮我们了解当浏览器请求一个资源时大致需要经历的哪些过程。1 域名解析(DNS Lookup): 这个没什么好说的就是把域名解析到指定IP地址的服务器所需要的时间。2 创建连接(connection)： 创建一个Tcp 连接到服务器或代理服务器所需要的时间，如使用的是https链接这个时间还包括SSH握手过程。通常在HTTP头中使用keep-alive 连接以避免重复连接到web 服务器的开销。3 发送请求(Send): 发送HTTP请求消息到服务器所需的时间，所需时间取决于发送到服...阅读全文
posted @ 2011-10-28 20:13 rentj 阅读(1650) 评论(0) 编辑
摘要: 相对于实现需求来说代码的发布部署工作是一项重复的体力劳动，如：代码的压缩、资源URL的替换、资源文件在多台服务器上的同步工作、重启相应Windows服务。对于每次发布部署来说这都是一个固定的流程。显然我们对代码部署这种重复的体力劳动比较不感兴趣，对于实现新需求有更高的积极性。另外作为做程序员，我们这类典型的脑力劳动者除了实现工作中业务需求外，我们也应该要充分利用自身优势，尽可能的通过程序代码来自动化那些可有计算机完成的体力工作。 在这篇博客中介绍了我为改善工作中的代码部署流程，使用WSH、Javascript和Bat实现的一个自动化构建工具。WSH是windows宿主的脚本技术，宿主指的是脚.阅读全文
posted @ 2011-05-27 22:57 rentj 阅读(983) 评论(0) 编辑
