Xhtml custom tags defining a namespace

Question

In many places, we saw that whenever a cross-site widget is imported, it comes with a custom tag with a specific namespace. My question is how you declare, use and modify this in JavaScript.

For example, say the Google +1 button. Import basically, you import javascript and then the <g:plusone></g:plusone> with g as the namespace.

I saw their source https://apis.google.com/js/plusone.js and it’s pretty hard to find how they defined their namespace in javaScript and imported it.

Basically, I want to make three functions.

• you can define the widget tag <x:y></x:y> and parse it with javascript for some dynamic html.
• This html content will contain dynamic content, animations and ajax calls that will be handled by this single javascript that I will import.
• The ability to import multiple widgets on one page, everything that works depends on it. If I update in one place, other places get updated.

Answer 1

Google namespaced their javascript but i don't think this is due to the xml tag

I actually just stumbled upon this article not so long ago: http://www.zachleat.com/web/selecting-xml-with-javascript/ and used Sarisa: http://dev.abiss.gr/sarissa/

You can define your own xml tag and set it to javascript to change the content. In addition, there is Taconite http://jquery.malsup.com/taconite/ , which in combination with Sarissa could give you what you are looking for.

As for namespacing javascript, you just need a function or object for the scope.

 var x = { y: function (){} }; 

In this example, y () is assigned the names x, so xy ()