将window.onresize合并到OO JS类中

Incorporate window.onresize into OO JS class

本文关键字：OO JS 类中合并 window onresize 更新时间：2023-09-26

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