如何使用A-Frame優化重用的JS代碼？

我已經使用A-Frame創建了VR照片廚房。您可以通過注視點擊按鈕並更改背景照片的可見性。它工作正常，但代碼是非常令人毛骨悚然，尤其是JS。我已經重用了可以通過函數進行優化的代碼，但我無法得到如何。 https://codepen.io/atKo/pen/ggZgXJ 如何使用A-Frame優化重用的JS代碼？

感謝您的幫助！

<html> 

<head> 
    <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/aframe-layout-component.min.js"></script> 
</head> 

<body> 
    <a-scene> 
     <a-assets> 
      <img src="img/sea.jpg" id="sea"> 
      <img src="img/lake.jpg" id="lake"> 
      <img src="img/river.jpg" id="river"> 
      <img src="img/sea_prev.png" id="sea_prev"> 
      <img src="img/lake_prev.png" id="lake_prev"> 
      <img src="img/river_prev.png" id="river_prev"> 
      <a-mixin id="preview" scale="1.25 1 1" height="3.0" radius="2" opacity="0.9" scale-on-mouseenter="to: 1.5 1.2 1.2"></a-mixin> 
      <a-mixin id="scale_up" attribute="scale" begin="mouseenter" dur="300" to="1.5 1.2 1.2"></a-mixin> 
      <a-mixin id="scale_down" attribute="scale" begin="mouseleave" dur="300" to="1.25 1 1"></a-mixin> 
     </a-assets> 
     <a-entity position="0 1.78 0"> 
      <a-entity camera look-controls wasd-controls> 
       <a-entity position="0 0 -1.25" rotation="0 0 0" geometry="primitive: ring; radiusOuter: 0.30; 
          radiusInner: 0.20;" material="color: black; shader: flat" cursor="maxDistance: 30; fuse: true"> 
        <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="0.3 0.3 0.3" dur="150"></a-animation> 
        <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="0.3 0.3 0.3" to="0.1 0.1 0.1" dur="1500"></a-animation> 
       </a-entity> 
      </a-entity> 
     </a-entity> 
     <a-curvedimage mixin="preview" theta-length="35" id="sea_btn" material="src: #sea_prev" position="-0.5 2 -1.20" rotation="0 -160 0"> 
       <a-animation mixin="scale_up"></a-animation> 
       <a-animation mixin="scale_down"></a-animation>   
     </a-curvedimage> 
     <a-curvedimage mixin="preview" theta-length="35" id="lake_btn" material="src: #lake_prev" position="0.22 2 -1.25" rotation="0 166 0"> 
       <a-animation mixin="scale_up"></a-animation> 
       <a-animation mixin="scale_down"></a-animation>   
     </a-curvedimage> 
     <a-curvedimage mixin="preview" theta-length="35" id="river_btn" material="src: #river_prev" position="0.6 2 -0.90" rotation="0 126 0"> 
       <a-animation mixin="scale_up"></a-animation> 
       <a-animation mixin="scale_down"></a-animation>   
     </a-curvedimage> 
     <a-light type="ambient" color="white" position="-1 1 0"></a-light> 
     <a-entity id="sea_back" visible="true"> 
      <a-sky src="#sea"></a-sky> 
     </a-entity> 
     <a-entity id="lake_back" visible="false"> 
      <a-sky src="#lake"></a-sky> 
     </a-entity> 
     <a-entity id="river_back" visible="false"> 
      <a-sky src="#river"></a-sky> 
     </a-entity> 
    </a-scene> 
    <script type="text/javascript"> 
     document.querySelector('#sea_btn').addEventListener('click', function() { 
      document.getElementById('sea_back').setAttribute('visible', 'true') 
      document.getElementById('lake_back').setAttribute('visible', 'false') 
      document.getElementById('river_back').setAttribute('visible', 'false') 
     }); 
     document.querySelector('#lake_btn').addEventListener('click', function() { 
      document.getElementById('sea_back').setAttribute('visible', 'false') 
      document.getElementById('lake_back').setAttribute('visible', 'true') 
      document.getElementById('river_back').setAttribute('visible', 'false') 
     }); 
     document.querySelector('#river_btn').addEventListener('click', function() { 
      document.getElementById('sea_back').setAttribute('visible', 'false') 
      document.getElementById('lake_back').setAttribute('visible', 'false') 
      document.getElementById('river_back').setAttribute('visible', 'true') 
     }); 


      AFRAME.registerComponent('scale-on-mouseenter', { 
    schema: { 
     to: {default: '2.5 2.5 2.5'} 
    }, 
    init: function() { 
     var data = this.data; 
     this.el.addEventListener('click', function() { 
     this.setAttribute('scale', data.to); 
     }); 
    } 
    }); 
    </script> 

    <body> 

</html>

來源

2017-02-12 atKo

如果您的代碼如預期運行你需要幫助清理或優化它，那麼你應該嘗試http://codereview.stackexchange.com。 –

@ Karl-JohanSjögren謝謝！ – atKo