将window.onresize合并到OO JS类中

Question

I'm just trying to structure my Javascript better and wondering how to incorporate window.onresize into the returned object, like so:

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

    }

}();

Is this the way that people would do it, is this going to work? Thanks

EDIT:

Invoked like so:

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

I would like it so that when the window is resized, baseline.init is called with the same params as the initial init function call...

Answer 1

Here's the main error

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

• Your this.images does not point to the var images = [] you've created. This is for when you're using protoype style objects. You should just use images in your functions.
• Some of your variables look like they're only used in setBase, they should be local
• Looking at your object, it's very hard to tell what it's supposed to do, sounds like you're wrapping code in an object just for the sake of wrapping it into an object. What does baseline mean?

Here's a better version of your code, you should read and understand http://www.joezimjs.com/javascript/javascript-closures-and-the-module-pattern/ and http://js-bits.blogspot.com/2010/08/javascript-inheritance-done-right.html so you can decide what pattern you want to use and how they actually work. You are mixing both patterns, even though you didn't intend to. The trick is that with the way you're writing it (module pattern) there's no need to use this in the code, they're actually local variables held be the module

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