JQuery插�g�~�写�C�Z��

Gavin Li — Wed, 05 Apr 2017 09:35:00 GMT

先讲一下背景，最�q�发现项目中有些js文�g的规模越来越大，接近2000行，开始出现维护困隄��苗头�Q�刚好实现的一个功能需要用到tree插�g�Q�在�|�上搜到一个bootstrap treeview插�g可以用，但该插�g无法支持懒加载和动态添加功能，�|�上现有的扩展方案都无法完全满��我的要求。花了一些时间看了bootstrap treeview的代码和Jquery插�g的编写方法，对其�q�行了扩展�ƈ在项目中实现了一个简单的Select插�g�Q�另外计划把��目中以前组件化的自定义UI控�g也全部用Jquery插�g实现�Q�以便复用�ƈ且清除冗余代码，�q�一�q�程我会(x��)陆箋发布出来�Q�本��主要以我的select插�g��Z��讲述如何才能�~�写一个Jquery插�g�Q?br /> 要想�~�写一个Jquery插�g�Q�首先必��d��Jquery有所了解�Q�尤其是以下几个知识点：(x��)

知道�Q�function($){...}�Q?jQuery)是什么意�?br /> �Q�function($){...}�Q?jQuery)定义了一个函敎ͼ��q�且以jQuery为参数进行了调用�Q�一般情况下�Q�这是实现jQuery插�g的标准姿势，对这个有兴趣的同学可以��l�深入研�I��?br />
$.proxy(fun, context)
该方法返回一个fun函数的代理，�q�回的代理函数功能和fun相同�Q�不同的是返回函��C��用context参数作�ؓ(f��)调用上下文。这�D�话有点�l�口�Q�不明白的同学请参考：(x��)

