Gracecode.com

关联的 script 标签

作者：手气不错 发布时间：October 28, 2009 分类：JavaScript

又从 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>

不过如原作者所说的外，其实还有很多顺带的好处

1. 将 this 指向关联到父节点，遍历查找 DOM 非常的方便
2. 相关的 script 标签和 HTML 结合紧密，很清楚就能明白这段脚本需要做什么
3. 统一调用，可以考虑懒加载
4. 方便复制粘贴 :^)

当然，上面的代码仅仅是个想法而已，在实际编码中还需谨慎应用。滥用此方法可以预料到的 些问题，比如：

1. 脚本执行顺序改变
2. 弄乱作用域，如果你的代码严重依赖 this ，那么将会是个噩梦（当然，这本身也不是个好习惯）
3. 让不了解此机制的其他开发者迷惑

正如原作者所言，在我们写代码的时候能“Thinking outside the box”，那才是最重要的 :^)

-- EOF --