如何在 Javascript 中设计自定义控件（可能使用 jQuery）

我想用 JavaScript 创建一个自定义控件。目标是创建一个具有方法、属性和事件的构建块并呈现到 div 中。

日历就是此类控件的一个示例。它将呈现为 div，它具有定义其显示方式以及选择或突出显示日期的属性，它具有更改当前月份或选择某个日期的方法，并且当单击某天或当前月份由用户输入更改。

我可以想到很多方法来实现这一点，但我不确定什么是最好的方法。我似乎记得用属性和方法来扩充 DOM 元素是一件坏事，所以我排除了这一点。 jQuery 插件似乎是个好主意，但是我不确定为我的控件拥有的每个方法创建一个插件是否合适，这样我就可以像这样使用它：

$('#control').method1();
$('#control').method2();

如果我确实使用 jQuery，我的控件的私有数据应该存储在哪里？

我得到的另一个想法是创建一种新的对象，该对象将引用一个 div，在该 div 中可以呈现其元素。

那么首选的方法是什么？如果可以的话，我想将其作为 jQuery 插件来实现，但我需要有关如何创建方法以及在何处存储私有数据的指南。我看过插件/创作 http://docs.jquery.com/Plugins/Authoring在 jQuery 网站上，它在这方面没有多大帮助。

编写 Jquery 插件时，通常通过可选参数向插件函数公开方法

例如：

$("#id").myplugin( 'method1' );

存储数据相当简单。只需决定是否要将数据保留在 DOM 中还是内存中。如果是后者，您需要创建一个插件可以访问的对象。

(function($) {

    var data;
    $.fn.extend({

        myplugin: function(args) {
            if (args === 'init') {
                data = {};
                data.prop1 = val;
            }
            if (args === 'method1')
                alert(data.prop1);         
        }

    });

})(JQuery);

如果您想将数据保留在 DOM 中，您可以向容器 div 添加一个属性，其中包含您希望保留的数据。

(function($) {

    $.fn.extend({

        myplugin: function(args) {
            if (args === 'init') {
                $(this).attr('data') = val;
            }
            if (args === 'method1')
                alert($(this).attr('data'));
        }

    });

})(JQuery);