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)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
https://github.com/jsfront/qa...
比起面向对象,JS更适合函数式编程。
面向对象只不过是想要他的那种风格,特性。不是说怎么写就是了。面向对象,面向过程,都是看问题才去选用的。本来就需要一个四舍五入的函数,应急,你就没有必要做一个Math类
把
=
换成: