2014-02-11 26 views
0

我在我的html文档中有两个脚本,一个是外部脚本,一个是内部脚本。我想将它们合并为一个外部JavaScript文件。不幸的是,当我把内部函数放在外部函数内部时,内部函数似乎不起作用。我看不出为什么不行。组合脚本的Javascript

下面的组合脚本,分为什么是内部和什么是外部的。

//INTERNAL SCRIPT 
    var x = 0, y = 0, 
     vx = 0, vy = 0, 
     ax = 0, ay = 0; 

    var points; 


    var sphere = document.getElementById("sphere"); 
    var counting = false; 
    var counter = 0; 
    var numberOne; 

    if (window.DeviceMotionEvent != undefined) { 
     window.ondevicemotion = function(e) { 

      ax = event.accelerationIncludingGravity.x * 5; 
      ay = event.accelerationIncludingGravity.y * 5; 

      document.getElementById("counterSpan").innerHTML = Math.round(counter*10)/10; 
      //document.getElementById("accelerationX").innerHTML = Math.round(e.accelerationIncludingGravity.x * 10)/10; 
      //document.getElementById("accelerationY").innerHTML = Math.round(e.accelerationIncludingGravity.y * 10)/10; 
      //document.getElementById("accelerationZ").innerHTML = Math.round(e.accelerationIncludingGravity.z * 10)/10; 

      var moveX = Math.round(e.accelerationIncludingGravity.x * 10)/10; 
      //var moveY = Math.round(e.accelerationIncludingGravity.y * 10)/10; 
      //var moveZ = Math.round(e.accelerationIncludingGravity.z * 10)/10; 

      if(moveX > 5 || moveX < -5) { 
       counting = true; 
       //alert(counting); 
       if(counter < 100){counter+=0.01;} 
       } 




      if (e.rotationRate) { 
       //document.getElementById("rotationAlpha").innerHTML = Math.round(e.rotationRate.alpha * 10)/10; 
       //document.getElementById("rotationBeta").innerHTML = Math.round(e.rotationRate.beta * 10)/10; 
       //document.getElementById("rotationGamma").innerHTML = Math.round(e.rotationRate.gamma * 10)/10; 
      }  
     } 


    $("#btnEnergize").click(function() { 

     numberOne = $("#numberOne").val(); 
      alert(numberOne); 
      localStorage.setItem('points',numberOne); 

      if (numberOne <= counter){ 
      counter-=numberOne; 
      } 
      else { 
      alert("Not enough Energize points");  
      } 


    }); 

     setInterval(function() { 
      var landscapeOrientation = window.innerWidth/window.innerHeight > 1; 
      if (landscapeOrientation) { 
       vx = vx + ay; 
       vy = vy + ax; 
      } else { 
       vy = vy - ay; 
       vx = vx + ax; 
      } 
      vx = vx * 0.98; 
      vy = vy * 0.98; 
      y = parseInt(y + vy/50); 
      x = parseInt(x + vx/50); 

      boundingBoxCheck(); 

      //sphere.style.top = y + "px"; 
      //sphere.style.left = x + "px"; 

     }, 25); 
    } 


    function boundingBoxCheck(){ 
     if (x<0) { x = 0; vx = -vx; } 
     if (y<0) { y = 0; vy = -vy; } 
     if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = -vx; } 
     if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = -vy; } 

    } 

    function minmax(value, min, max) 
    { 
     if(parseInt(value) < 0 || isNaN(value)) 
      return 0; 
     else if(parseInt(value) > 100) 
      return 100; 
     else return value; 

    } 



    //EXTERNAL SCRIPT 

    jQuery(function($){ 



     var $overlay = $('.overlay'), 
      resize = true, 
      map; 
     var service; 
     var marker = []; 
     var pos; 
     var infowindow; 
     var placeLoc 
     var markerValue = []; 
     var markers 


    function initialize() { 
     /*var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(-34.397, 150.644), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 

    }*/ 
    var mapOptions = { 
     zoom: 15 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 

     // Try HTML5 geolocation 
     if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 

       var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 

      var request = { 
      location:pos, 
      center:pos, 
      radius:1000, 

     }; 

     infowindow = new google.maps.InfoWindow(); 
     var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch(request,callback); 
      pos = new google.maps.LatLng(position.coords.latitude, 
              position.coords.longitude); 


      infowindow = new google.maps.InfoWindow({ 
      map: map, 
      position: pos, 
      content: 'You Are Here' 
      }); 
      $('#findMe').data('pos',pos); 

      map.setCenter(pos); 
     }, function() { 
      handleNoGeolocation(true); 
     }); 
     } else { 
     // Browser doesn't support Geolocation 
     handleNoGeolocation(false); 
     } 



     function callback(results, status) { 
      markers = []; 
     if (status == google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 
      markers.push(createMarker(results[i])); 
     } 
     } 
     $('#findMe').data('markers',markers); 
    } 
    } 



    function createMarker(place) { 


     placeLoc = place.geometry.location; 

     var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location, 
     icon: { 
      path: google.maps.SymbolPath.CIRCLE, 
      scale: 8, 
      fillColor:'00a14b', 
      fillOpacity:0.3, 
      fillStroke: '00a14b',  
      strokeWeight:4, 
      strokeOpacity: 0.7 
     }, 




     }); 


     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(place.name); 
     infowindow.open(map, this); 
     }); 
     return marker; 
    } 

    function handleNoGeolocation(errorFlag) { 
     if (errorFlag) { 
     var content = 'Error: The Geolocation service failed.'; 
     } else { 
     var content = 'Error: Your browser doesn\'t support geolocation.'; 
     } 

     var options = { 
     map: map, 
     position: new google.maps.LatLng(60, 105), 
     content: content 
     }; 

     var infowindow = new google.maps.InfoWindow(options); 
     map.setCenter(options.position); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

    $('#show').click(function(){ 

     $overlay.show(); 

     if (resize){ 
     google.maps.event.trigger(map, 'resize'); 
     resize = false; 
     } 

    }); 

    $('.overlay-bg').click(function(){ 

     $overlay.hide(); 

    }); 




    $("#findMe").click(function() { 



     var pos  = $(this).data('pos'), 
      markers = $(this).data('markers'), 
      closest; 


     if(!pos || !markers){ 
     return; 
     } 

     $.each(markers,function(){ 
     var distance=google.maps.geometry.spherical 
         .computeDistanceBetween(this.getPosition(),pos); 
     if(!closest || closest.distance > distance){ 
      closest={marker:this, 
        distance:distance} 
     } 
     }); 
     if(closest){ 
     //closest.marker will be the nearest marker, do something with it 
     //here we simply trigger a click, which will open the InfoWindow 
     google.maps.event.trigger(closest.marker,'click') 


     var Loc2 = closest.marker.getPosition(); 


     for (var i=0; i<markers.length; i++) { 
      var Loc1 = markers[i].getPosition() 



      if (Loc1.equals(Loc2)){ 
       console.log("its the same"); 
       console.log("marker array Location 1 " + Loc1 + " marker " + i); 
       console.log("closest Location 2 " +Loc2); 

       markerValue[i] = numberOne; 

       console.log("marker " + i + " now equals " + markerValue[i]); 

      } 

     } 
     } 

    }); 


    }); 
