zz78_gang

如果有这样一个站点，从技术角度，你能打几分（满分10分，限从技术角度）

zz78_gang — Tue, 03 Jun 2008 22:17:12 +0800

作者: zz78_gang 链接：http://zz78-gang.javaeye.com/blog/199901 发表时间: 2008年06月03日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

站点：城市在线 http://www.city366.com/

最终实现效果：

客户端
1.兼容所有浏览器
2.整个网站所有功能全部在一个页面实现
3.完全的 Ajax
4.div + css 布局
5.几乎不手写任何 html 代码，所有的对象通过js动态维护
6.完全 js oo 编程，后台代码的任何 class，前台均会有一个js class与其对应
7.即便数据库完全坏死，毫不影响网站的正常浏览（读取功能不影响）

多级缓存
1.Sql 数据库存储（这行当我没说）
2.第一级，文件级别缓存
数据正常存储在数据库，如果每次打开页面，都通过即时检索数据库，会带来如下问题，第一，检索速度，随着数据的增加而减慢，第二，因为母表，字表的关联查询，数据量大的时候，检索速度会进一步减慢，第三，检索到数据后，需要在内存在对数据进行整理打包。
解决方法：将所有的数据，均通过 xml 文件缓存在硬盘上，将所有数据放置在一个，或者几个 xml 文件中不现实，xml 缓存样例：CityId_Categoryid_SubCategoryId.xml
3.第二级，内存缓存
虽然第一级，避免了每次浏览内容检索数据库，但第一级毕竟也是对硬盘的操作，硬盘技术至今仍然是 PC 最弱的一个环节，硬盘的读取速度，与内存相比，相差数量级。所以，将所有数据通过 hash 的形式，存储在内存中，将会对系统的浏览速度，有极大的提高。
4.第三级，客户端缓存（终极缓存）
即便通过第二级，脱离了硬盘操作，但是，即便每次请求同样的数据，仍然需要进行服务器，客户端的交互。如果可以实现将所有浏览过的数据，直接缓存在客户端，那对减少网络带宽，降低服务器的负载，都是一个极大的提升。
实现方法：通过浏览器的对象，直接缓存在浏览器中。
预览方法：点击任何一个菜单，或者条目，您会发现，右上角会出现“加载中，请稍候...”的字样，如果第二次打开您浏览过的对象，您会发现，右上角的提示不会再出现了，因为您所有浏览过的信息，均已经缓存在了客户端浏览器中。

服务器端
1.常用的多层架构（这行是废话），OO编程等等...
2.服务器端的东西，好像实在没啥好写的，都是些最基本的东西，就此跳过

这个网站是自己突发奇想，想一点，写一点，写着玩的，没想到一步步的就这么实现了，后来在公司的项目 http://www.backofmyhand.com/ 再次重用了一下，感觉不错，有一次公司的数据库 down 掉了，网站正常浏览，心情相当不错，呵呵...

如果大家有一些建议，请给我反馈，我也想继续探索...没事找事...

已有 0 人发表留言，猛击->>这里<<-参与讨论

JavaEye推荐

怎样使用Ajax 简化我们的分层设计

zz78_gang — Tue, 07 Aug 2007 19:40:49 +0800

作者: zz78_gang 链接：http://zz78-gang.javaeye.com/blog/109801 发表时间: 2007年08月07日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

不打算写太长,只写一个方面:简化我们的分层设计，反馈好的话，接着写...

正常情况下,我们的系统分为 entity dataaccess business ui 四层,这个我就不罗嗦了.

考虑如下常见情况(举个最简单的例子)
比如有两张表: User, Experience. Experience 有一个外键,指向User

考虑没有Ajax的情况，要实现这样一个简单的页面：某个User的详细信息页面，页面需要同时列出 User信息，及这个User的 Experience信息。

正常情况，我们实现此页面的逻辑为：
数据库存储过程级别：使用表之间的 Join 方式，输出 User + Experience 的复合信息。
Entity Layer：将数据库返回来的数据，分解，分别映射到某个 User 及 Experience 集合。
Business Layer : 组合两种类型的 Object 返回给页面
UI Layer: 页面读取数据...

说明：我写的这是比较通用的方式，自然有很多其他实现方式，但是，不管怎样，必然会涉及同样一次操作涉及多种对象，导致服务器端要花很多时间处理这些对象之间的关系。如上的例子，只涉及到 2 张表，1 个级别的关联，如果实际情况超过 2 张表，超过 1 个级别呢？...

合理应用 Ajax，我们可以完全避免此类情况的出现，任何原子性的操作，只涉及到一种对象
还是对上面的例子：某个User的详细信息页面，页面需要同时列出 User信息，及这个User的 Experience信息。

应用Ajax我们可以怎么做呢？
首先直接输出 User 的详细信息，页面获取 User 的id 之后，再 Ajax 请求其 Experience 信息。
这个过程，相信大家对比一下，很轻松就可以发现如下几个优点：
1. 整个过程不需要浪费服务器资源处理对象之间的关系
2. 每次请求，只涉及一个类型的对象
3. 无论涉及多少张表，及多少张表之间的关联，通过这种方式，均特别容易实现
4. 任何 layer 的设计，只需要正对一种对象的（增，删，改，查...)。
5........

