以点带面

不要奢望工作中还有让你静下心来天天学习的环境，要做的是：天天捡珠子捡贝壳,合适的时机，把它们用线穿起来做成一条精美的项链。

珠子是什么样的珠子？首先你要识别，别说菜到连自己需要什么都不知道。

线是什么样的线？可能是自己的实践、可能是一本书、也可能是一个项目。

比如：网站重构

在06年年初做兼职时接触到网站重构的概念，我看到它的优点（当然是有基础的，在大学，由于经济原因做过很多开发网站的兼职工作），开始有意识的在实际工作中留意相关知识并研究它们。在实践中不断的检验应用自己的成果，让自己不断获得鼓励与信心。经过一年相关知识的学习和实践，我的重构相关技术已经相当纯熟。

再如：深入研究Javascript

当用JS写的程序越来越像大程序的时候，我们应该能够看到它的未来：根据我的判断，它将是未来富媒体应用的一个重要组成，整体架构上会越来越趋向于支持更多的面向对象的特性。

实际工作中，当需要封装一个JS类（姑且这么说）的时候，你会为一些具体问题和概念苦恼：如何不破坏封装性又能够为HTML对象注册事件？如何在对象内部获得对象本身的引用？闭包是个什么东西？prototype？

想象遇到这样一个注册事件的问题：

熟悉的传统方法是这样的:

<img id=”image” src=”” onclick=”test()” />

但是有个问题，不能实现结构与逻辑分离，怎么办？找到了下面这种解决方式：

window.onload = function(){
    document.getElementById(“image”).onclick = test;
}

可是这样不能注册多个监听器，怎么办？又找到了第三种解决方式：

window.onload = function(){
    document.getElementById(“image”).attachEvent(“onclick”,test);
}

问题又来了，你发现第三种方式在firefox无法运行，你意识到代码的平台兼容性问题。那在firefox下是如何像第三种方法一样注册事件的呢？

addEventListener，对，就是它！于是有了第三种方式的改进版本：

window.onload = function(){
         var element = document.getElementById(“image”);
         If(element.addEventListener){
                  element.addEventListener(“click”,test,false);
         } else {
         element.attachEvent(“onclick”,test);
         }
}

好了，现在第三种方法已经有了比较完美的解决方案.可怎么样才能让它更具有通用性和可移植性呢？研究之后，这样来做：

function addListener(element,e,fn){
         If(element.addEventListener){
                  element.addEventListener(e,fn,false);
         } else {
                  element.attachEvent(“on” + e,fn);
         }
}
window.onload = function(){
         var element = document.getElementById(“image”);
         addListener(element,”click”,test);
}

这样，addListener函数就可以挪到别的地方用了，可是又遇到这样的问题：你要在事件处理函数内部获得EVENT对象与img对象，并处理它们，怎么办？

你开始意识到给test函数传参，那么如何做？改写test函数？

YES！可是你发现给事件处理函数传参是很困难的事情。

怎么办？

灵活运用以上三种事件绑定手段，并找到它们的特性。

对于第一种方式，直接传参就可以了。

<script type=”text/javascript”>
function $(element){
         if(typeof(element) == “string”){
                   return document.getElementById(element);
         } else {
                  return element;
         }
}
function test(e,which){
         alert(e.type + “\n” + which.tagName);
}
</script>
<img id=”image” src=”” onclick=”test(event,this)” />

第二种方式可以在事件处理函数内部通过this指针获得img对象的引用，可以通过全局的window.event和隐含参数arguments[0](Firefox)获取EVENT对象。

<script type=”text/javascript”>
function $(element){
         if(typeof(element) == “string”){
                   return document.getElementById(element);
         } else {
                  return element;
         }
}
function test(e){
         e = e || window.event;
         alert(e.type + “\n” + this.tagName);
}
window.onload = function(){
         var Img = $(“image”);
         Img.onclick = test;
}
</script>
<img id=”image” src=”” onclick=”test(event,this)” />

出处：蓝色理想
责任编辑：moby

上一页 致有追求的Coder和可爱的部门同事 [1] 下一页 致有追求的Coder和可爱的部门同事 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。