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

ウィンドウのサイズが変更されたときに、baseline.initが最初の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 に答える