刘钢的博客 – 我是UED

前后端分离的开发模式，原本觉得没什么稀奇的玩艺，在最近参与的一个大型项目中，让我有了更深的理解。

前后端分离的开发模式：系统分析阶段，系分和前端开发人员约定好页面上所需的逻辑变量，进入功能开发阶段，前端开发人员进行前台页面结构，样式，行为层的代码编写，并根据约定好的变量，逻辑规则，完成不同情况展示不同的表现。而后端开发人员，只需要按照约定，赋予这些变量含义，并提供前后端交互所需要的数据即可。

阅读全文…

近来jQuery的发展简直是风光无限，各方赞誉之声是此起彼伏，先是放出了微软、 nokia的重磅利好消息，然后是使用了jQuery的各大知名网站名单，现在又开始在css框架领域建立起了她的新帝国。相比一起诞生的其它js框架已 经是不可同日而语了，非常敬佩jQuery团队的运营能力，将一件事从无到有，从有到卓越，从出书到孜孜不倦的发表技术文章，一切都演变得那么自然，仿佛 是一本营销学的教科书。 阅读全文…

在做AJAX应用开发的时候，我们通常喜欢把服务器端返回的JSON格式字符串在客户端的回调函数中把它作为JavaScript代码执行并用一个变量保存起来，以方便使用返回的数据。通常的做法就是var jsonData = eval(xmlHttp.responseText)。这看起来似乎一切都是正确的，但当你运行代码的时候，你会发现报“invalid labe”错误了。为什么？我也不清楚，但我找到了解决这个问题的方法。
阅读全文…

写任何编程代码，不同的开发者都会有不同的见解。但参考一下总是好的，下面是来自 Javascript Toolbox 发布的 14条最佳JS代码编写技巧 ，Sofish翻译(1,2)。

1. 总是使用 ‘var’

在JavaScript中，变量不是全局范围的就是函数范围的，使用”var”关键词将是保持变量简洁明了的关键。当声明一个或者是全局或者是函数级（function-level）的变量，需总是前置”var”关键词，下面的例子将强调不这样做潜在的问题。

不使用 Var 造成的问题
阅读全文…

首先说明下范围

1. 用Javascript来开发WEB页面的动画效果
2. 该思路同时考虑页面效率、SEO，如果数据大，也可以缓解后端压力。
3. 这个是程序设计思路
4. 还谈不上思想，只是自己实践使用过的一个方法

我们经常看到网页上有各种各样的动画，例如下图

有N条记录，需要在页面上滚动显示，并且需要循环。

我们先假设一下条件

1. 这些记录都需要被搜索引擎收录
2. 直接对页面元素做动画有困难（这里可能比较简单，但是困难的情况还是很多的）
3. 信息需要循环显示
4. 数据比较多，N条

这个时候出现问题

1. 数据必须是HTML标签，不能直接写入JS
2. 直接对页面元素控制，并做动画有难度。由于要循环，得拆分子元素
3. 数据比较多，控制子元素会出现效率问题

第一个问题呢，我们这么做，让HTML载入，然后用JS来读取HTML信息作为数据控制。这个应该比较简单的。

第二个问题怎么搞呢，我们在读完数据之后，再搞出一个代理层来，比如叫A层。那么A层仅仅是提供显示，JS控制这个层来做动画。每次动画的时候呢把新的数据填进去，再做动画。

第三个问题迎刃而解，控制A层就OK了。

Y方案：具体看看流程吧：（我把JS读取数据的步骤省略不说了，这个相信大家都知道怎么搞）

第一步，元素的层次结构：

 A层  z-index:2;————   隐藏  //负责动画
真层 z-index:1;————  显示  //给爬虫看，且负责显示的当前信息

第二步动画：完成后返回第一步既可。

A层填入数据–》显示–》动画 
动画结束之后，B层直接设置坐标，到标准位置
A层隐藏。

上面这样做的理由是，填数据的过程，是会造成页面抖动的，所以我们把这个过程隐藏的来完成。

 更升级的问题，如果真层直接设置坐标也比较困难，怎么办？那么就再搞个B层出来

X方案： 

A层  z-index:3;————   隐藏 //负责动画
 B层  z-index:2;————   显示 //只显示当前信息
真层 z-index:1;————  隐藏 //仅仅给爬虫看，以及读取数据用，之后不再显示

动画的时候，A填入数据–》A显示–》A动画–》B填入数据–》A隐藏

再升级下问题：如果数据实在太多，没法一次用HTML载入完成，怎么办？那么用AJAX来搞吧，具体做法和上面一样

从具体到抽象：设计的思路是数据和表现分离。
给用户看的其实是一个JS创建出来的层，不断的更新数据，不断的隐藏显示来造成假象，然后做动画。

注意的问题：如果每个item中，图片比较多，可能会浪费浏览器的渲染时间和增加HTTP请求。适合用Y方案。如果数据需要异步，且比较难控制坐标的时候，那么适合用X方案。