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

站点： 城市在线  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文件。


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

评论

7 楼 downpour 2007-06-28  

最烦人说DIV + CSS, 满页的DIV，典型的DIV症。

6 楼 simon1118 2007-06-28  

建议楼主不要这么做，很容易出错
体验上也没什么太好的效果

5 楼 netfishx 2007-06-14  

天哪，好多的豆腐块。。。。。。

4 楼 superwen 2007-06-14  

很强了。

3 楼 leondu 2007-06-13  

站点我猜的是：http://www.city366.com/ 是不是？
其实从效果来看，如果是半个月的空余时间作的，应该还算不错了。

建议
1.格式调整一下，现在看比较乱；
2.附上你的效果图会好些；

2 楼 stephen722 2007-06-13  

期待着楼主的继续！

1 楼 edzhh 2007-06-13  

看不见效果啊!