0

我对 Java 中的 Javascript 完全陌生，我不得不直接从最困难的事情开始……使用异步模块定义模式开发应用程序……

我正在使用Weejot平台，它提供了一个框架来开发使用AMD 模式的 javascript Web 应用程序。所有文档在这里。你可能不知道，但如果你知道 AMD 模式，也许你可以提供帮助......

基本上我有一个MyController.js看起来像这样的模块（注意大部分代码是自动生成的，我只写了注释行）：

define([
    "js/util",
    "framework/Controller"
], function (
  util,
  Controller
){      
  function MyController(environment, connector) {
    Controller.call(this, environment);
    this.settings = environment.siteApplication.getSettings();
    this.connector = connector;        
    //Variable where I have some value stored
    this.myVariable = "hello";
  }    

  MyController.prototype = Object.create(Controller.prototype);

  util.extend(MyController.prototype, {
    //Function to show a map
    showMap: function (request, render) {
      //Get google maps script
      $.getScript("http://maps.googleapis.com/maps/api/js?key=KEY&sensor=false");          
      //Render is a framework object that basically shows the view "map.html" in full page mode
      render({name: "map", mode: "fullPage"});
    }    
  });

  return MyController;
});

这不能正常工作，因为在行之后$.getScript(...)，脚本似乎没有被加载，因为我无法访问google.maps应该创建的对象...

我通过向脚本 url 添加一个回调函数来使它工作，如下所示：

$.getScript("http://maps.googleapis.com/maps/api/js?key=KEY&sensor=false&callback=drawMap");

问题是这个回调函数必须是全局函数，所以我在上一个模块中添加了以下函数（就在return上面的语句之前）：

window.drawMap = function () {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644);,
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

不知何故，我得到了完美呈现的地图......但是，我的问题是我需要myVariable从函数访问变量window.drawMap，而我不能......有什么办法吗？还是我从一开始就做错了？

正如我所说，我对这一切都很陌生，我变得疯狂，在我试图让它发挥作用的过程中，我一直在添加和改变一些东西，以至于我不知道我实际上在做什么...... . 任何建议将不胜感激...

编辑：如果有用，这是获取 Google Maps 脚本时的响应（从 Chrome 的控制台复制）：

window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    var s = document.createElement('script');

    s.src = src;
    document.body.appendChild(s);
  }

  var modules = google.maps.modules = {};
  google.maps.__gjsload__ = function(name, text) {
    modules[name] = text;
  };

  google.maps.Load = function(apiLoad) {
    delete google.maps.Load;
    apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@216000000\u0026src=api\u0026hl=es-ES\u0026","http://mt1.googleapis.com/vt?lyrs=m@216000000\u0026src=api\u0026hl=es-ES\u0026"],null,null,null,null,"m@216000000"],[["http://khm0.googleapis.com/kh?v=128\u0026hl=es-ES\u0026","http://khm1.googleapis.com/kh?v=128\u0026hl=es-ES\u0026"],null,null,null,1,"128"],[["http://mt0.googleapis.com/vt?lyrs=h@216000000\u0026src=api\u0026hl=es-ES\u0026","http://mt1.googleapis.com/vt?lyrs=h@216000000\u0026src=api\u0026hl=es-ES\u0026"],null,null,"imgtp=png32\u0026",null,"h@216000000"],[["http://mt0.googleapis.com/vt?lyrs=t@131,r@216000000\u0026src=api\u0026hl=es-ES\u0026","http://mt1.googleapis.com/vt?lyrs=t@131,r@216000000\u0026src=api\u0026hl=es-ES\u0026"],null,null,null,null,"t@131,r@216000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=75\u0026hl=es-ES\u0026","http://khm1.googleapis.com/kh?v=75\u0026hl=es-ES\u0026"],null,null,null,null,"75"],[["http://mt0.googleapis.com/mapslt?hl=es-ES\u0026","http://mt1.googleapis.com/mapslt?hl=es-ES\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=es-ES\u0026","http://mt1.googleapis.com/mapslt/ft?hl=es-ES\u0026"]],[["http://mt0.googleapis.com/vt?hl=es-ES\u0026","http://mt1.googleapis.com/vt?hl=es-ES\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=es-ES\u0026","http://mt1.googleapis.com/mapslt/loom?hl=es-ES\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=es-ES\u0026","https://mts1.googleapis.com/mapslt?hl=es-ES\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=es-ES\u0026","https://mts1.googleapis.com/mapslt/ft?hl=es-ES\u0026"]]],["es-ES","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/es_es/mapfiles/api-3/12/11","3.12.11"],[2244818506],1.0,null,null,null,null,0,"blabla",null,null,0,"http://khm.googleapis.com/mz?v=128\u0026","AIzaSyAgUZ1LkdjZ9jsRivdSB4cDLmUAOMOMi34","https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon"], loadScriptTime);
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/es_es/mapfiles/api-3/12/11/main.js");
})();
4

1 回答 1

1

编辑：我查看了脚本，它不是 jsonp，所以我修改了我的答案以使用 requirejs。

再次编辑：这里似乎有一些更不同步的爵士乐。另一个将全局函数绑定到模块范围的编辑。

查看该 url 返回的代码，它似乎在代码中进行了另一个异步调用以从 api 检索其他数据，然后调用您的回调。我能想到的唯一方法是在模块中定义一个全局函数并使用它来处理来自 api 调用的返回值。它不漂亮，但它应该工作：

define([
    "js/util",
    "framework/Controller"
], function (
  util,
  Controller
){      
  function MyController(environment, connector) {
    Controller.call(this, environment);
    this.settings = environment.siteApplication.getSettings();
    this.connector = connector;        
    //Variable where I have some value stored
    this.myVariable = "hello";
  }    

  MyController.prototype = Object.create(Controller.prototype);

  util.extend(MyController.prototype, {
    //Function to show a map
    createRenderer : function(){
       var self = this;
       window.drawMap = function(){
          var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644);,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        // Do stuff with self.myVariable and, render, ect...
      };
    },
    showMap: function (request, render) {
      //Get google maps script
      this.createRenderer();
      $.getScript("http://maps.googleapis.com/maps/api/js?key=KEY&sensor=false&callback=drawMap");                     }    
  });

  return MyController;
});

解释：

当您调用 时this.createRenderer()，该函数在您的对象的上下文中被调用。由于我们在函数调用中声明了一个变量，self = this然后this.createRenderer()也在该函数调用中定义，我们创建了一个闭包，它存储了对对象window.drawMap的自引用。稍后调用MyController时，引用在闭包范围内可用。所以现在，在函数调用中，我们可以访问. 请参阅JavaScript 闭包如何工作？了解更多信息。window.drawMapselfwindow.drawMapself.myVariable

作为替代方案，您可以考虑使用 Miller Medeiros 的异步插件将 Google Maps api 作为模块的依赖项加载。这将是一种更清洁的方法。

于 2013-05-09T17:53:38.117 回答