experiment – making use of and script and style tags’ innerHTML, with src=”” to suppress browser eval()’ing them

13 Oct

TiddlyWiki has a ton of superb patterns, misunderstood or untapped by
the rest of the community. I’ve been playing around tonight with a
greenfield framework inspired by those patterns. Won’t say too much
yet, but the main interesting thing is to think about microkernel
patterns and the “even playing field” you get in plugin architectures
like the Eclipse framework. It also has elements of unobtrusiveness,
an idea @philhawksworth was experimenting with a while back. For now,
it’s just a little experiment, but I wanted to mention one interesting
thing about it.

The idea of an “even playing field” is that the framework developer
doesn’t get any more rights than any third-party making plugins; the
third-party could swoop on in, using plugins alone and not any special
jiggery-pokery, and completely change the application’s inner workings.

In other words, there’s just a teeny tiny core – basically jQuery (which
will eventually be ousted to a plugin too) and 30 lines – which is responsible
for processing plugins. Everything  else – what most people would consider
central to the app’s identity – is plugins. In TiddlyWiki style, everything is a simple block of text,
whether it’s a Javascript plugin, a stylesheet, some data, or a bit of
content. While you might expect me to store each of those things in a
div, I do something else; I store it in either a div, or a script, or
a stylesheet, depending on its nature. BUT – here’s the interesting
part – I treat the scripts and stylesheets as regular tiddler-type
blocks; so I manually read their innerHTML and apply them. You might
wonder, if they contain innerHTML, how can I suppress the browser
appying it when the page loads? The answer is to exploit something Jon
Resig pointed out – script tag bodies don’t get applied if there’s a src. I found that by setting src=””
in either script or style tags, the browser won’t eval them.

The script and style tags can still have id and class attributes, and
anything else I want like tags, but they are processed by my
microkernel framework rather than the browser. A couple of reasons I
want to process them myself are so I can perform dependency
management, and so I can provide tools related to them; for instance,
to show all the code, or to suppress certain plugins being eval’d.
Similar stuff to tiddlywiki.

You might then ask why not just hold these in divs. The answer is I’m
trying to make the HTML as close as possible to a real HTML web page.
By doing so, the page will validate fine, and things like HTML comments
or closing divs in the middle of Javascript won’t break the whole thing.
Also, tools like editors will work better. I noticed this as
soon as I started typing javascript in a div, and vim’s syntax
highlighting was FAIL.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: