一體化window.onresize成OO JS類

Question

我只是努力造我的JavaScript更好，不知道如何將window.onresize到返回的對象，像這樣：

var baseline = function(){ 

    var tall, newHeight, target, imgl, cur, images = []; 

    return { 

     init: function(selector, target){ 
      this.images = document.querySelectorAll(selector); 
      this.target = target; 
      this.setbase(this.images); 
      window.onresize = this.setbase(this.images); 
     }, 

     setbase: function(imgs){ 
      this.imgl = imgs.length; 
      if(this.imgl !== 0){ 
       while(this.imgl--){ 
        this.cur = imgs[this.imgl]; 
        this.cur.removeAttribute("style"); 
        this.tall = this.cur.offsetHeight; 
        this.newHeight = Math.floor(this.tall/this.target) * this.target; 
        this.cur.style.maxHeight = this.newHeight + 'px'; 
       } 
      } else { 
       return false; 
      } 
     } 

    } 

}(); 

這是的方式，人們會做到這一點，這是否工作？由於

編輯：

調用，像這樣：

window.onload = function(){ 
     baseline.init('img', '24'); 
    }; 

我想這樣，當窗口大小，baseline.init被稱爲具有相同PARAMS作爲初始初始化函數調用。 ..

Answer 1

這裏的主要錯誤

init: function(selector, target){ 
    this.images = document.querySelectorAll(selector); 
    this.target = target; 
    this.setbase(this.images); 
    // This line says call setbase now and assign the result of that 
    // as the onresize handler 
    window.onresize = this.setbase(this.images); 
}, 

• 您的this.images未指向您創建的var images = []。這是爲了當你使用原型風格的對象。你應該在你的函數中使用images。
• 你的一些變量看起來像只在setBase中使用，它們應該是本地的
• 看着你的對象，很難說出它應該做什麼，聽起來像是在代碼中包裝對象只是爲了將它包裹在一個物體中。基準是什麼意思？

這裏有一個更好的版本的代碼，你應該閱讀和理解http://www.joezimjs.com/javascript/javascript-closures-and-the-module-pattern/和http://js-bits.blogspot.com/2010/08/javascript-inheritance-done-right.html這樣你就可以決定你想要什麼模式來使用，他們是如何工作的。即使你不打算，你正在混合兩種模式。訣竅是，用這樣你寫它（模塊模式）沒有必要在代碼中使用this，它們實際上是爲模塊

var baseline = function(){ 
    // Don't use "this.tall", just "tall" gets you the variable 
    // Class variables, are you sure you need them throughout the class 
    var tall, newHeight, target, imgl, cur, images = []; 

    // Different name for the parameter so it doesn't get confused with 
    // the class variables 
    function init(selector, pTarget) { 
     images = document.querySelectorAll(selector); 
     target = pTarget; 
     setBase(); 
     // Since we're not using this, you 
     // can just reference the function itself 
     window.onresize = setBase 
    } 

    // Most JS developers name methods using camelCase 
    function setBase() { 
     imgl = imgs.length; 
     if(imgl !== 0){ 
      while(imgl--){ 
       cur = imgs[imgl]; 
       cur.removeAttribute("style"); 
       tall = cur.offsetHeight; 
       newHeight = Math.floor(tall/target) * target; 
       cur.style.maxHeight = newHeight + 'px'; 
      } 
      // should you return true here? what does returning 
      // something even mean here? 
     } else { 
      return false; 
     } 
    } 

    // Return just the public interface 
    return {  
     init: init 
     setBase: setBase 
    }; 
}();