دمج window.onresize في فئة OO JS

إنني أحاول فقط تهيئة جهازي 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 الأولية ...

0
JeffEscalante التفاصيل في التعديل أعلاه!
وأضاف المؤلف benhowdle89, مصدر
آه ، بين الصخب! يجب أن تضع المزيد من التفاصيل في هذا السؤال - كيف تتطلع إلى دمجها؟ كوسيلة؟
وأضاف المؤلف Jeff Escalante, مصدر

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 = [] الذي قمت بإنشائه. هذا عندما تستخدم كائنات نمط protoype. يجب عليك فقط استخدام images في وظائفك.
  • تبدو بعض المتغيرات الخاصة بك كما لو أنها مستخدمة فقط في setBase ، يجب أن تكون محلية
  • بالنظر إلى موضوعك ، من الصعب جدًا معرفة ما يُفترض أن يفعله ، يبدو أنك تقوم بتغليف رمز في كائن فقط من أجل التفافه في كائن. ماذا يعني خط الأساس؟

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
    };   
}();
0
وأضاف
شكرا جزيلا.
وأضاف المؤلف benhowdle89, مصدر
ذلك هو. أحسنت.
وأضاف المؤلف Jeff Escalante, مصدر