0

我只是想更好地构建我的 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');
    };

我希望在调整窗口大小时，使用与初始 init 函数调用相同的参数调用baseline.init...

4

1 回答 1

3

这是主要错误

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
    };   
}();
于 2012-06-21T21:41:11.490 回答