如何在一个网站或者一个页面，去书写你的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++;
        
    };
    
    
};

 

转载于:https://my.oschina.net/u/3147332/blog/807074