Web前端开发--JavaScript的分层

    JavaScript分层

1 . base层

       位于三层的最底端，这一层有俩个职责，职责一是分装不同的浏览器下JavaScript的差异，提供一个统一的接口，可以通过他来完成跨浏览器兼容的工作。职责二是扩展JavaScript语言底层提供的接口，让它提供更多的更为易用的接口。base层的功能是给common层和page层提供接口的。

2 . common层

       位于三层中间，依赖于base层提供的接口。common层提供可供复用的组件，他是典型的mvc模式中的m，和页面内的具体功能没有直接关系，common层的功能是给page层提供组件。

3 . page层

       位于三层的最顶端。这一层和页面的具体功能需求直接关系，是mvc模式中的c,page层依赖于base层和common层。page层的功能是完成页面内的功能需求。

    base层

位于三base层的功能是为common层和page层提供接口。接口由俩部份组成，与这一层的俩个职责对应。职责一是“封装不同浏览器下的JavaScript的差异，提供统一的接口”。 

<u1>
    <1i id="item1"></1i>
    <1i id="item2"></1i>
    <1i id="item3"></1i>
</u1>
<script type="text/JavaScript">  
    var item1=document.getElementById("item1");
    alert (item1.nextSibling.nodeType);
    alert(document.getElementsByTagName("u1")[0].childNodes.length);
</script>  

       在IE下，会弹出1和3，在Firefox下会弹出3和7。Firefox会将空白、换行等文本信息也当做是childNdes中的一员，而IE则忽略它，只将DOM节点当做是childNodes的一员，这样我们的程序就无法兼容IE和Firefox了。

       解决方案一：我们将所有空白换行去掉，IE和Firefox弹出的结果就一致了，但是会绑定HTML的结构让程序和HTML产生了耦合。

       解决方案二：

<u1>
    <1i id="item1"></1i>
    <1i id="item2"></1i>
    <1i id="item3"></1i>
</u1>
<script type="text/JavaScript">  
    var item1=document.getElementById("item1");
    var nextNode=item1.nextSibling;
    //Firefox不支持document.all。这里用以判别浏览器类型
    if(!document.all){
        while(true){
            if(nextNode.nodeType==1){
                break;
            } else{
                if(nextNode.nextsibling){
                    nextNode=nextNode.nextsibling;
                } else {
                     break;
                }
            }
        }
}
alert(nextNode.id);
</script> 

       document.all是IE支持的属性，Firefox不支持，我们先通过document.all判断浏览器的种类，Firefox则取nextSibling时一直往下查，直到找到下一个DOM节点为止。但是这种解决方案缺点也很明显，一它使代码的可读性变差了，二代码的重用性不高。

       解决方案三：

<u1>
    <1i id="item1"></1i>
    <1i id="item2"></1i>
    <1i id="item3"></1i>
</u1>
<script type="text/JavaScript"> 
    function getNextNode(node){
        node=typeof node=="string" ? document.getElement.getElementId(node) : node;
        var nextNode=node.nextSibling;
        if(!nextNode) return null;
        if(!document.all){
            while(true){
                if(nextNode.nodeType==1){
                    break;
                } else{
                    if(nextNode.nextsibling){
                        nextNode=nextNode.nextsibling;
                    } else {
                         break;
                    }
                }
            }
    }
    return nextNode;
};
var nextNode=getNextNode("item1");
alert(nextNode.id);
var nextNode2=getNextNode("item2");
alert(nextNode2.id);
</script> 

       我们先定义了一个函数getNextNode,函数接收DOM节点或者DOM节点的id作为参数，返回我们需要的nextSibing，即在需要的地方调用函数。函数内部对浏览器类型做了if判断，做了大量工作，但他本身充当的是mvc中的m，供c调用，对c来说m内部是透明的，可以反复的调用，提高了代码的重用率，通过函数getNextNode，实现了跨浏览器的兼容，这里的getNextNode函数就是接口。base层作用之一就是提供大量的接口用以屏蔽原生JavaScript在不同浏览器下的差异。

   base的职责二，以及common层page层会在以后的博客中一一讲到.

   (mvc ：http://zh.wikipedia.org/zh/MVC)