Question

我正在开发一个jQuery / Zepto滑块插件，想要询问有关扩展dom元素的信息。我知道这种方法对于不同的浏览器环境来说不是很优雅，但它让生活变得更加容易。

另外，为了使名称独特，我将所有方法添加到一个对象'pluginName'

中

因此每个滑块项都将获得一组自定义方法：

item = document.createElement('div');
itemMethods(item); // add methods to item element

itemMethods = function(el){
 el.pluginName= {};
 el.pluginName.getIndex = function(){};
 el.pluginName.setLocalData = function(){};
 el.pluginName.getLoaclData = function(){};
}

这种方法值得一试吗？自定义元素方法有什么大问题吗？我不确定我是否会朝着正确的方向前进。感谢

Answer 1

请注意，document.createElement('div');会返回HTMLDivElement的实例：

var div = document.createElement('div');
console.log(div, div.constructor === HTMLDivElement);  // HTMLDivElement, true

因此，您只需向HTMLDivElement对象添加属性即可扩展.prototype类：

HTMLDivElement.prototype.pluginName = {};
HTMLDivElement.prototype.pluginName.getIndex = function () {};
HTMLDivElement.prototype.pluginName.getLocalData = function () {};
HTMLDivElement.prototype.pluginName.setLocalData = function () {};

甚至更短：

HTMLDivElement.prototype.pluginName = {
    getIndex: function () {},
    getLocalData: function () {},
    setLocalData: function () {}
};

修改如果您只想将新方法添加到单个div中，请尝试以下操作：

var itemMethods = function (el) { var index = 0; var data = {}; el.pluginName = { getIndex: function () { // access the element by el }, getLocalData: function () { // access the element by el }, setLocalData: function () { // access the element by el } }; }; item = document.createElement('div'); itemMethods(item); // add methods to item element

Answer 2

既然你提到了jQuery，那么这个怎么样：

var $div = $('<div/>').data({ 
    pluginName: { 
        doStuff: function(s){ console.log('hello ' + s); } 
    } 
});

$div.data('pluginName').doStuff('world');

http://jsfiddle.net/LHk8j/

扩展DOM元素

2 个答案: