2013-10-13 44 views
-1

我正在使用Javascript和我正在與一個項目太長,以開發與Phonegap和谷歌地圖的應用程序,但現在我專注於使用JavaScript的代碼,但現在我有下一個裏面JS目錄和腳本的結構目錄:要求在不同級別的依賴關係的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中更容易與對象的工作,我試圖與骨幹工作,我這樣做是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(); 
}); 

的class 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 I類中刪除的要求statment。
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的正確結構?

如果我在不同的腳本中使用相同的依賴關係來重新加載,我該怎麼辦?

如果我在不同的腳本中使用相同的依賴關係,那麼它們不會出現衝突,我該怎麼辦?

如何定義我的應用程序入口點的正確結構?

回答