js如何面向对象?

发布于 2022-09-04 02:25:16 字数 2747 浏览 21 评论 0

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

!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)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

与君绝 2022-09-11 02:25:16

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

北方的韩爷 2022-09-11 02:25:16

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

得不到的就毁灭 2022-09-11 02:25:16

= 换成 :

OBJ={
   v:1, //变量
   fireEv:function(obj,evName,fn){....}, //函数
}
OBJ.fireEv(obj,evName,fn) //调用
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文