javascript - js如何面向对象？

问题描述

问 题

各位前辈，小弟通过阅读高程，理解了创建对象的几种方式和继承的实现原理，但是如何将对象创建、继承应用到面向对象的编程实践中呢？
比如我写了以下代码，是一个新闻滚动播出的功能，我该如何将其面相对象呢？
又或者说，我该怎么转化？

!function(window,document){
    var list=document.querySelector(".scroll-item"),//ul，作为横向移动的容器
        list_item=document.querySelectorAll(".scroll-items"),//li，作为内容
        list_item_len=list_item.length,
        isSupportTransform=("transform" in document.documentElement.style||"webkitTransform" in document.documentElement.style||"mozTransform" in document.documentElement.style||"msTransform" in document.documentElement.style),
        timer=null,
        i=0,
        j=0,
        n=0,
        offset_n=1,
        arr=[],
        offsetMargin=0,
        list_width=0,
        sp_time=30;
    function bindEv(obj,evName,fn){
        //绑定函数
        if(window.addEventListener){
            obj.addEventListener(evName,fn);
        }else{
            obj.attachEvent("on"+evName,fn);
        }
    }
    function fireEv(obj,evName,fn){
        if(window.removeEventListener){
            obj.removeEventListener(evName,fn);
        }else{
            obj.detachEvent("on"+evName,fn);
        }
    }
    function initWidth(){
        var i=0;
        for(;i<list_item_len;i++){
            !function(i){
                list_item[i].index=i;
                arr.push(list_item[i].offsetWidth);
                list_width+=arr[i];
            }(i);
        }//for
        list.innerHTML+=list.innerHTML;//为了实现无缝又复制了一遍内容
        list.style.width=list_width*2+"px";
        setTimer();
    }

    function cleanTimer(){
        if(timer){
            clearInterval(timer);
            timer=null;
        }
    }
    function setTimer(){
        cleanTimer();
        timer=setInterval(tmpTimer,sp_time);
    }

    function tmpTimer(){
        n+=offset_n;
        if(n>=list_width){
            n=0;
        }
        render();
    }
    
    function listMouseOver(ev){
        var e=ev||window.event,
            _target=e.target||e.srcElement;
        if(_target.nodeName.toLowerCase()=="li"||_target.nodeName.toLowerCase()=="a"){
            cleanTimer();
        }
    }
    function listMouseLeave(){
        setTimer();
    }
    function render(){
        if(isSupportTransform){
            list.style.transform="translate3d("+(-n)+"px,0,0)";
            list.style.webkitTransform="translate3d("+(-n)+"px,0,0)";
            list.style.mozTransform="translate3d("+(-n)+"px,0,0)";
            list.style.msTransform="translate3d("+(-n)+"px,0,0)";
        }else{
            list.style.left=-n+"px";
        }
    }
    initWidth();
    bindEv(list,"mouseover",listMouseOver);
    bindEv(list,"mouseleave",listMouseLeave);
    // console.log(arr,list_width);
}(window,document)

解决方案

https://github.com/jsfront/qa...

这篇关于javascript - js如何面向对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！