Вот техника, которую я недавно использовал:
<div id="someelement">
<!-- {
someRandomData: {a:1,b:2},
someString: "Foo"
} -->
<div>... other regular content...</div>
</div>
Объект comment связан с родительским элементом (т.е. #someelement).
Вот парсер: http://pastie.org/511358
Чтобы получить данные для любого конкретного элемента, просто вызовите parseData со ссылкой на этот элемент в качестве единственного аргумента:
var myElem = document.getElementById('someelement');
var data = parseData( myElem );
data.someRandomData.a; // <= Access the object staight away
Это может быть более кратким, чем это:
<li id="foo">
<!--{specialID:245}-->
... content ...
</li>
Доступ к нему:
parseData( document.getElementById('foo') ).specialID; // <= 245
Единственным недостатком использования этого является то, что его нельзя использовать с самозакрывающимися элементами (например, <img/>), поскольку комментарии должны быть в пределах элемента, который будет рассматриваться как данные этого элемента.
EDIT
Заметные преимущества этой техники:
- Простота реализации
- не делает недействительным HTML / XHTML
- Простота в использовании / понимании (основные обозначения JSON)
- Ненавязчивый и семантически чище, чем большинство альтернатив
Вот код парсера (скопированный из гиперссылки http://pastie.org/511358 выше, на случай, если он когда-либо станет недоступным на pastie.org):
var parseData = (function(){
var getAllComments = function(context) {
var ret = [],
node = context.firstChild;
if (!node) { return ret; }
do {
if (node.nodeType === 8) {
ret[ret.length] = node;
}
if (node.nodeType === 1) {
ret = ret.concat( getAllComments(node) );
}
} while( node = node.nextSibling );
return ret;
},
cache = [0],
expando = 'data' + +new Date(),
data = function(node) {
var cacheIndex = node[expando],
nextCacheIndex = cache.length;
if(!cacheIndex) {
cacheIndex = node[expando] = nextCacheIndex;
cache[cacheIndex] = {};
}
return cache[cacheIndex];
};
return function(context) {
context = context || document.documentElement;
if ( data(context) && data(context).commentJSON ) {
return data(context).commentJSON;
}
var comments = getAllComments(context),
len = comments.length,
comment, cData;
while (len--) {
comment = comments[len];
cData = comment.data.replace(/\n|\r\n/g, '');
if ( /^\s*?\{.+\}\s*?$/.test(cData) ) {
try {
data(comment.parentNode).commentJSON =
(new Function('return ' + cData + ';'))();
} catch(e) {}
}
}
return data(context).commentJSON || true;
};
})();