【jquery仿dataList】应用之——模仿igoogle

接上一次日志哈，这一次用原来写的datalist实现了简单应用，模拟igoogle。

做的过程中发现代码很多问题，主要是流程上的问题。

主要是自己层次不够，明明已经感到这样那样的问题，都能说出来就是不知道怎么改。主要问题：

1 初始化时候参照其他jquery框架，应该达到配置最小化，却怎么都做不好

2 现在控件必须提供数据源datalist与模板template，数据源还好说，但是模板的写法真的太坑爹，现在是放在数据库里面了

以后怎么做还说不清哦

3 与.net中datalist一致，不论datalist还是item都会生成多余的标签，这里是生成的div，看上去很是别扭

4 最大问题还是，混乱！！！就像这篇文章一样，js控制力不同于服务器语言，所有整个做起来，不论事件绑定

还是其他什么定义都感觉有点混乱，流程不清，这是我主要应该改进的地方。

主要流程：

1 加载小工具模板:现在先一次性加载，以后用到一个保存一个作为全局参数
2 加载该用户的所有小工具：现在先一次性加载，以后先加载第一页，
根据页索引判断加载
3 根据用户小工具数据，初始化所有小工具外框
由于数据以及模板已经取出，此时加载速度应该非常快，左中右一次加载
**此处注意，虽说小工具外框一样，但是新增的小工具可能会在外框加载结束后再修饰外框
比如，weibo、top.....，此数据存于小工具定制列（CustomData）
4 此时进行数据异步加载，
***数据可以统一加载，但是此处先加载所有小工具每列前两名数据
在根据后台用户干预加载那些大数据小工具，加载结束后，当用户滑动鼠标便进行以下
控件加载，每次控件加载数量可配置化
5 所有控件加载结束，已加载结束控件，可能会根据后台配置要求动态刷新数据
此处需要做轮询
6 控件加载结束后，开始做控件事件绑定
***注意粒度尽量小，不要和其他模块相互影响

首页效果图：

此处点击都会触发事件，一个是异步加载选项卡数据，一个是展开摘要：

也可以延后加载，比如：开始只加载前三个模块，鼠标滑动后，再加载后面的模块：

一下是，初始化后鼠标滑动前与鼠标滑动后的效果：

分屏、分页效果

点击上面1,2,3肯定会指向不同也了，其实现在用户是我，若是用户换了也会有所不同

下面是第二页和第三页

拖动排序也实现了，之前想自己写一个拖动插件，拖动时实现了却发现插件非常困难，

局限于自己的层次，就直接用的jquery ui的拖动

下面是拖动排序的展示，保存到数据库的，最后一张是刷新后重新排序的图：

点击最大化，并实现鼠标滚动到最下边重新加载数据（滚动分页嘛）：

数据库简要设计，因为我没有安装数据库，所有优点不好弄：

设计缘由：由于今后可能不止五页，做到页数动态化

小工具模板表 templates(基本字段)

小工具表 modules(基本字段)

小工具参数化，可变参数，具有验证性

参数化后

小工具参数moduleParameter

用户小工具设置表（用户参数设置）

userModules

用户小工具参数偏好userModulePre

最终表设计

核心实现代码如下：原来的datalist的代码我就不发了：

