Javascript协助

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

我认为您误解了模块模式的整体概念，当您需要在所有实例之间共享全局静态变量时，您可以在return语句之前使用关键字“var”声明或初始化变量

假设每当您更改这些变量时，所有实例都会受到更改的影响。

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;

您必须将这些变量移动到您的公共实例中，也就是在脚本的返回部分或构造函数中（但在这种情况下，您必须为每个变量提供一个getter）。

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;
      ...