关联的 script 标签
作者:手气不错 来源:Gracecode.com 时间:2009-11-02 10:40:00
又从 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”,那才是最重要的 :^)