Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

利用函数的形参列表选择回调参数

  在目前的JavaScript中,函数转换为字符串时通常可以得到函数的定义代码(内置函数和被bind的函数无法获取)。然后从函数定义代码中可以获取到函数的形参列表。于是在处理回调函数时我们可以分析回调函数的形参列表中的参数名来选择所需的参数传入。
  比如我们定义一个这样的函数:
//demo-extract-getElementById.js
function extract(f){
  var root=this.getElementById?this:document;
  var i,s=(f+"").match(/\([\s\S]*?\)/)[0].match(/[$\w]+/g);
  for(i=0;i<s.length;i++)if(s[i])s[i]=root.getElementById(s[i]);
  return f.apply(root,s);
};
  它接收一个回调函数,根据根据回调函数上的形参列表到所在对象上获取相应ID的元素,并作为参数传入回调函数中。可以这么使用 <base href="http://www.web-tinker.com/files/" />
<script src="demo-extract-getElementById.js"></script>
<span id="red">red</span>
<span id="green">green</span>
<span id="blue">blue</span>
<script>
extract(function(red,green,blue){
  red.style.color="red";
  green.style.color="green";
  blue.style.color="blue";
});
</script>
  甚至可以将其添加到DOM元素的原型上更方便地使用 <base href="http://www.web-tinker.com/files/" />
<script src="demo-extract-getElementById.js"></script>
<div id="scope1">
  scope1:
  <span id="red">red</span>
  <span id="green">green</span>
  <span id="blue">blue</span>
</div>
<div id="scope2">
  scope2:
  <span id="red">red</span>
  <span id="green">green</span>
  <span id="blue">blue</span>
</div>
<script>
HTMLElement.prototype.extract=extract;

extract(function(scope1,score2){
  scope1.extract(function(red,green,blue){
    red.style.color="#F00";
    green.style.color="#0F0";
    blue.style.color="#00F";
  });
  scope2.style.color="#CCC";
});
</script>

  这里只是为了演示这个做法的方便之处所以这么写了,实际上我并不推荐在原生对象的原型上绑定奇怪的东西。另外,上面的演示只是使用了getElementById而已,但这种用法绝不仅限于此。最后要注意的是由于JavaScript的变量名限制,本身也不能支持太奇葩的参数名,所以好自为之吧。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^