Javascript Assistance

Question

У меня возникает проблема, когда функция вызывается несколько раз для разных элементов. Я считаю, что мне нужно локализовать все переменные так, чтобы эту функцию можно было использовать против нескольких элементов. В случае, если это имеет значение, я также называю jquery 1.3.

Если я вызываю pageSlide только один раз, все в порядке, но если я вызываю его несколько раз, становится больно. Нет ошибок, только ошибочное поведение.

Код был обновлен

var slideMenu=function(){
  var speed, startWidth, time, menuId, liID, menuLen, menuWidth, globalWidth, openWidth;
  return{

    speed : 0, startWidth : 0, time  : 0, menuId  : 0, liID : 0, menuLen  : 0,        menuWidth  : 0, globalWidth : 0, openWidth : 0,

    build:function(ulID,passStartWidth,passTime,s,passSlideLen,passHeight){
      speed=s;
      startWidth=passStartWidth;
      time=passTime;
      menuId=document.getElementById(ulID);
      liID=menuId.getElementsByTagName('li');
      menuLen=liID.length;
      menuWidth=menuId.offsetWidth;
      globalWidth=menuWidth/menuLen;
      openWidth=Math.floor((menuWidth-startWidth)/(menuLen-1));
      var i=0;
      for(i;i<menuLen;i++){
        s=liID[i];
        s.style.width=globalWidth+'px';
        this.timer(s)
      }
      if(passSlideLen!=null){
        menuId.timer=setInterval(function(){
          slideMenu.slide(liID[passSlideLen-1])
        },time)
      }
    },
    timer:function(s){
      s.onmouseover=function(){
        clearInterval(menuId.htimer);
        clearInterval(menuId.timer);
        menuId.timer=setInterval(function(){
          slideMenu.slide(s)
        },
        time)
      }
      s.onmouseout=function(){
        clearInterval(menuId.timer);
        clearInterval(menuId.htimer);
        menuId.htimer=setInterval(function(){
          slideMenu.slide(s,true)
        },
        time)
      }
    },
    slide:function(s,passChange){
      var changeWidth=parseInt(s.style.width);
      if((changeWidth<startWidth && !passChange) || (changeWidth>globalWidth && passChange)){
        var overallWidth=0;
        var i=0;
        for(i;i<menuLen;i++){
          if(liID[i]!=s){
            var slideObj,openWidth; var opening=0; slideObj=liID[i]; openWidth=parseInt(slideObj.style.width);
            if(openWidth<globalWidth && passChange){
              opening=Math.floor((globalWidth-openWidth)/speed);
              opening=(opening>0)?opening:1;
              slideObj.style.width=(openWidth+opening)+'px';
            }else if(openWidth>openWidth && !passChange){
              opening=Math.floor((openWidth-openWidth)/speed);
              opening=(opening>0)?opening:1;
              slideObj.style.width=(openWidth-opening)+'px'
            }
            if(passChange){
              overallWidth=overallWidth+(openWidth+opening)}else{overallWidth=overallWidth+(openWidth-opening)
            }
          }
        }
        s.style.width=(menuWidth-overallWidth)+'px';
      }else{
        clearInterval(menuId.timer);
        clearInterval(menuId.htimer)
      }
    }
  };
}();

Приведенный выше код не является ошибкой, но не работает. Когда я использую это ключевое слово, оно не становится лучше.

Мой вопрос: какие переменные должны быть "this". Я пробовал различные комбинации, которые, как я думал, будут работать, но я что-то упустил.

Answer 1

Я думаю, что вы неправильно понимаете общую концепцию шаблона модуля: когда вам нужно иметь глобальную статическую переменную, совместно используемую всеми вашими экземплярами, вы можете объявить или инициализировать вашу переменную с ключевым словом "var" непосредственно перед оператором return .

Предположим, что всякий раз, когда вы изменяете эти переменные, все ваши экземпляры будут затронуты изменением .

var slideMenu=function(){
    // Declare or initialize your private static variables here    
    var speed, startWidth, time;

    return {
        // Public part of your object
        slide:function(s,passChange){
            //To access your variable        
            speed = 20;
        ...

С другой стороны, если вы хотите защитить переменную от глобальной области видимости, вы должны поместить свою переменную в объект, возвращаемый вашей функцией, это надежный способ предоставить уникальных для каждого экземпляра свойств .

var slideMenu=function(){
    // Declare or initialize your private static variables here    
    var speed, startWidth, time;

    return {
        // Public part of your object
        // Declare internal or public properties here
        menuId  : 0, 
        liID    : 0, 
        menuLen : 0,
        ...
        slide:function(s,passChange){
            //To access your private static variable inside functions        
            speed = 20;
            // To access your public/internal properties
            this.menuId = s; // for example ;) 
        }

Заключить

Иногда, чтобы помочь отличить внутренние / публичные свойства, некоторые люди пишут подчеркивание своих внутренних свойств (обратите внимание, что свойства по-прежнему будут доступны извне).

Надеюсь, это поможет, удачи!

Answer 2

Вы получаете это поведение, потому что вы используете шаблон модуля, который позволяет хранить частные статические переменные в вашем объекте. Проблема в том, что эти переменные являются общими для всех экземпляров.

  var sp=0;
  var st=0;
  var t=0;
  var m='';
  var sa='';
  var l=0;
  var w=0;
  var gw=0;
  var ot=0;

Вы должны переместить эти переменные в ваш публичный экземпляр, то есть в возвращаемую часть вашего скрипта или в конструктор (но в этом случае вам придется предоставить геттер для каждой переменной).

return{

   // Place your variables here
   sp : 0,
   st : 0,

   ...

   build:function(sm,sw,mt,s,sl,h){
      // And then use the this keyword to access the variable
      this.sp=s;
      this.st=sw;
      t=mt;
      m=document.getElementById(sm);
      sa=m.getElementsByTagName('li');
      l=sa.length;     
      w=m.offsetWidth;     
      gw=w/l;
      ...