http://www.cnblogs.com/hongchenok/p/3919497.html
$.each(arr, function(){...})
该方法在每个arr中的元素上执行callback�Ҏ(gu��)��Q�存在很多变体。详�l�请参见http://www.jb51.net/article/24581.htm
$.extend(deep, obj, obj1, ..)
Jquery提供的用来扩展一个对象的�Ҏ(gu��)��Q�即��对象obj1合�ƈ到对象obj�Q�一般被用来向jQuery对象中添加方法。详�l�请参考http://www.cnblogs.com/tianguook/p/4084061.html
$.data(dom, data-name, data-value)
Jquery提供的用来绑定对象到dom对象中的�Ҏ(gu��)��Q�如果没有定义data-value参数�Q�是��d��data-name的��|��如果定义了data-value则是讄��data-name的倹{�?br />

有了以上知识�Q�我们来实现一个Select的Jquery插�g�Q�可以方便的创徏、添加选项、删除选项�{�等。代码如下：(x��)
/**

* Created by gavinli on 17-3-30.
*/
;(function ($) {
    'use strict';

    var pluginName = 'myList';

    var _default = {};

    _default.settings = {};

    var MyList = function (element, options) {
        this.$element = $(element);
        this.init(options);
        return {
            init: $.proxy(this.init, this),
            add: $.proxy(this.add, this),
            remove: $.proxy(this.remove, this),
            list: $.proxy(this.list, this),
            clear: $.proxy(this.clear, this),
            getSelected: $.proxy(this.getSelected, this)
        }
    };

    MyList.prototype.init = function (options) {
        this.items = [];

        if (options.data) {
            if (typeof options.data === 'string') {
                options.data = $.parseJSON(options.data);
            }
            this.items = $.extend(true, [], options.data);
            delete options.data;
        }
        this.options = $.extend({}, _default.settings, options);
        this.render();
        this.subscribeEvents();
    };

    MyList.prototype.subscribeEvents = function () {
        //TODO:
    };

    MyList.prototype.add = function (items) {
        if (!(items instanceof Array)) {
            items = [items];
        }
        var _this = this;
        $.each(items, function (i, value) {
            _this.items.push(value);
        });
        this.filterDup();
        this.render();
    }

    //Remove all duplicated items
    MyList.prototype.filterDup = function () {
        var _this = this;
        var values = {}
        $.each(_this.items, function (i, value) {
            if (values[value]) {
                _this.items[i] = null;
            } else {
                values[value] = true;
            }
        });
    }

    MyList.prototype.remove = function (items) {
        var _this = this;
        var toBeRemoved = {};
        $.each(items, function (i, value) {
            toBeRemoved[value] = true;
        });
        $.each(_this.items, function (i, value) {
            if (toBeRemoved[value] == true) {
                _this.items[i] = null;
            }
        });
        this.render();
    }

    MyList.prototype.getSelected = function () {
        return this.$wrapper.val();
    }

    MyList.prototype.list = function (item) {
        var result = [];
        $.each(this.items, function (i, value) {
            if (value) {
                result.push(value);
            }
        });
        return result;
    }

    //Clear all items
    MyList.prototype.clear = function () {
        delete this.items;
        this.items = [];
        this.render();
    }

    MyList.prototype.render = function () {
        if (!this.initialized) {
            this.$wrapper = $(this.template.list);
            this.initialized = true;
        }
        //Append select element to $element
        this.$element.empty().append(this.$wrapper.empty());

        //Build select options
        this.buildList(this.items);
    }

    MyList.prototype.buildList = function (items) {
        var _this = this;
        $.each(items, function (i, value) {
            if (value) {
                var option = $(_this.template.item);
                option.append(value);
                _this.$wrapper.append(option);
            }
        });
    }

    MyList.prototype.template = {
        list: '',
        item: ''
    };

    $.fn[pluginName] = function (options, args) {
        var result;
        this.each(function () {
            var _this = $.data(this, pluginName);
            if (typeof options === 'string') {
                if (!_this) {
                    //logError('Not initialized, can not call method : ' + options);
                }
                else if (!$.isFunction(_this[options]) || options.charAt(0) === '_') {
                    //logError('No such method : ' + options);
                }
                else {
                    if (!(args instanceof Array)) {
                        args = [args];
                    }
                    result = _this[options].apply(_this, args);
                }
            }
            else if (typeof options === 'boolean') {
                result = _this;
            }
            else {
                $.data(this, pluginName, new MyList(this, $.extend(true, {}, options)));
            }
        });
        return result || this;
    };

})(jQuery);

下面针对其中的关键方法进行分析讲解：(x��)
MyList函数�Q�MyList对象的construnctor�Ҏ(gu��)��Q�接受options参数�Q�options参数包含所有options的数�l�）(j��)
MyList.prototype.init�Q�根据options的data构徏�q�渲染Select控�g
MyList.prototype.add�Q�添加option到Select中�ƈ渲染�Q�其它r(ji��)emove�Q�list�Q�getSelected�Ҏ(gu��)��大家自行研究
上面代码中，最核心的部分在于如何将MyList对象和Dom元素�l�合、�ƈ且扩展到Jquery中，具体参考如下注释代码：(x��)
////扩展jQuery的prototype对象�Q�这里的plugName�{�于myList�Q�相当于�l�jQuery对象��d��了一�?myList"�Ҏ(gu��)��

    $.fn[pluginName] = function (options, args) {
        var result;
        ////�q�里的this是一个jQuery对象
        this.each(function () {
            //下面的this不是jQuery对象�Q�而是jQuery对象中的Dom对象
            //从Dom对象中获�?data-myList"属性绑定的对象
            var _this = $.data(this, pluginName);
            //options是方法名�Q�例�?('#list1').MyList('add'�Q�[])�Q�这里的options�{�于'add'
            if (typeof options === 'string') {
                if (!_this) {
                    //logError('Not initialized, can not call method : ' + options);
                }
                else if (!$.isFunction(_this[options]) || options.charAt(0) === '_') {
                    //logError('No such method : ' + options);
                }
                else {
                    if (!(args instanceof Array)) {
                        args = [args];
                    }
                    //调用MyList对象的方�?/span>
                    result = _this[options].apply(_this, args);
                }
            }
            else if (typeof options === 'boolean') {
                result = _this;
            }
            else {
                //创徏MyList对象�q�绑定到Dom对象的data-myList属�?/span>
                $.data(this, pluginName, new MyList(this, $.extend(true, {}, options)));
            }
        });
        return result || this;
    };

如何使用该插件的�Ҏ(gu��)��如下所�C�：(x��)
首先在html中定义一�?lt;div id="list1">�Q�然后这样��用它�Q?br /> //创徏一个Select包含三个options

$('#list1').MyList(['Tom','Mary','Alice']);
//��d��新的option
$('#list1').MyList('add', [['James','Richard']]);
//删除option
$('#list1').MyList('remove', [['Alice']]);

最后我们可以在以上例子中发现创建jQuery插�g的��M��思�\�Q?br />

自定义对象，对象中包含数据和jQuery对象本��n
定义对象的方法，�q�且�Ҏ(gu��)��对象中数据的变化渲染Dom对象�Q�通过jQuery对象获得Dom对象�Q?/li>
��该自定义对象方法扩展到jQuery原型对象�?/li>
创徏自定义对象，�q�绑定到jQuery中Dom对象的data属�?br />

通过以上实现�Q�我们便可以像��用jQuery对象一��L(f��ng)��方式使用控�g�Q�屏蔽对Dom元素的操作，��单又方便

Gavin Li 2017-04-05 17:35 发表评论

91啪国产在线,欧美日韩国产精品专区,亚洲高清一区二

JQuery插�g�~�写�C�Z��