jQuery插件在渲染控件的过程中进程会需要用新的标签来代替初始标签,有写插件会将原标签隐藏同时将事件和函数都绑定在原标签上来保证渲染之前的jquery对象依然有效 ,并且绑定的事件不丢失。
但是,有些插件则会选择将原标标签删除后,把id等必要信息复制入新标签中,在这个过程中,所有指向原标签的jquery对象会全部失效,同时如果插件没有进行处理的话原标签的class和绑定的事件也会丢失。所以需要进行一定的处理。
处理分为两个函数,一个函数在渲染前提取数据,另一个在渲染后注入数据。调用方式如下:
[javascript]
var _data = getData(jq);
jq.** // 此处调用插件的渲染语句
setData(_data);
}
[/javascript]
getData返回一个obj包含了原始标签的包装对象,事件和class,如果有需要还可以继续添加。
setData第一句是用原始的选择器初始化一个jQuery对象获得新标签,然后用新jQuery对象中的dom替换老的,从而保证所有指向老jQuery对象的变量都会受到影响。注意,此处不能直接data.jq=$(data.jq.selector),这样实际上是改变了data.jq的指向,原来的类数组并没有得到改变。
setData第二三句分别将之前提取出的事件和classes注入新标签中。
[javascript]
function getData(jq) {
return {
jq : jq,
events : $.data(jq[0], ‘events’),
classes: .filter(jq.attr(‘class’).split(‘ ‘), function (v) {
return _.startsWith(v,’dhc-‘);
}).join(‘ ‘)
};
}
function setData(data) {
data.jq[0] = $(data.jq.selector)[0];
$.extend($._data(data.jq[0], ‘events’), data.events);
data.jq.addClass(data.classes);
}
[/javascript]