关联的 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”，那才是最重要的 :^)
0
投稿猜你喜欢
- 恭喜您，您中奖了，你的中奖码是（请牢记，领奖需要）：ＸＸＸＸＸＸＸＸＸＸＸ然后用户输入ＸＸＸＸＸＸＸＸＸＸＸ，简单验证后就可以领奖了。你使用
- OL是有序列表，但给list-style-type:decimal 定义，在IE中却显示的全是1，在火狐、Opera、谷歌、Safari等中
- 在我前一阵子刚刚写了“HTML5与Flash，不得不说的话题”的评论后，如各位所料，由于牵扯到多方利益和未来标准制定的角色份量，这不，有可能
- 演示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
- 内容摘要：ASP与存储过程(Stored Procedures)的文章不少，但是我怀疑作者们是否真正实践过。我在初学时查阅过大量相
- asp之家注：对于ACCESS数据库中的NULL，经常我们直接判断该字段是否为空用的是：name="",但是这个还不够，
先让我们看一个例子，了解什么是模式化窗口。以下是QQ秀商城在非登录时提示登录的一种状态。当我在非登录状态，通过保存形象的方式买一件衣服时，弹- 方法一：利用Cookies对象 因为Cookies对象把变量的值保存在浏览器客户端，所以可以根据Cookies保存的IsVoted的值来判断
- XML是一个精简的SGML，它将SGML的丰富功能与HTML的易用性结合到Web的应用中。XML保留了SGML的可扩展功能，这使XML从根本
- 假设mysql安装在c:盘，mysql数据库的用户名是root，密码是123456，数据库名是database_name，在d:盘根目录下面
- 在我们的生活中，只要你睁开眼睛就能看到各种各样的视觉。不同的视觉能给你不同的视觉暗示，同样能给你不同的心理感受。视觉这个话题太泛了，大自然中
- ASP通过XMLDom在服务器端操作XML文件的主要方法和实现对于小数据量，xml文件在检索更新上于ACCESS有很多优势。我曾经测试过不用
- blankzheng的blog：http://www.planabc.net/margin在中文中我们翻译成外边距或者外补白（本文中引用外边
- 记住：这时候08安装的时候要自定义一个实例 比如：mysql2008(不能在使用默认实例了) sql server 2008 express
- 可及，通俗的说是“可以达到”，加上主语和宾语，在“交互设计”这个大的语境下，含义应该是“用户可以达到自己的操作目标”，这不是和“有效性—用户
- 我在初学时查阅过大量相关资料，发现其中提供的很多方法实际操作起来并不是那么回事。对于简单的应用，这些资料也许是有帮助的，但仅限于此，因为它们
- 利用 CSS 框架，可以简化你的工作，提高工作效率。CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表
- 我们在前面的几节中分别讲了提高网站性能中内容、服务器、JavaScript和CSS等方面的内容。除此之外，图片和Coockie也是我们网站中
- 大家应该经常看到在文本框里提示文字，然后一点就没了。通常做法都是默认给个value，通过js来处理。详细实现都不介绍了，大家都会。现在来看一
- 先看下面例子的效果：<INPUT TYPE="text" NAME=""&
