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)
阅读 3.4k
4 个回答

比起面向对象,JS更适合函数式编程。

面向对象只不过是想要他的那种风格,特性。不是说怎么写就是了。面向对象,面向过程,都是看问题才去选用的。本来就需要一个四舍五入的函数,应急,你就没有必要做一个Math类

= 换成 :

OBJ={
   v:1, //变量
   fireEv:function(obj,evName,fn){....}, //函数
}
OBJ.fireEv(obj,evName,fn) //调用
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题