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，并使用与初始init函数调用相同的参数...

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
    };   
}();

将window.onresize合并到OO JS类中

1 个答案: