关联的 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
投稿猜你喜欢
- 但还有另外一个问题 - 你以为你修改了某个变量，其实，被from module import *后的那个并没有被更新，非常危险，因为程序有可
- 本文实例讲述了Codeigniter发送邮件的方法。分享给大家供大家参考。具体分析如下：Codeigniter的邮件发送支持一下特性：Mul
1. Django: Python Web应用开发框架Django 应该是最出名的Python框架，GAE甚至Erlang都有框架受它影响。- 摘要：NumPy中包含大量的函数，这些函数的设计初衷是能更方便地使用，掌握解这些函数，可以提升自己的工作效率。这些函数包括数组元素的选取和多
- 1）去重指定多列去重，这是在dataframe没有独一无二的字段作为PK（主键）时，需要指定多个字段一起作为该行的PK，在这种情况下对整体数
- 前一段时间碰到这样的的问题，Ajax从后台得到的中文信息怎么都是空。后来到网上搜资料，大多是以下这样。用AJAX来GET回一个页面时，RES
- swiper是我之前做前端页面会用到的一个插件,我自己认为是非常好用的。swiper提供了形式多种多样、适应各个终端的轮播图效果。本文是小编
- 今天尝试着将引用文献的格式按照IEEE的标准重新排版，感觉手动一条一条改太麻烦，而且很容易出错，所以尝试着用Python写了一个小程序用于根
- 相信大家在学习python编程时绝对离不开数据库的连接，那么我们就用python来连接数据库实现一个简单的图书借阅系统。其实也很简单，就是在
- 本文实例讲述了js实现点击后将文字或图片复制到剪贴板的方法，代码非常简洁实用，具体功能代码如下所示：实现复制文字代码：<table w
- 前言编写函数或者类时，还可以为其编写测试。通过测试，可确定代码面对各种输入都能够按要求的那样工作。本次我将介绍如何使用Python模块uni
- 问题产生：今天在编写神经网络的Cluster作业时，需要根据根据数据标签用不同的颜色画出数据的分布情况，由此学习到了这种高效的方法。传统思路
- 任务：用python时间简单的统计任务-统计男性和女性分别有多少人。用到的物料：xlrd 它的作用-读取excel表数据代码：import
- 疫情数据程序源码// An highlighted blockimport requestsimport jsonclass epidemi
- 首先要用designer设计ui界面打开后就和c#一样拖动控件做ui界面保存后是xxx.ui文件再添加个工具Arguments：-m PyQ
- python之Pyperclip模块下面介绍一下，python中的Pyperclip模块，它的简单又实用，主要用法就2点：1.用于复制剪贴板
- 需求给定一个日期，格式如 “2020-2-12”，计算出这个日期是 2020 年的第几天？实现思路使用 tkinter 和 tkinter.
- 在最近一次项目有一个需求，点击按钮——异步提交——异步响应返回——根据响应返回值新开窗口。这有两个要点：异步响应之前不知道要打开窗口的URL
- 看看这个指令在ASP程序中的应用，有[delete from 歌手 where 艺名='cs2000']，删除艺名为cs20
- 1.语法规则1-1 代码实例sorted(iterable, key=None,reverse=False)1-2 参数说明(1)itera
