接上一次日志哈，这一次用原来写的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的拖动
下面是拖动排序的展示，保存到数据库的，最后一张是刷新后重新排序的图：
点击最大化，并实现鼠标滚动到最下边重新加载数据（滚动分页嘛）：
数据库简要设计，因为我没有安装数据库，所有优点不好弄：
设计缘由：由于今后可能不止五页，做到页数动态化
NO. | 字段名称 | 说明 |
1 | uuid | 页面唯一标识 |
2 | pageSort | 页面排序 |
3 | pageName | 页面标题，默认1,2,3,4,5 |
4 | pageDes | 页面描述，鼠标划上显示 |
5 |
|
|
小工具模板表 templates(基本字段)
NO. | 字段名称 | 说明 |
1 | uuid | 页面唯一标识 |
2 | templateKey | 标识 |
3 | templateValue | 模板内容 |
4 | des | 描述 |
5 |
|
|
小工具表 modules(基本字段)
小工具参数化，可变参数，具有验证性
NO. | 字段名称 | 说明 |
1 | uuid | 小模块唯一标识 |
| author | 小工具作者 |
2 | alias | 模块前台标识名，对应category |
3 | title | 小模块名称 |
4 | dataSourceUrl | 数据源链接地址 |
5 | pageId | 当前小工具属于第几屏，对应pages 的 uuid |
6 | colId | 当前小工具属于第几列（暂分为1,2,3列） |
7 | sort | 当前小工具顺序 |
8 | templateId | 当前小工具对应模板，对应templates表 |
9 | type | 当前小工具类型，frame或者json |
|
|
|
|
|
|
参数化后
NO. | 字段名称 | 说明 |
1 | uuid | 小模块唯一标识 |
2 | alias | 模块前台标识名，对应category |
3 | title | 小模块名称 |
5 | pageId | 当前小工具属于第几屏，对应pages 的 uuid |
6 | colId | 当前小工具属于第几列（暂分为1,2,3列） |
7 | sort | 当前小工具顺序 |
8 | moduleParameter | 当前小工具具有的参数对象，现在采用json对象 采用键值对，加一个描述字段 {dataSourceUrl:XXXXX ,templateId:XXXX , type:XXX } 以上是基本属性，应该是字段吧….. |
灰色部分可以不用，直接默认在第一页第一排，默认最大 其默认值在用户小工具表中体现出来
| ||
小工具参数moduleParameter
NO. | 字段名称 | 说明 |
1 | uuid | 小模块唯一标识 |
2 | moduleKey |
|
3 | moduleValue |
|
4 | des |
|
5 | isTransfer | 是否形成json传向前台 |
|
|
|
| ||
用户小工具设置表（用户参数设置）
userModules
NO. | 字段名称 | 说明 |
1 | uuid | 小模块唯一标识 |
2 | userId | 用户id |
3 | moduleId | 小工具Id |
| userPrefers | 用户偏好设置 |
|
|
|
| ||
用户小工具参数偏好userModulePre
NO. | 字段名称 | 说明 |
1 | uuid | 小模块唯一标识 |
2 | preKey |
|
3 | preValue |
|
4 | des |
|
5 | isTransfer | 是否形成json传向前台 |
|
|
|
| ||
最终表设计
核心实现代码如下：原来的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" src="' + 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" src="' + 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);}//---------------------------------------------------------------------------
随时随地看视频
