如何在Javascript中设计自定义控件（可能使用jQuery） [英] How can I design a custom control in Javascript (possibly using jQuery)

问题描述

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

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.

一个这样的控件的示例是日历。它将呈现为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.

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

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 :

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

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

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

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

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.

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

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.

推荐答案

1. 你可以从阅读本文开始，一个简单的JQuery插件教程


2. 你也可以在这个网站上获得很多想法，一个教程在jQuery UI小部件上。

1. you can start by reading this, a simple JQuery plugin tutorial
2. you can also get lots of idea on this site, a tutorial on jQuery UI widgets.

作为起点，第一个网站提供了这个片段作为插件开发的骨架：

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

这篇关于如何在Javascript中设计自定义控件（可能使用jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！