jQuery插件之动态列表

前言

jQuery为我们的开发带来巨大的便利，当我们想实现一个独立的功能时候，我们可能会想到用jQuery插件来是一种不错的选择。jQuery在设计之初就为我们提供了扩展机制。我们可以通过以下三种方法实现插件开发。

• 通过$.extend(),这种方法在jQuery身上而不是它的原型对象上添加了一个静态方法，一般通过$.myfunc()调用这种插件。
• 通过$.fn或者$.fn.extend(), 这种方法较为普遍，它向jQuery的原型对象上(也就是$.fn)上添加新的方法，可以通过$(”).myfunc()调用这种插件。
• 通过$.widget()应用jQuery UI的部件工厂方式创建，这种方法暂不介绍。
  下面我们通过比较简单的第二种方式来实现jQuery插件。

实现jQuery插件

1.插件代码原型

$.fn.extend(obj)是一种JavaScript的混入，就是把obj对象中的属性复制到jQuery的型对象中。我们用匿名函数自执行的方式来避免变量污染。

(function($){
        $.fn.extend({
            //插件名，动态列表
            "addDyList" : function(options){
                //用传进来的参数覆盖默认参数
                var configs = $.extend({}, defaults, options);
            },

        });
        //默认参数
        var defaults = {
            'values' : ['HTML','CSS','JavaScript'],
        };
        //插件私有方法，增加一个列表项
        function newList(lvalue){

        };
        //插件私有方法，从array中删除val
        function deleteFromArray(array, val){
        };
        //插件私有方法，更新array的某个值
        function updateArray(array, oldVal, newVal){
        };

    })(window.jQuery);

以上代码是动态列表插件模型。

2.插件用法

插件名叫做addDyList，它在某个选定的target元素上添加一个动态列表作为target的子元素。参数是一个对象，在对象中可以为动态列表传入初始数组和回掉函数。

$('target').addDyList({
        //初始化列表的数组
        'values' : ['HTML','CSS','JavaScript'],
        //动态列表编辑完成之后的回掉函数，用于更新数据库
        'oneditfinished' : function(vals){
            //用动态列表中的数组vals去更新数据库的操作
        }
});

3.插件demo与源代码

demo：https://justlemon.github.io/jQueryPlugin/dyListPlugin/index.html
代码地址：https://github.com/justLemon/jQueryPlugin

4.插件实现原理

利用jQuery对DOM操作的封装，我们可以很较为轻松的实现动态列表插件。

1. 插件的每个元素都有一个css类与之对应，我们可以用css自定义动态列表的外观。
2. 点击编辑目录时，进入列表的编辑状态，取消a标签的默认行为。让当前菜单消失，新菜单出现，新菜单拥有添加目录、删除目录、修改目录、返回等按钮。
3. 点击添加目录时，给列表动态添加一个包含输入框的列表项，用户可以选择确认或者取消来确认是否添加。
4. 点击删除目录时，显示每个列表项中隐藏的多选框，用户可以选择要删除的目录。
5. 点击修改目录时，显示每个列表项中隐藏的修改按钮。当点击修改按钮时，将当前列表项替换为带有输入框的列表项。注意替换时候需要将旧值作为data属性赋值给新的列表项，以便列表数据的更新。
6. 点击返回时，退出列表的编辑状态，恢复a标签的默认行为，让当前菜单消失。