如何将参数传递给JavaScript库，以及如何在同一网页上使用不同的输入集多次调用它_Javascript

如何将参数传递给JavaScript库，以及如何在同一网页上使用不同的输入集多次调用它

javascript

如何将参数传递给JavaScript库，以及如何在同一网页上使用不同的输入集多次调用它,javascript,Javascript,我被要求修改一些JavaScript代码，看起来像这样： <html> <head> <script> var text1="foo"; var text2="bar" </script> <script src="/process.js"></script> </head> <body> <div id="container"></div> </bod

我被要求修改一些JavaScript代码，看起来像这样：

<html>
<head>
<script>
    var text1="foo";
    var text2="bar"
</script>
<script src="/process.js"></script>
</head>

<body>
<div id="container"></div>
</body>
</html>

var cc1 = $('#canvas_container');
var ctx1 = cc1[0].getContext('2d');

function make_image(){
   $('#container').width(image_width);
   $('#container').height(image_height);
   var cntnr = document.getElementById('container');
   var c1 = document.createElement("canvas");
   c1.width = image_width;
   c1.height = image_height;
   c1.id = "canvas_container";
   cntnr.appendChild(c1);
   // image generation code here
}

谢谢你的帮助

（编辑：昨天这不是谷歌地图的问题吗？如果不是，我应该再举一个例子）

让我向您演示如何在函数中使用参数

你的例子是：因此，process.js包含这些函数。调用这些函数时，需要在该文件之外执行

注意：您的示例没有在屏幕上显示任何可见内容。但有两个画布元素

要点是：对于不是所有实例通用的任何东西，都应该输入一个参数

index.php

<html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="process.js"></script>
  <script>
    window.onload = function() {  // do this so the script waits until the page is loaded
      // image1
      make_image('container1', 'canvas1', 100, 200);
      // image2
      make_image('container2', 'canvas2', 50, 150);
    }
  </script>
  </head>
  <body>
    <div id="container1"></div>
    <div id="container2"></div>
  </body>
</html>

谷歌地图示例

因此，关于initialize（）的任何特定于1映射的内容都必须在参数中设置。示例：如果要在map1/map2上进行不同的缩放，请在lng旁边放置另一个参数“zoom”，并使用zoom 18调用一个参数，使用zoom 15调用一个参数。试试看

<!doctype html>
<html>
<head>
  <style>
  #container1, #container2 {
    width: 500px;
    height: 400px;
    margin-bottom: 20px;
  }
  </style>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script>
  // http://stackoverflow.com/questions/30996197/how-to-pass-parameters-to-a-javascript-library-and-how-to-call-it-multiple-times?noredirect=1#comment50061772_30996197
  // gets triggered twice, by page_is_loaded()
  function initialize(container_id, lat, lng) {
      var myLatlng = new google.maps.LatLng(lat, lng);
      var mapProp = {
          center: myLatlng,
          zoom: 17,
          mapTypeId:google.maps.MapTypeId.HYBRID
      };
      var map=new google.maps.Map(document.getElementById(container_id),mapProp);
      return map;  // by doing this, who ever calls this function has the map object, to do what ever one wants.
  }
  // gets triggered when the page is loaded
  function page_is_loaded() {
    var map1 = initialize('container1', 50.89515421660153, 4.341372907161713);    // Atomium, Brussels, Belgium
    var map2 = initialize('container2', 53.34184485510149, -6.286933958530426);  // Guinness Storehouse, Dublin, Irish Republic

    // let's put a marker on map1, at the atomium, on the parking lot, where I left my car
    var marker_atomium = new google.maps.Marker({
      position: new google.maps.LatLng(50.895783519434076, 4.339616060256958),
      map: map1
    });

  }
  // this triggers page_is_loaded(), to be triggered when the DOM of the page is loaded
  google.maps.event.addDomListener(window, 'load', page_is_loaded);
  </script>
</head>
<body>
  <div id="container1"></div>
  <div id="container2"></div>
</body>
</html>


