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

Question

我想在javascript中创建一个自定义控件.目标是创建一个包含方法,属性和事件的构建块,并将其渲染为div.

一个这样的控件的一个例子是日历.它将呈现为div,它将具有定义如何显示以及选择或突出显示日期的属性,它将具有更改当前月份或选择某个日期的方法,并且当点击一天时它将引发事件或当前月份由用户输入更改.

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

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

如果我使用jQuery,我在哪里存储我的控件的私有数据？

我得到的另一个想法是创建一种新的对象,它可以引用div,它可以渲染它的元素.

那么首选的方法是什么呢？如果我可以,我想这样做作为一个jQuery插件,但我需要guidlines如何创建方法和存储私人数据的位置.我在jQuery网站上使用了插件/创作,但在这方面它并没有那么大的帮助.

Answer 1

编写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);

Answer 2

1. 你可以从阅读这个简单的 JQuery 插件教程开始
2. 您还可以在这个网站上获得很多想法，这是一个关于 jQuery UI 小部件的教程。

作为起点，第一个站点提供此代码片段作为插件开发的骨架：

//You need an anonymous function to wrap around your function to avoid conflict
(function($){

  //Attach this new method to jQuery
  $.fn.extend({ 

    //This is where you write your plugin's name
    pluginname: function() {

        //Iterate over the current set of matched elements
        return this.each(function() {
            //code to be inserted here
        });
    }
  });

//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )       
})(jQuery);