hasOwnProperty() öğesini başvuru nesnelerine gönderme

Question

Bir html öğesine bir stil nesnesini uygulayacak ancak yalnızca bu nesne varsa yalnızca kullanacak bir işlev yazmak istiyorum. Ben aşağıdaki nesneyi varsa

Örnek:

objMyObject { 
    "idstring": { 
     "style" : { 
      "opacity": "0.50" 
     } 
    } 
}; 

yüzden ilk "tarzı" uygulamak denemeden önce var olduğunu kontrol etmek hasOwnProperty() kullanın - ve bu iyi çalışır.

Ancak, benim nesne birden stilleri vardır varsayalım:

objMyObject { 
    "idstring1": { 
     "style" : { 
      "opacity": "0.50" 
     } 
    }, 

    "idstring2": { 
     "style": { 
      "opacity": "0.99" 
     } 
    }, 

    "idstring3": { 
     "style": { 
      "opacity": "0.50" 
     } 
    } 

}; 

Şimdi, bazen bu bireysel stil nesneler aynı olabilir. Yukarıdaki örnekler kısa ama nesneler çok daha büyük olması ve birden fazla stil özelliklerini koruyacak, bu yüzden bir şeyler yapabileceğini gibi daha iyi olurdu olabilir:

if (objMyObject.hasOwnProperty("idstring3")) { 
    if (objMyObject.idString3.hasOwnProperty("apply")) 
     // Apply an existing, alternative style object. 
     // 
     $("#el").css(objMyObject.idstring3.apply) 
    else if (objMyObject.idstring3.hasOwnProperty("style")) 
     $("#el").css(objMyObject.idString3.style) 
} 

: Sonra böyle bir şey yapabileceğini Yani

objMyObject { 
    "idstring1": { 
     "style" : { 
      "opacity": "0.50" 
     } 
    }, 

    "idstring2": { 
     "style": { 
      "opacity": "0.99" 
     } 
    }, 

    "idstring3": { 
     // This particular style object has the same properties as 
     // idstring1 
     "apply": "idstring1" 
    } 

}; 

if (objMyObject.hasOwnProperty("idstring3")) 

büyük olduğu gibi gerçek değerlendirir:

sorunhasOwnProperty için ilk çağrı() olmasıdır. Ancak, nesneler bir "stil" veya "uygulama" nesnesi içeriyor olsa da, sonraki çağrılar başarısız olur. Ben iki işlev kullanıyorum oluyor İşte

// JavaScript object - the "mouseout" object should apply the 
// "init" object. 
// 
var objHeader = { 
    "targetID": "header", 

    "init": { 
     "style": { 
      "backgroundColor": "#FF0000", 
      "opacity": "0.00" 
     } 
    }, 

    "load": { 
     "style": { 
      "opacity": "0.50" 
     } 
    }, 

    "mouseover": { 
     "style": { 
      "opacity": "0.99" 
     } 
    }, 

    // Here, the elApply() function should apply the "style" defined 
    // in "init". 
    // 
    "mouseout": { 
     "apply": "init" 
    } 
}; 

:

// Apply a style to an object - will return false on error or true 
// on success. 
// 
// State is the object to be applied, for example: 
// 
// elApply(objHeader, "mouseout"); 
// 
// To apply the style attached to "mouseout". 
// 
function elApply(
    objElement, 
    objState 
) { 
    // Example - if elInit calls elApply(objHeader, "mouseout"); 
    // then will first look for objHeader.mouseout.apply, if that 
    // exists then it should point to another object with a style 
    // to be applied - if this is the case true is returned here 
    // and all is well. 
    // 
    if (elApply(objElement.objState, "apply")) { 
     alert("Applied 'apply' to " + objState); 
     return true; 
    } 

    // No "apply" exists, so attempt to apply a "style" 
    // object. 
    // 
    if (objElement.objState.hasOwnProperty("style")) { 
     $("#" + objElement.targetID).css(objElement.objState.style); 
     return true; 
    } 

    alert("Neither '" + objState + "' nor 'apply' exist in this object!"); 
    return false; 
} 