#集装箱1#集装箱2{
宽度：500px；
高度：400px；
边缘底部：20px；
}
// http://stackoverflow.com/questions/30996197/how-to-pass-parameters-to-a-javascript-library-and-how-to-call-it-multiple-times?noredirect=1#comment50061772_30996197
//获取两次触发，由页面\u加载（）
功能初始化（容器id、lat、lng）{
var mylatng=new google.maps.LatLng（lat，lng）；
var mapProp={
中心：myLatlng，
缩放：17，
mapTypeId:google.maps.mapTypeId.HYBRID
};
var map=new google.maps.map（document.getElementById（container_id），mapProp）；
return map；//通过这样做，调用此函数的人就拥有了map对象，可以做任何人想做的事情。
}
//在加载页面时触发
功能页_已加载（）{
var map1=initialize（'container1'，50.89515421660153，4.341372907161713）；//比利时布鲁塞尔原子城
var map2=initialize（'container2'，53.34184485510149，-6.286933958530426）；//爱尔兰共和国都柏林吉尼斯仓库
//让我们在地图1上，在原子库，停车场，我把车停在那里做个标记
var marker_atomium=新的google.maps.marker({
位置：new google.maps.LatLng（50.895783519434076,4.339616060256958），
地图：map1
});
}
//这将触发页面的DOM加载时触发的页面
google.maps.event.addDomListener（窗口“加载”，页面加载）；

我们必须查看process.js中的内容，以帮助您是的，您一定要发布代码。您的库可能应该公开一个函数，该函数应该接收作为参数的必需参数。请为第二个div选择其他id。该id过去是唯一的。好的，我已经在上面发布了process.js。我可以公开一个函数，但是在HTML页面中我在哪里调用它呢？调用一个库两次。。。这不是图书馆的工作方式。库包含函数。函数必须按功能构建，这意味着您将容器的id作为参数，而不是硬编码。并且永远不要有两个具有相同id的元素（否则它不能用作标识）。你问题的解决方案看起来不像你所等待的答案

function make_image(container, canvas_id, width, height) {
   $('#' + container).width(width);
   $('#' + container).height(height);

   var cntnr = document.getElementById(container);
   var c1 = document.createElement("canvas");
   c1.width = width;
   c1.height = height;
   c1.id = canvas_id;
   cntnr.appendChild(c1);
   // image generation code here
}

<!doctype html>
<html>
<head>
  <style>
  #container1, #container2 {
    width: 500px;
    height: 400px;
    margin-bottom: 20px;
  }
  </style>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script>
  // http://stackoverflow.com/questions/30996197/how-to-pass-parameters-to-a-javascript-library-and-how-to-call-it-multiple-times?noredirect=1#comment50061772_30996197
  // gets triggered twice, by page_is_loaded()
  function initialize(container_id, lat, lng) {
      var myLatlng = new google.maps.LatLng(lat, lng);
      var mapProp = {
          center: myLatlng,
          zoom: 17,
          mapTypeId:google.maps.MapTypeId.HYBRID
      };
      var map=new google.maps.Map(document.getElementById(container_id),mapProp);
      return map;  // by doing this, who ever calls this function has the map object, to do what ever one wants.
  }
  // gets triggered when the page is loaded
  function page_is_loaded() {
    var map1 = initialize('container1', 50.89515421660153, 4.341372907161713);    // Atomium, Brussels, Belgium
    var map2 = initialize('container2', 53.34184485510149, -6.286933958530426);  // Guinness Storehouse, Dublin, Irish Republic

    // let's put a marker on map1, at the atomium, on the parking lot, where I left my car
    var marker_atomium = new google.maps.Marker({
      position: new google.maps.LatLng(50.895783519434076, 4.339616060256958),
      map: map1
    });

  }
  // this triggers page_is_loaded(), to be triggered when the DOM of the page is loaded
  google.maps.event.addDomListener(window, 'load', page_is_loaded);
  </script>
</head>
<body>
  <div id="container1"></div>
  <div id="container2"></div>
</body>
</html>