要求JS具有不同的依赖关系

时间:2013-10-13 21:58:17

标签: javascript oop backbone.js requirejs

我正在使用Javascript,我正在使用Phonegap和googlemaps开发应用程序的项目太长,但现在我专注于使用Javascript的代码,但现在我已经在内部的目录和脚本的下一个结构< em> js 目录:

├── controlador
│   └── DeviceController.js
├── launcher.js
├── libs
│   ├── backbone.googlemaps.js
│   ├── backbone.js
│   ├── class.js
│   ├── index.js
│   ├── jquery.js
│   ├── jquery.mobile.min.js
│   ├── mustache.js
│   ├── require.js
│   └── underscore.js
├── modelo
│   └── Ubicacion.js
└── vista
   ├── GoogleMap.js
   ├── Informacion.js
   ├── MarcadorBahia.js
   ├── MarcadorDispositivo.js
   ├── MarcadorParqueadero.js
   └── MarkerView.js

所以,我使用class library更轻松地使用javascript中的对象,我尝试使用Backbone,我做了example,它有效!。

我的问题是当我尝试使用RequireJS时,我无法以正确的方式加载脚本。

这是向我展示浏览器的错误:

Uncaught ReferenceError: com is not defined launcher.js:18
(anonymous function) launcher.js:18
i.execCb require.js:29
Z.check require.js:18
(anonymous function) require.js:22
(anonymous function) require.js:8
(anonymous function) require.js:23
y require.js:7
Z.emit require.js:23
Z.check require.js:19
Z.enable require.js:23
Z.init require.js:16
E require.js:14
i.completeLoad require.js:27
i.onScriptLoad require.js:29

Uncaught TypeError: Cannot read property 'Model' of undefined Ubicacion.js:11
(anonymous function) Ubicacion.js:11
i.execCb require.js:29
Z.check require.js:18
Z.enable require.js:23
Z.init require.js:16
(anonymous function)

这是我的应用程序入口点的代码, launcher.js

require.config({
    paths:{
        jquery      : 'libs/jquery',
        googlemapapi: 'https://maps.googleapis.com/maps/api/js?key=AIzaSyC35BOQq2RvkKjzh0NhohKbQtUa3KWBM1o&sensor=false',  
        underscore  : 'libs/underscore',
        backbone    : 'libs/backbone',
        mustache    : 'libs/mustache',
        class       : 'libs/class',
        ubicacion   : 'modelo/Ubicacion',  // this class I required by DeviceController
        deviceController: 'controlador/DeviceController'
    }
});

require(['jquery', 'underscore', 'backbone', 'mustache',  'class','ubicacion','deviceController' ], 
function($, _,Backbone,Mustache ) 
{ 
   var deviceController = new com.gcvv.bsp.controller.DeviceController();
});

类DeviceController是:

require(['jquery', 'underscore', 'backbone','class','ubicacion' ], 
function($, _, Backbone ){

$namespace( "com.gcvv.bsp.controller" );

$class( "com.gcvv.bsp.controller.DeviceController",{
     $constructor: function(){
         this.ubicacion = com.gcvv.bsp.modelo.Ubicacion(0,0);
     },
     getPosicionActual: function()
     {
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(this.localizacion, this.error);
        }else{
            console.error("El dispositivo no soporta geolocalizacion");
        }
     },
     localizacion : function(posicion){
         this.ubication.set( 'longitud',posicion.coords.latitude );
         this.ubication.set( 'latitud', posicion.coords.longitude);
     },
     error : function(){
         console.error("Error al obtener la gelocalización del dispositivo");
     }
});

}); 

这是 Ubicacion.js 的代码:

require(['jquery', 'underscore', 'backbone','class'], 
function($, _, Backbone) {
$namespace( "com.gcvv.bsp.modelo" );
$class("com.gcvv.bsp.modelo.Ubicacion",{
    $extends: Backbone.Model,   
    defaults: {
        longitud: 0,
        latitude: 0
    }
}); 
});

我尝试进行单元测试,以了解问题是定义依赖关系的上下文级别(我想它),我尝试下一步:

  1. 我使用DeviceController(Ubicacion)中的类来测试它的工作原理 细
  2. 在Ubicacion课程中,我删除了必须的陈述。
  3. require.config({
        paths:{
            jquery      : 'libs/jquery',
            googlemapapi: 'https://maps.googleapis.com/maps/api/js?key=AIzaSyC35BOQq2RvkKjzh0NhohKbQtUa3KWBM1o&sensor=false',  
            underscore  : 'libs/underscore',
            backbone    : 'libs/backbone',
            mustache    : 'libs/mustache',
            class       : 'libs/class',
            ubicacion   : 'modelo/Ubicacion',
            deviceController: 'controlador/DeviceController'
        }
    });
    
    require(['jquery', 'underscore', 'backbone', 'mustache', 'class','ubicacion','deviceController' ], 
    function($, _,Backbone,Mustache, $class, Ubicacion  ) 
    { 
      var ubicacion = new com.gcvv.bsp.modelo.Ubicacion(); 
      console.log( ubicacion.get('longitud') ); //I get 0, default value 
     });
    

    所以,Ubicacion类带有变化:

    $namespace( "com.gcvv.bsp.modelo" );
    $class("com.gcvv.bsp.modelo.Ubicacion",{
        $extends: Backbone.Model,   
        defaults: {
            longitud: 0,
            latitude: 0
        }
    }); 
    

    我做错了什么?

    如何在我需要使用的每个文件中定义require dependecies的正确结构?

    如果我在不同的脚本中使用相同的依赖项而不重新加载,该怎么办?

    如果我在不同的脚本中使用相同的依赖项,以便它们不会出现冲突,该怎么办?

    如何定义应用程序入口点的正确结构?

1 个答案:

答案 0 :(得分:-1)

我有同样的错误,然后我引用此链接:https://groups.google.com/forum/#!msg/camunda-bpm-users/mnd1RXAiR50/veSaemAPVmAJ

只需清除缓存

即可

希望它也适合你。