JS：day09

一、JavaScript 的分层概念 和 JavaScript 库

JavaScript分层（从下往上）

①base层：

位于最低端，负责封装不同浏览器下JavaScript的差异，提供统一接口；也可以给上两层提供接口。

②common层：

位于中间端，依赖base层提供的接口，功能是给上一层提供组件。

③page层：

位于最顶端，功能是来完成页面内的功能需求。

base层（查看 IE 和 Firefox 的区别）

1.以下IE会弹出 item2，Firefox 会弹出 undefined ；两行注释IE会弹出 1 和 3；Firefox会弹出 3 和 7

<ul>
    <li id="item1"></li>
    <li id="item2"></li>
    <li id="item3"></li>
</ul>

<script>
    var item1 = document.getElementById("item1");
    alert(item1.nextSibling.id);
//    alert(item1.nextSibling.nodeType);  弹出 类型为文本节点3
//    alert(document.getElementsByTagName("ul")[0].childNodes.length);   弹出ul的全部子节点 7
</script>

2.以下把空格和换行去掉会弹出一致的 item2

<ul><li id="item1"></li><li id="item2"></li><li id="item3"></li></ul>

<script>
    var item1 = document.getElementById("item1");
    alert(item1.nextSibling.id);
</script>

3.以下用来判断浏览器的类型

<ul>
    <li id="item1"></li>
    <li id="item2"></li>
    <li id="item3"></li>
</ul>

<script>
    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>

base层封装函数

var GLOBAL = {};

GLOBAL.namespace=function(str){

    var arr=str.split("."),o=GLOBAL;

    for(i=(arr[0]=="GLOBAL")? 1:0; i<arr.length; i++){

        o[arr[i]]= o[arr[i]] || {};

        o=o[arr[i]];

    }

};

兼容 / 阻止冒泡事件

//IE 和 Firefox 兼容
GLOBAL.Event.getEventTarget = function (e) {
    e = window.event || e;
    return e.srcElement || e.target;
};

//阻止冒泡事件
GLOBAL.Event.stopPropagation = function (e) {
    e = window.event || e;
    if(document.all){
        e.cancelBubble = true;
    }else{
        e.stopPropagation();
    }
};

透明度

//设置透明度(id，透明度)
GLOBAL.Dom.setOpacity = function (nodeElement,level){
    if (document.all){
        nodeElement.style.filter = 'alpha(opacity='+ level +')';
    }else{
        nodeElement.style.opacity = level / 100 ;
    }
};


//  调用
    GLOBAL.Dom.get("test1");
    GLOBAL.Dom.setOpacity(test1,30);
    GLOBAL.Dom.get("test2");
    GLOBAL.Dom.setOpacity(test2,50);

监听click事件

<style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
        }

    </style>


<div id="box">
    <input type="button" value="提交" id="btn"/>
</div>


<script>
    var btn = document.getElementById("btn");
    if(document.all){
        btn.attachEvent("onclick",function(){
            alert(1);
        });
    } else{
        btn.addEventListener("click",function(){
            alert(1);
        },false);
    }
    if(document.all){
        btn.attachEvent("onclick",function(){
            alert(2);
        });
    } else {
        btn.addEventListener("click", function () {
            alert(2)
        }, false);
    }
</script>

监听封装函数

//监听click事件
GLOBAL.Event.on = function (nodeElement,eventType,handler){
    if(document.all){
        nodeElement.attachEvent("on" + eventType,handler);
    }else{
        nodeElement.addEventListener(eventType,handler,false);
    }
};

Tab组件的扩展

<div class="tab">
    <ul class="tab-menu" id="tab-menu">
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
    </ul>
    <div class="tab-content" id="tab-content">
        <div>content1</div>
        <div style="display: none">content2</div>
        <div style="display: none">content3</div>
        <div style="display: none">content4</div>
    </div>
</div>

<script>
    var tabMenu = document.getElementById("tab-menu").getElementsByTagName("li"),
            tabContent = document.getElementById("tab-content").getElementsByTagName("div");

//    两种解决for循环的Bug
//    1.利用命名空间闭包
    for(var i=0;i<tabMenu.length;i++){
        (function(_i){
            tabMenu[_i].onclick = function(){
    //            遍历数组，隐藏所有 tabContent
                for(var j=0;j<tabContent.length;j++){
                    tabContent[j].style.display = "none";
                }
                tabContent[_i].style.display = "block";
            }
        })(i);
    }

//     2.给DOM节点添加 _index 属性，属性等于索引
//    for(var i=0;i<tabMenu.length;i++){
//            tabMenu[i]._index=i;
//            tabMenu[i].onclick = function(){
//                //            遍历数组，隐藏所有 tabContent
//                for(var j=0;j<tabContent.length;j++){
//                    tabContent[j].style.display = "none";
//                }
//                tabContent[this._index].style.display = "block";
//            }
//    }

</script>