function elInit(
    objElement 
) { 
    $(document).ready(function() { 
     var targetID = objElement.targetID;   
     elApply(objElement, "mouseout"); 
    }); 
} 

Yani bu gibi çalışır:

1. İşte çalışıyorum tam kodu elInit() işlev çağrıları elApply (objElement, "mouseout");

2. "mouseout" özelliği vardır ve elApply() fonksiyonu objElement.hasOwnProperty ("mouseout")doğru olarak
3. bakar değerlendirir objElement.mouseout.apply halinde çağrı düşündüren "mouseout") (var, ancak görünüşe göre objElement.mouseout önceki hasOwnProperty rağmen tanımsız olduğunuvar.

Bu açık, herhangi bir fikir umuyorum? Bu büyük bir anlaşma değil, sadece nesneler tekrarlı değilse ve daha önce tanımlanmış objeleri tekrar kullanabilseydim, daha temiz ol.

Mantık/uygulama veya hasOwnProperty() konusundaki anlayışımda temel bir hata olabilir mi? Eğer öyleyse, ebeveyn nesnesindeki nesnelere böyle bir şekilde başvurmak için bir yol var mıdır?

Çok fazla mecbur kaldım.

Answer 1

Nesnenizdeki tüm eksik stilleri önceden doldurmanızı öneririm. elStyle() fonksiyonunuz artık apply mülküyle ilgilenmek zorunda olmadığı için çok daha kolay hale geliyor.

Teknik olarak, bir stili bir öğeden diğerine kopyalamak, bir nesneye yapılan başvurunun yalnızca bir kopyasıdır. Yani, ucuz bir operasyon.

Bu koddaki do{} while() döngüsünün nedeni, 'zincirleri' (örneğimde mouseout0 > mouseout > init gibi) uygulamasının desteklenmesidir. Bu durumla hiç karşılaşılmamışsa güvenle kaldırabilirsiniz.

var objHeader = { 
 
    "targetID": "header", 
 

 
    "init": { 
 
     "style": { "backgroundColor": "#FF0000", "opacity": "0.75" } 
 
    }, 
 
    "load": { 
 
     "style": { "opacity": "0.50" } 
 
    }, 
 
    "mouseover": { 
 
     "style": { "opacity": "0.99" } 
 
    }, 
 
    "mouseout0": { 
 
     "apply": "mouseout" 
 
    }, 
 
    "mouseout": { 
 
     "apply": "init" 
 
    } 
 
}; 
 

 
function populateStyle(o) { 
 
    var success; 
 
    
 
    do { 
 
    success = false; 
 

 
    Object.keys(o).filter(
 
     function(k) { 
 
     return o[k].hasOwnProperty('apply'); 
 
     } 
 
    ).forEach(
 
     function(k) { 
 
     if(o.hasOwnProperty(o[k].apply) && o[o[k].apply].hasOwnProperty('style')) { 
 
      o[k].style = o[o[k].apply].style; 
 
      delete o[k].apply; 
 
      success = true; 
 
     } 
 
     } 
 
    ); 
 
    } while(success); 
 
} 
 

 
function elStyle(objElement, state) { 
 
    if(objElement.hasOwnProperty(state) && objElement[state].hasOwnProperty('style')) { 
 
    $('#' + objElement.targetID).css(objElement[state].style); 
 
    } 
 
    else { 
 
    // error: style undefined 
 
    } 
 
} 
 

 
populateStyle(objHeader); 
 
elStyle(objHeader, 'mouseout0');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header">Hello World</div>

Answer 2

Lütfen 'S' sermayesini kaldırın ve aşağıdaki kodda küçük 'ler' yazınız.

(objMyObject.idString3.hasOwnProperty ("uygulamak")) JavaScript harf duyarlı olduğu için

(() "uygulamak" objMyObject.idstring3.hasOwnProperty)

ile değiştirin.

Bunun yardımcı olacağını düşünüyorum.