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

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

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

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

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

var sortList =[];

View Code

//版块加载完毕后初始化序列数组
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：