如何将数组传递给用户定义的对象或将非OO代码转换为OO？javascript

我真的很难在js中进行OO编码。我已经编写了一段代码，它在3个div之间循环，并在任何div的悬停处暂停。这段代码只是使用array/json作为输入的常规js。代码有点长，很抱歉。我只需要一些关于如何将这个原始代码转换为更好的形式的指导，如在OO和encap中。当我自己尝试时，我无法将slides数组/json传递给我定义的对象。有没有一个技巧或指导方针，我可以遵循如何重写到一个更好的形式

编辑-要遵循什么好的指导原则，以便我可以用对象而不是全局变量和松散函数重写它

var slideIndex = 0;
var prevIndex = 0;
var t;

function initPromo(){
sortSlides();
nextPromo();
addListeners();
}    

function addListeners(){
for(var i=0; i<slides.length; i++) 
    $(slides[i].el).hover(function(){ stopPromo(); }, function(){ resumePromo(); });
}
function resumePromo(){ startTimer(); }

function stopPromo(){ clearTimeout(t); }

function nextPromo(){
    if(slideIndex > 0 || prevIndex > 0) $(slides[prevIndex].el).css("display","none");
    $(slides[slideIndex].el).css("display","block");
    prevIndex = slideIndex;
    slideIndex = (slideIndex<slides.length-1) ? slideIndex+1 : 0;
    startTimer();
}

function startTimer(){ t = setTimeout("nextPromo()", 3000); }

function SortByWeight(a,b) { return b.weight - a.weight; }
function SortByWeightFr(a,b) { return b.frWeight - a.frWeight; }

function sortSlides(){
    ($("body.en").length > 0) ? slides.sort(SortByWeight) : slides.sort(SortByWeightFr);    
}

var slides = [
{
    el:'#ps1',
    weight:1,
    frWeight:3
},
{
    el:'#ps2',
    weight:0.5,
    frWeight:6
},
{
    el:'#ps3',
    weight:4,
    frWeight:9
}
];
window.onload = function () {
    initPromo();    
};

var slideIndex=0；
var指数=0；
变量t；
函数initPromo（）{
sortSlides（）；
nextPromo（）；
addListeners（）；
}    
函数addListeners（）{
对于（VARI=0；I0 | | prevIndex>0）$（幻灯片[prevIndex].el）.css（“显示”、“无”）；
$（幻灯片[slideIndex].el）.css（“显示”、“块”）；
prevIndex=滑动索引；
slideIndex=（slideIndex 0）？slides.sort（SortByWeight）：slides.sort（SortByWeightFr）；
}
变量幻灯片=[
{
el:“#ps1”，
体重：1，
体重：3
},
{
el:“#ps2”，
重量：0.5，
体重：6
},
{
el:“#ps3”，
体重：4，
体重：9
}
];
window.onload=函数（）{
initPromo（）；
};

HTML

ps1ps2ps3

编辑：在OO编码的早期，没有以正确的方式提出问题

您的“普通javascript”代码已经在这方面发挥了作用。您定义的第一个函数标识域对象：Promo

var Promo=function（）{}

您可以在promo、init、start、stop、resume等实例上执行操作。这些操作可以在
promo
的原型上定义

Promo.prototype.init = function() {
  // ...
};

每次都会有一点烦人的输入原型，所以我们可以将原型绑定到一个指针中，让我们更容易访问

var Promo = function () { };
(function(obj) {

    obj.init = function() {
        // ...
    };

})(Promo.prototype);

所以我们有了一些结构，但我们现在需要分离关注点。在整个纯javascript中，代码中散布着配置类型的数据。通常，将这些数据位隔离到对象的单个入口点是一个好主意

obj.init = function(_el) {
     // where _el is the base element of this widget
};

我看到您也在使用jQuery，这很好，因为它为您提供了很多功能。我喜欢使用的一种约定是，我不想将大量配置数据传递给给定的小部件，而是给我的对象提供最小配置，让它们检查HTML以确定其他配置数据。这样做的另一个好处是，如果你想在将来添加幻灯片或对幻灯片内容进行更改，你不必担心更改JS

假设我们将幻灯片HTML更改为

<div id="promoSlides">
    <div data-type="slide" data-slide-id="1">ps1</div>
    <div data-type="slide" data-slide-id="2">ps2</div>
    <div data-type="slide" data-slide-id="3">ps3</div>
</div>

现在我们正在传递最小配置，我们已经将幻灯片的标识分离到HTML，并且我们已经为一个自给自足的对象提供了一个很好的模式。剩下的将是填写细节（完全未经测试，但类似的东西）

请注意，我使用了旧版IE中尚不支持的
bind
。
这并不是转换为面向对象风格所需要的代码

以下是我在那里看到的问题：


全球范围的污染
将固定CSS规则与Javascript混合使用
在循环中使用
.length
属性
无活动授权
错误放置
标签，导致使用
窗口。onload
在不需要时创建新的jQuery对象
在jQuery调用中使用CSS3选择器
不知道如何使用
setTimeout（）
与HTML紧密耦合（每张幻灯片上的id）
很难找出此处的确切问题，我相信您对我代码中的所有错误都是正确的，但这并不能真正帮助我纠正错误them@user1058134，我无意用勺子喂你“正确的代码”。它们是提高代码质量的唯一方向。我已经说过，仅仅因为它是OO而“编写OO”是毫无意义的。我不想你用勺子喂我，但你所做的只是提到我的代码有多糟糕。我要找的是建设性的批评，我要找的是如何和在哪里写更好的代码，我如何学习OO，我在哪里找到这些资源，我应该遵循什么样的模式作为一般的指导方针，诸如此类的东西你试过问谷歌“javascript全球范围”、“javascript事件委托”或“javascript循环数组长度”和阅读一些第一个链接？不，我甚至不知道这意味着什么，我怎么知道如何查找它们。你是一个可怕的老师谢谢你的帮助，我理解你在这里写的部分内容。我想我对OO风格不了解的主要内容是什么“这是什么？”“有时指。我还没有掌握OO的概念，看看这个：还有这个：
<div id="promoSlides">
    <div data-type="slide" data-slide-id="1">ps1</div>
    <div data-type="slide" data-slide-id="2">ps2</div>
    <div data-type="slide" data-slide-id="3">ps3</div>
</div>

obj.init = function(_el) {
    this.baseElement = $(_el);
    this.slides = this.baseElement.find('*[data-type="slide"]');
};

var Promo = function () { };
(function (obj) {

    obj.init = function(_el, _delay) {

        // Initialize markup
        this.baseElement = $(_el);
        this.slides = this.baseElement.find('*[data-type="slide"]');
        this.slideDelay = _delay;

        // Sort slides
        // (not sure what's going on here)

        // Bind events
        this.baseElement
            .on('mouseenter', this.stop.bind(this))
            .on('mouseleave', this.start.bind(this));
    };

    obj.start = function() {
        this.timer = setInterval(this.advance.bind(this), this.slideDelay);
    };

    obj.stop = function() {
        clearInterval(this.timer);
    };

    obj.advance = function() {
        // Slide the visible slide off screen
        // (note: the parent tag will need overflow:hidden)
        var visible = this.baseElement.find('*[data-type="slide"]:visible');
        visible.animate({ left: '-' + (visible.width()) + 'px' }, 1000);
        // Slide the next slide in
        var next = visible.next();
        next.css('left', this.baseElement.width() + 1).animate({ left: '0' }, 1000);
    };

})(Promo.prototype);