用户自定义模块的实现方案

近期网站要做一个支持自定义模块的应用。

主要功能有：
拖拽排序布局、添加和删减版块（前端即时呈现，即时生效），设置关注球员或者球队
交互操作包括页面直接拖拽删减操作 和 新闻版块管理弹窗增删查询操作。每一步操作都即时反馈生效。
其实自定义模块的WEB应用也是屡见不鲜，比如myYahoo 和 有道资讯等等，个人认为此类的功能复杂，操作繁琐，用户体验不佳且消耗资源。开发成本高，使用率低。但是工作需要还是认真实践了一下。

主要的实践经验就是各个交互操作中，无论是拖拽排序，还是后台增删，都即时用一个统一的变量来保存版块序列。该变量[数组]作为前台表现 和 后台状态纪录的唯一标准。这样即使是较多的操作层面和步骤，都可以保持清晰的逻辑顺序。

//模块排序数组 全局变量保存。

var sortList =[]; 

//版块加载完毕后 初始化序列数组
sortList = (function(){
            var ary = [],mods = exMods;
            $.each(mods,function(i){
                ary.push($(this).attr('id'));
                });
            return ary;

定义 var mngNewsMod ={};来完成管理模块的各项工作 。
拖拽采用  jQuery UI的 sortable 组件来实现，其提供的  

sortList =$("#sortable").sortable("toArray");

toArray 选项是一个很实用的方法， 拖放之后可以实时返回序列化好的数据。非常方便。

$("#sortable").sortable({
                placeholder: "placeholder",
                handle: "h3",
                items: "div.dragable:not(#custom)",
                start:function(){
                    $("#sortable" ).disableSelection();
                    },
                stop:function(){
                    $("#sortable" ).enableSelection();
                    sortList =$("#sortable").sortable("toArray");
                }

 关于版块的删减，在关闭模块的同时，移除序列数组 sortList 中的相应项目.使用自定义的 Array.removeByVal 方法来移除数组中指定值的元素：

Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
Array.prototype.removeByVal = function(val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }

 关于模块的增加，用js模板动态生成元素追加到页面，并且同时用 load方法向服务器申请相应内容，做到添加即时生效：

it.loadNewMods = function(modlist){
        for(var i=0; i<modlist.length; i++){
            var tpl = '<div id="MODID" class="dragable loading"><h3><span>MODTITLE</span><a title="删除" href="#nogo">删除</a></h3></div>',            
                idx = parseInt(modlist[i].replace('contMod_',''))-1;
            tpl = tpl.replace('MODID',modlist[i]).replace('MODTITLE',modTitle[idx]);
            tpl = $(tpl);
            $("#custom").before($(tpl));
            
            /*动态加载新闻内容
            tpl.load(newsDataUrl + newsDataID[idx],function(){
                tpl.removeClass('loading');
                });
            */    
            };
            

 这一步遇到一个问题，就是用jQuery方法生成的html5元素在IE8以及以下版本中不被支持，生成的元素不能被应用样式等。后来将section 标签换成了 传统的 div标签解决。见 ：

IE8以下版本不支持动态创建的HTML5元素？

 最后就是保存了，当用户离开页面的时候保存用户操作的结果，发动sortList 等数据到后台：

$(window).unload(mngNewsMod.postModList);
中间也遇到了IE的“尚未实现”问题：

 JS报 “尚未实现” 错误

总体来说实现的还算顺利。
可查看静态DEMO：