+0

你能给我们提供一些关于什么不起作用的信息吗?错误给出,行号等等。这是很多文字消化没有暗示在哪里看。 – snollygolly

+0

将您的内部代码移动到'jQuery(function($){..})'中。我的猜测是,它的DOM加载问题 –

+0

总是确保与DOM交互的代码是一个window.onload或jQuery就绪事件处理程序,就像您的外部脚本一样。 – thescientist

回答

1

如果你看看你的外部代码,它是一个简短的jQuery就绪事件处理程序。由于您的内部代码与DOM交互,您应该确保它也在同一个事件处理程序上下文中运行。

您的内部代码可能位于onload函数中,位于页面底部,或者可能位于其自己的事件处理程序中,并且您忘记了这一点。

+0

我认为这已经解决了,如果我将所有外部变量移动到顶部,它们应该是整个脚本的全局对吧?所以如果我想添加一个与脚本之间的变量交互的函数,它将能够做到这一点? –

+0

@DanKristianWilliams我通常保留所有我的函数声明和在onload/ready之外定义的所有需要​​的全局元素引用变量。任何初始化代码通常都会获取并缓存这些DOM引用,然后分配事件处理程序。我尽量保持init代码的清洁和小巧,并在可能的情况下将其委托给函数调用,而其他一切通常只是事件处理程序已准备好使用addEventListener进行分配。本质上它只是引导代码。 – thescientist