如何在一个网站或者一个页面，去书写你的JS代码

// JavaScript Document



//如何在一个网站或者一个页面，去书写你的JS代码：



//1.js的分层(功能) : jquery(tools)  组件(ui)  应用(app), mvc(backboneJs)

//2.js的规划(管理) : 避免全局变量和方法(命名空间，闭包，面向对象) , 模块化(seaJs,requireJs)



window.onload = function(){

    mv.app.toTip();

    mv.app.toBanner();

    mv.app.toSel();

    mv.app.toRun();

};



var mv = {};  //命名空间



mv.tools = {};



mv.tools.getByClass = function(oParent,sClass){

    var aEle = oParent.getElementsByTagName('*');

    var arr = [];

    

    for(var i=0;i<aEle.length;i++){

        if(aEle[i].className == sClass){

            arr.push(aEle[i]);

        }

    }

    

    return arr;

};



mv.tools.getStyle = function(obj,attr){

    if(obj.currentStyle){

        return obj.currentStyle[attr];

    }

    else{

        return getComputedStyle(obj,false)[attr];

    }

};



mv.ui = {};



mv.ui.textChange = function(obj,str){

    

    obj.onfocus = function(){

        if(this.value == str){

            this.value = '';

        }

    };

    

    obj.onblur = function(){

        if(this.value == ''){

            this.value = str;

        }

    };

    

};



mv.ui.fadeIn = function(obj){

    

    var iCur = mv.tools.getStyle(obj,'opacity');

    if(iCur==1){ return false; }

    

    var value = 0;

    clearInterval(obj.timer);

    obj.timer = setInterval(function(){

        var iSpeed = 5;

        if(value == 100){

            clearInterval(obj.timer);

        }

        else{

            value += iSpeed;

            obj.style.opacity = value/100;

            obj.style.filter = 'alpha(opacity='+value+')';

        }

    },30);

    

};



mv.ui.fadeOut = function(obj){

    

    var iCur = mv.tools.getStyle(obj,'opacity');

    if(iCur==0){ return false; }

    

    var value = 100;

    clearInterval(obj.timer);

    obj.timer = setInterval(function(){

        var iSpeed = -5;

        if(value == 0){

            clearInterval(obj.timer);

        }

        else{

            value += iSpeed;

            obj.style.opacity = value/100;

            obj.style.filter = 'alpha(opacity='+value+')';

        }

    },30);

    

};



mv.ui.moveLeft = function(obj,old,now){

    

    clearInterval(obj.timer);

    obj.timer = setInterval(function(){

        

        var iSpeed = (now - old)/10;

        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

        

        if(now == old){

            clearInterval(obj.timer);

        }

        else{

            old += iSpeed;

            obj.style.left = old + 'px';

        }

        

    },30);

    

};



mv.app = {};



mv.app.toTip = function(){

    var oText1 = document.getElementById('text1');

    var oText2 = document.getElementById('text2');

    

    mv.ui.textChange(oText1,'Search website');

    mv.ui.textChange(oText2,'Search website');

    

};



mv.app.toBanner = function(){

    var oDd = document.getElementById('ad');

    var aLi = oDd.getElementsByTagName('li');

    

    var oPrevBg = mv.tools.getByClass(oDd,'prev_bg')[0];

    var oNextBg = mv.tools.getByClass(oDd,'next_bg')[0];

    

    var oPrev = mv.tools.getByClass(oDd,'prev')[0];

    var oNext = mv.tools.getByClass(oDd,'next')[0];

    

    var iNow = 0;

    

    var timer = setInterval(auto,3000);

    

    function auto(){

        

        if(iNow == aLi.length-1){

            iNow = 0;

        }

        else{

            iNow++;

        }

        

        for(var i=0;i<aLi.length;i++){

            mv.ui.fadeOut(aLi[i]);

        }

        

        mv.ui.fadeIn(aLi[iNow]);

        

    }

    

    function autoPrev(){

        

        if(iNow == 0){

            iNow = aLi.length-1;

        }

        else{

            iNow--;

        }

        

        for(var i=0;i<aLi.length;i++){

            mv.ui.fadeOut(aLi[i]);

        }

        

        mv.ui.fadeIn(aLi[iNow]);

        

    }

    

    oPrevBg.onmouseover = oPrev.onmouseover = function(){

        oPrev.style.display = 'block';

        clearInterval(timer);

    };

    

    oNextBg.onmouseover = oNext.onmouseover = function(){

        oNext.style.display = 'block';

        clearInterval(timer);

    };

    

    oPrevBg.onmouseout = oPrev.onmouseout = function(){

        oPrev.style.display = 'none';

        timer = setInterval(auto,3000);

    };

    

    oNextBg.onmouseout = oNext.onmouseout = function(){

        oNext.style.display = 'none';

        timer = setInterval(auto,3000);

    };

    

    oPrev.onclick = function(){

        autoPrev();

    };

    

    oNext.onclick = function(){

        auto();

    };

    

};



mv.app.toSel = function(){

    var oSel = document.getElementById('sel1');

    var aDd = oSel.getElementsByTagName('dd');

    var aUl = oSel.getElementsByTagName('ul');

    var aH2 = oSel.getElementsByTagName('h2');

    

    for(var i=0;i<aDd.length;i++){

        aDd[i].index = i;

        aDd[i].onclick = function(ev){

            var ev = ev || window.event;

            var This = this;

            

            for(var i=0;i<aUl.length;i++){

                aUl[i].style.display = 'none';

            }

            

            aUl[this.index].style.display = 'block';

            

            document.onclick = function(){

                aUl[This.index].style.display = 'none';

            };

            

            ev.cancelBubble = true;

            

        };

        

    }

    

    for(var i=0;i<aUl.length;i++){

        

        aUl[i].index = i;

        

        (function(ul){

            

            var aLi = ul.getElementsByTagName('li');

            

            for(var i=0;i<aLi.length;i++){

                aLi[i].onmouseover = function(){

                    this.className = 'active';

                };

                aLi[i].onmouseout = function(){

                    this.className = '';

                };

                aLi[i].onclick = function(ev){

                    var ev = ev || window.event;

                    aH2[this.parentNode.index].innerHTML = this.innerHTML;

                    ev.cancelBubble = true;

                    this.parentNode.style.display = 'none';

                };

            }

            

        })(aUl[i]);

    }

    

};



mv.app.toRun = function(){

    var oRun = document.getElementById('run1');

    var oUl = oRun.getElementsByTagName('ul')[0];

    var aLi = oUl.getElementsByTagName('li');

    

    var oPrev = mv.tools.getByClass(oRun,'prev')[0];

    var oNext = mv.tools.getByClass(oRun,'next')[0];

    

    var iNow = 0;

    

    oUl.innerHTML += oUl.innerHTML;

    

    oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';

    

    oPrev.onclick = function(){

        

        if(iNow == 0){

            iNow = aLi.length/2;

            oUl.style.left = -oUl.offsetWidth/2 + 'px';

        }

        

        mv.ui.moveLeft(oUl,-iNow*aLi[0].offsetWidth,-(iNow-1)*aLi[0].offsetWidth);

        

        iNow--;

        

    };

    

    oNext.onclick = function(){

        

        if(iNow == aLi.length/2){

            iNow = 0;

            oUl.style.left = 0;

        }

        

        mv.ui.moveLeft(oUl,-iNow*aLi[0].offsetWidth,-(iNow+1)*aLi[0].offsetWidth);

        

        iNow++;

        

    };

    

    

};