/// <reference path="../scripts/jquery-1.4.1.js" />/// <reference path="dataList.js" />/// <reference path="itemTemplate.js" />//全局变量设置var templateWarehouse = {};var userModuleData = {};var leftColModule, centerColModule, rightColModule;//首页模块加载参数var moduleLoadPara = {};moduleLoadPara.index = 1; //初始化加载索引moduleLoadPara.num = 1; //每次索引加载个数moduleLoadPara.isLoad = false; //当前是否在加载//---------------------------------------------------------------------------//第一步，加载模板function loadTemplate() {    $.ajax({        type: "post",        url: "../Ajax.aspx?sql=select * from templates ",        type: "json",        async: false,        success: function (data) {            $.each(data, function (i, item) {                templateWarehouse[item.templateKey] = item.templateValue;            });        }    });}//加载所有模板数据function loadModuleData(isAsync) {    var _isAsync = false;    if (isAsync)        _isAsync = isAsync;    var userId = "wl";    $.ajax({        type: "post",        url: "../Ajax.aspx?sql=select * from modules m ,userModules um where 1=1 and m.uuid=um.moduleId and um.userId='" + userId + "'",        type: "json",        async: _isAsync,        success: function (data) {            userModuleData["1"] = [];            userModuleData["2"] = [];            userModuleData["3"] = [];            userModuleData["4"] = [];            userModuleData["5"] = [];            $.each(data, function (i, item) {                var userPrefs = item.userPrefers;                if (typeof (userPrefs) == "string") {                    userPrefs = eval("(" + userPrefs + ")"); ;                }                item.userPrefers = userPrefs;                userModuleData[userPrefs.pageId].push(item);            });        }    });}//---------------------------------------------------------------------------//根据用户id，按要求加载其模板function initModuleFrame(_pageId) {    var pageId = 1;    if (_pageId)        pageId = _pageId;    var $div = $("#main");    $div.html("");    loadColModule(pageId, "left_conter");    loadColModule(pageId, "cell_conter");    loadColModule(pageId, "right_conter");}function loadColModule(pageId, colId) {    var $div = $("#main");    var colData = getColData(pageId, colId);    var colModule = new dataList(colId, "commonFrame");    colModule.itemElementEvent = {        _sortItems: {            elementKey: ".content",            eventType: "ready",            funcName: itemSort        },        _itemMaxClick: {            elementKey: ".btn_close",            eventType: "click",            funcName: itemMaxClick        },        _itemMenuClick: {            elementKey: ".btn_more",            eventType: "click",            funcName: itemMenuClick        }    };    colModule.className = "column";    colModule.dataSource = colData;    colModule.dataBind($div);    if (colId == "left_conter") {        leftColModule = colModule;    } else if (colId == "cell_conter") {        centerColModule = colModule;    } else if (colId == "right_conter") {        rightColModule = colModule;    }}function getColData(pageId, colId) {    var tempData = [];    var data = userModuleData[pageId];    $.each(data, function (i, item) {        var userPrefs = item.userPrefers;        if (userPrefs.pageId == pageId && userPrefs.colId == colId) {            tempData.push(item);        }    });    tempData = tempData.sort(function (a, b) {        if (a.userPrefers.sort < b.userPrefers.sort) {            return -1;        }        if (a.userPrefers.sort > b.userPrefers.sort) {            return 1;        }        return 0;    });    return tempData;}//---------------------------------------------------------------------------function loadItemMax(sender, param, e, isClick) {    var dataSourceUrl = param.dataSourceUrl;    var templateId = param.templateId + "-max";    var title = param.title;    var type = param.type;    var id = sender.id;    var $max = $("#list-max");    var $main = $("#main");    var $content = $("#list-max #list-max-content");    if (isClick)        $content.html("");    var $title = $("#list-max #list-max-title");    var $itemList = $("#list-max .list");    var $listMore = $("#list-max #list-max-more");    var isLoad = $listMore.val();    $listMore.val("-1");    var len = $itemList.length;    var _index = len + 1;    var itemStr = '<fieldset  class="list"><legend><span class="index">page' + _index.toString() + '</span></legend><div id="itemContent' + _index.toString() + '" >数据加载中......</div></fieldset>';    $main.hide();    $max.show();    $title.html(title);    if (type && type == "s-html") {        var html = '<iframe scrolling="no"  frameborder="0" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="' + dataSourceUrl + '"></iframe>';        $content.html(html);    } else {        $content.append(itemStr);        $.ajax({            type: "post",            url: dataSourceUrl,            type: "json",            async: true,            success: function (data) {                var $itemContent = $("#list-max #itemContent" + _index.toString() + "");                $itemContent.html("");                var dataNews = data;                if (typeof (dataNews) == "string") {                    dataNews = eval("(" + data + ")");                 }                var listMax = new dataList(id + "_max", templateId);                listMax.dataSource = dataNews;                listMax.dataBind($itemContent);                $listMore.val("1");            }        });    }}//小工具事件定义，小工具事件处理函数function itemMaxClick() {    var sender = this;    var param = arguments[0];    var e = arguments[1];    loadItemMax(sender, param, e, true);    $(document).unbind("scroll");    $(document).bind("scroll", function (e) {        var windowHeight = $(window).height();        var windowScrollTop = $(window).scrollTop();        var documentHeight = $(document).height();        var $listMore = $("#list-max #list-max-more");        var isLoad = $listMore.val();        if ((windowHeight + windowScrollTop + 100) > documentHeight && isLoad == "1") {            loadItemMax(sender, param, e);        }    });}//小工具事件定义，点击出现菜单栏function itemMenuClick() {    var sender = this;    var param = arguments[0];    var e = arguments[1];    //    alert("弹出菜单" + "--" + param.uuid1 + "--" + sender.id)    var uuid = param.uuid1;    var popupMenu = $("#popupMenu");}//定义小工具会用到的工具类var moduleInitTool = {};//适用于不同模板，若是有新模板，只需根据规范添加函数即可，工厂方法moduleInitTool.jsonModule = function (sender, param, e) {    var templateId = param.templateId;    var id = param.uuid;    var dataSourceUrl = param.dataSourceUrl;    var $itemContent = sender.getItemElement(".content");    if (dataSourceUrl) {        moduleLoadPara.isLoad = false;        $.ajax({            type: "post",            url: dataSourceUrl,            type: "json",            async: true,            success: function (data) {                $itemContent.html("");                var dataNews = data;                if (typeof (dataNews) == "string") {                    dataNews = eval("(" + data + ")"); ;                }                var listItemNews = new dataList(id + "_news", templateId);                listItemNews.itemElementEvent = {                    clickTitle: {                        elementKey: ".span2",                        eventType: "click",                        funcName: titleClick                    }                }                listItemNews.dataSource = dataNews;                listItemNews.dataBind($itemContent);                //                if (sender.id == "right_conter_id_1")                //                    setInterval(function () {                //                        alert("重新加载" + sender.id);                //                    }, 5000);                moduleLoadPara.isLoad = true;            }        });    }}moduleInitTool.htmlModule = function (sender, param, e) {    var id = param.uuid;    var dataSourceUrl = param.dataSourceUrl;    var $itemContent = sender.getItemElement(".content");    if (dataSourceUrl) {        var html = '<iframe scrolling="no"  frameborder="0" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="' + dataSourceUrl + '"></iframe>';        $itemContent.html(html);    }}moduleInitTool.weiboModule = function (sender, param, e) {}moduleInitTool.labelModule = function (sender, param, e) {    var templateId = param.templateId;    var id = param.uuid;    var dataSourceUrl = param.dataSourceUrl;    var customData = param.customData;    var modulePara = param.moduleParameter;    if (typeof (modulePara) == "string") {        modulePara = eval("(" + modulePara + ")"); ;    }    templateWarehouse["labelHeadTemplate"] = modulePara.labelHeadTemplate;    var $itemContent = sender.getItemElement(".content");    $itemContent.html(customData);    var lableHead = sender.getItemElement("#labelHead");    moduleLoadPara.isLoad = false;    $.getJSON("../Ajax.aspx?sql=select * from bigType", function (data) {        var labelHeadList = new dataList(id + "_head", "labelHeadTemplate");        labelHeadList.dataSource = data;        labelHeadList.className = "labelHead";        labelHeadList.itemEvent = {            _labelHeadClick: {                eventType: "click",                funcName: function () {                    var _sender = this;                    var _param = arguments[0];                    var _e = arguments[1];                    var labelBody = sender.getItemElement("#labelBody");                    var bigTypeId = _param.id;                    var url = "../Ajax.aspx?sql=select * from smallType where bigTypeId=" + bigTypeId + "";                    $.getJSON(url, function (_data) {                        labelBody.html("");                        var labelBodyList = new dataList(bigTypeId + "_head", templateId);                        labelBodyList.dataSource = _data;                        labelBodyList.dataBind(labelBody);                    });                }            }        };        labelHeadList.dataBind(lableHead);        moduleLoadPara.isLoad = true;    });}function elementDatabind(s) {    var sender = this;    var param = arguments[0];    var e = arguments[1];    var type = param.type;    if (type && type.length > 2) {        var _funcName = type.substring(2) + "Module";        //        eval(_funcName);//此方法不能异步调用        var funcName = moduleInitTool[_funcName];        if (funcName && typeof (funcName) == "function") {            funcName(sender, param, e);        }    }}function titleClick() {    var sender = this;    var param = arguments[0];    var e = arguments[1];    var summary = sender.getItemElement(".summary");    var isShow = summary.css("display");    if (isShow == "none") {        summary.show();    } else {        summary.hide();    }}//用于小工具排序function itemSort() {    var sender = this;    var html = sender.htmlElement;//    alert(html.offset().top);    $(".column").sortable({        connectWith: ".column",        cursor: 'move',        opacity: 0.7,        handle: " .title",        stop: sortItemsAjax    });}//向后台发送数据function sortItemsAjax() {    submitSortData("left_conter");    submitSortData("cell_conter");    submitSortData("right_conter");}function submitSortData(colId) {    var parent = $("#" + colId);    var $children = parent.children();    $children.each(function (i, item) {        var id = item.id;        var itemId = "#" + id + " #itemId";        var $uuid = $(itemId);        var uuid = $uuid.html();        var userPrefers = item.userPrefers;        $.ajax({            type: "post",            url: "../Ajax.aspx?sort=" + i + "&colId=" + colId + "&id=" + uuid + "&no=no",            type: "json",            async: true,            success: function (data) {            }        });    });}//---------------------------------------------------------------------------//总体外部流程，外部方法function mainProcess() {    var $max = $("#list-max");    var $main = $("#main");    var $btn_Narrow = $("#list-max .btn_Narrow");    $btn_Narrow.unbind("click");    $btn_Narrow.bind("click", function () {        if ($max.css("display") == "none") {            $main.hide();            $max.show();        } else {            $(document).unbind("scroll");            var $listMore = $("#list-max #list-max-more");            $listMore.val("-1");            $main.show();            $max.hide();        }    });}function LaterEvent() {    var commomEvent = {        _loadItems: {            elementKey: ".content",            eventType: "ready",            funcName: elementDatabind        }    };    var num = (moduleLoadPara.index) * (moduleLoadPara.num);    for (var i = 0; i < num; i++) {        if (leftColModule.items[i])            leftColModule.items[i].eventAdd(commomEvent);        if (centerColModule.items[i])            centerColModule.items[i].eventAdd(commomEvent);        if (rightColModule.items[i])            rightColModule.items[i].eventAdd(commomEvent);    }    moduleLoadPara.index++;        //    leftColModule.eventAdd(commomEvent);    //    centerColModule.eventAdd(commomEvent);    //    rightColModule.eventAdd(commomEvent);}function delayLoad() {    var commomEvent = {        _loadItems: {            elementKey: ".content",            eventType: "ready",            funcName: elementDatabind        }    };    $(document).unbind("scroll");    $(document).bind("scroll", function (e) {        if (moduleLoadPara.isLoad) {            var num = (moduleLoadPara.index) * (moduleLoadPara.num);            var oldNum = (moduleLoadPara.index-1) * (moduleLoadPara.num);            for (var i = oldNum; i < num; i++) {                if (leftColModule.items[i])                    leftColModule.items[i].eventAdd(commomEvent);                if (centerColModule.items[i])                    centerColModule.items[i].eventAdd(commomEvent);                if (rightColModule.items[i])                    rightColModule.items[i].eventAdd(commomEvent);            }            moduleLoadPara.index++;        }    });}function pageClick() {    for (var i = 1; i <= 5; i++) {        var page = $("#pageIndex" + i.toString());        page.unbind("click");        page.bind("click", function (e) {            var _p = $(this);            initModuleFrame(_p.text());            LaterEvent();            var $max = $("#list-max");            var $main = $("#main");            $main.show();            $max.hide();            $(document).unbind("scroll");            var $listMore = $("#list-max #list-max-more");            $listMore.val("-1");            //置顶            $('html,body').animate({ scrollTop: '0px' }, 800);            //            A：return false --->In event handler ,prevents default behavior and event bubbing 。            //return false 在事件的处理中，可以阻止默认事件和冒泡事件。            //B：event.preventDefault()---> In event handler ,prevent default event (allows bubbling) 。            //event.preventDefault()在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。            //C：event.stopPropagation()---> In event handler ,prevent bubbling (allows default behavior).            //event.stopPropagation()在事件的处理中，可以阻止冒泡但是允许默认事件的发生。            e.stopPropagation();            return false;        });    }}function pageLoad() {    mainProcess();    loadTemplate();    loadModuleData();    initModuleFrame();         LaterEvent();    pageClick();    //置顶    $('html,body').animate({ scrollTop: '0px' }, 800);    delayLoad();    //5分钟更新一次模块数据    var updateModuleData = setInterval("loadModuleData(true)", 50000);}//---------------------------------------------------------------------------