最近写了三个站点，按时间先后：
1. 自己的站点：http://www.city366.com/ 纯 Ajax 网站，整个网站只有一个页面（site map 除外，那不是给人用的，是为SEO做的).如果你打开source code，可以发现，几乎没有任何 html 代码，全部通过js创建 html objects.

2. 公司的项目：http://www.backofmyhand.com/ ,也是纯 Ajax 功能站点。写了很多控件 scroll bar , 100行js代码+ css 实现的一棵 tree...，四个级别的缓存 DB-->XML-->Cache-->Client ......

3. 自己的站点（还没做完）: http://inn.city366.com/本来是打算借这个项目尝试 SAAS 的，推广了一段时间后发现，国内的用户至少5年后才会认识SAAS，使用SAAS不知道要到猴年马月，尝试基本宣告失败。
站点3，也写了自己写了个日历，尝试了很多新的东西，另外 http://inn.city366.com/housedetail.aspx?houseid=1 这个页面，实现了如上的事例（先显示房子信息，然后 Ajax 调用订单，反映在右侧的日历上）

谢天谢地，不知不觉也罗嗦了一大堆...

已有 2 人发表留言，猛击->>这里<<-参与讨论

JavaEye推荐

半个多月用prototype实现的:单页面,纯Ajax,web2.0,js,div+css,...

zz78_gang — Wed, 13 Jun 2007 15:58:09 +0800

作者: zz78_gang 链接：http://zz78-gang.javaeye.com/blog/89849 发表时间: 2007年06月13日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

站点：城市在线 http://www.city366.com/

前言：用了半个多月的空余时间，刚刚完成站点的主要内容，还有很多细节需要优化（很多已知的bug还没有修补），仅希望这篇文章可以
传递使用 js 的 oo 编程，共同体验超爽的 bs 程序 :)。
注：程序，美工，测试，需求分析，都自己做了，

前台:
1,纯Ajax，无刷新实现与服务器交互
2,纯Web2.0，Div+CSS布局
3,最少的HTML代码，整个站点的所有HTML对象，均通过js动态生成（生成object对象，并非用innerHTML写入）
4,仅用一个页面，实现网站所有功能。
5,兼容常用浏览器（IE, Firefox, Opera)
6,最少的服务器交互（包括：最少次数向服务器发送request；每次服务器返回最少量的数据）
7,maximize seo.(没时间，没耐心做了，看看反馈再说吧。)

页面生成流程：
本站前台页面中的所有内容，均通过 js 创建对应的 object ，Ajax 请求内容，填充，初始化对象，并呈递到页面。

页面对象：
1，Group：如：“生活”，“街区”，“餐饮” 。
2，Category：如：“搬家”，“快递”，“送水”。
3，Item：如：“xxx搬家公司”....
所以，页面的呈现需要通过三次Ajax调用，依次载入所有Group；Selected Group 下的 Category；selected Category 下的 Item。

三类对象
使用现有的 prototype.js 实现js的OO实现。
1, Group:
var GroupItem = Class.create();
GroupItem.prototype =
{
initialize:function(id,enname,cnname)
{
this.Id = id;
this.EnName = enname;
this.CnName = cnname;
this.Item = getGroupMenu(id,cnname);
this.Option = getGroupOption(id,cnname);
this.Categories = null;
this.ItemStrs = null;
}
};
说明：
Id, Enname, CnName, 是Group的三个基本属性，从命名可以得出，就不过多解释了！
getGroupMenu，每当 GroupItem 对象被创建（初始化）时，自动创建其对应页面上的菜单 HTML Object，（如：“生活”，“街区”）
getGroupOption，每当 GroupItem 对象被创建（初始化）时，自动创建其对应的 HTML Option Object，（如：在“添加信息”时选择分类时用）
Categories，用来存储其下的 Category （Ajax请求的结果），这样做的好处是，该Group下的Category只会被请求一次，再次使用只要调用内存中的对象既可。
ItemStrs，类似 “Categories” 的机制。

2，Category：
var CategoryItem = Class.create();
CategoryItem.prototype =
{
initialize:function(id,enname,cnname,index)
{
this.Id = id;
this.EnName = enname;
this.CnName = cnname;
this.Item = getCateMenu(id,cnname);
this.Option = getCategoryOption(id,cnname);
this.ItemContainer = getItemContainer(cnname);
}
};
说明：
机制与Group类似，具体实现方式，参见源js文件

3，Item：
var ItemItem = Class.create();
ItemItem.prototype =
{
initialize:function(id,title,keyword,content)
{
this.Id = id;
this.Title = title;
this.Keyword = keyword;
this.Content = getCateMenu(id,content);
}
};
说明：
机制与Group类似，具体实现方式，参见源js文件。

前台的东西先写到这，后台的细节下回分解！

已有 6 人发表留言，猛击->>这里<<-参与讨论

JavaEye推荐

zz78_gang

如果有这样一个站点，从技术角度，你能打几分（满分10分，限从技术角度）

怎样使用Ajax 简化我们的分层设计

半个多月 用prototype实现的:单页面,纯Ajax,web2.0,js,div+css,...

半个多月用prototype实现的:单页面,纯Ajax,web2.0,js,div+css,...