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

I'd like to create a custom control in javascript. The goal is to create a building block that has methods, properties and events and render into a div.

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

An example of one such control would be a calendar. It would render into a div, it would have properties that would define how it's displayed and what date is selected or highlighted, it would have methods to change the current month or to select some date and it would raise events when a day is clicked or the current month is changed by a user input.

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

I can think of lots of way to implement this and I'm not sure what is the best way. I seem to remember that it's a bad thing to augment a DOM elements with properties and method, so I ruled that out. A jQuery plugin seems like a good idea, however I'm not sure if it's appropriate to create a plugin for each and every method my control would have so I could then use it like :

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

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

And if I do use jQuery, where do I store the private data of my control?

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

Another idea I got was to create a new kind of object that would have a reference to a div in which it could render it's elements.

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

So what is the prefered way to do this. If I can I would like to do this as a jQuery plugin, but I'd need guidlines on how to create methods and where to store private data. I've loked at Plugins/Authoring on jQuery website and it did not helped that much in this regard.

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

2 个解决方案

#1

you can start by reading this, a simple JQuery plugin tutorial

你可以从阅读这个简单的JQuery插件教程开始

you can also get lots of idea on this site, a tutorial on jQuery UI widgets.

你也可以在这个网站上获得很多想法,这是一个关于jQuery UI小部件的教程。

As a starting point, the first site offers this snippet as a skeleton for plugin development:

作为起点,第一个站点提供此片段作为插件开发的框架:

//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);

#2

When writing Jquery plugins, you usually expose methods via optional arguments to the plugin function

在编写Jquery插件时,通常会通过插件函数的可选参数公开方法

For example:

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

Storing data is fairly simple. Just decide if you want to persist that data in the DOM, or in memory. If the latter, you need to create an object which your plugin can access.

存储数据非常简单。只需决定是否要将数据保存在DOM或内存中。如果是后者,则需要创建插件可以访问的对象。

(function($) {

    var data;
    $.fn.extend({

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

    });

})(JQuery);

If you want to persist the data in the DOM, you would add an attribute(s) to your container div with the data you wish to persist.

如果要将数据保留在DOM中,则应使用要保留的数据向容器div添加属性。

(function($) {

    $.fn.extend({

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

    });

})(JQuery);

#1

you can start by reading this, a simple JQuery plugin tutorial