又 从 James Padolsey 这里 得到个好的点子。
在实际写脚本过程中可能有段 Javascript 和 HTML 非常相关（比如实例化 Slider 等这样组件），那么通常我们会将它紧放到 HTML 的后面。
「传统」的做法需要顾虑的点有很多。因为脚本是立即被执行的，所以要考虑例如调用的组件是否已经声明，以及如果有 Ajax 请求是否会堵死浏览器等等。
下面的代码就是本篇 Blog 提供的另个思路，但愿我看起来不是那么的火星：
<div id="some-div">
<script type=":contextual">
alert(this.id); // "some-div" is alerted
</script>
</div>原文 作者的想法是改变 script 标签的 this 指向到父节点的 Element，从而关联上下文 HTML 结构。
看它的实现代码：
<script type="text/javascript">
~function() {
var scripts = document.getElementsByTagName('script'),
script, i = 0;
while ((script = scripts[i++])) {
if (/:contextual$/.test(script.type)) {
(new Function(script.innerHTML)).call(script.parentNode);
}
}
}();
</script>不过如原作者所说的外，其实还有很多顺带的好处
- 将 this 指向关联到父节点，遍历查找 DOM 非常的方便
- 相关的 script 标签和 HTML 结合紧密，很清楚就能明白这段脚本需要做什么
- 统一调用，可以考虑懒加载
- 方便复制粘贴 :^)
当然，上面的代码仅仅是个想法而已，在实际编码中还需谨慎应用。滥用此方法可以预料到的 些问题，比如：
- 脚本执行顺序改变
- 弄乱作用域，如果你的代码严重依赖 this ，那么将会是个噩梦（当然，这本身也不是个好习惯）
- 让不了解此机制的其他开发者迷惑
正如原作者所言，在我们写代码的时候能「Thinking outside the box」，那才是最重要的 :^)
-- EOF --
