私は Javascript を使用しており、Phonegap と googlemaps を使用してアプリケーションを開発するには長すぎるプロジェクトを使用していますが、現在は Javascript を使用してコードに焦点を当てていますが、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
そこで、クラス ライブラリを使用して JavaScript のオブジェクトをより簡単に操作し、バックボーンを操作してみました。この例を実行しました。
私の問題は、 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
}
});
});
問題は依存関係を定義するコンテキストのレベルであることを理解するために単体テストを作成しようとしています（まあ、そうだと思います）。次のことを試します。
- DeviceController(Ubicacion) 内のクラスを使用して、これが正常に機能することをテストします
- Ubicacion クラスでは、require ステートメントを削除します。
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
}
});
私は何を間違っていますか？
使用する必要がある各ファイルで必要な依存関係の正しい構造を定義するにはどうすればよいですか?
異なるスクリプトで同じ依存関係を使用してリロードしないようにするにはどうすればよいですか?
競合が発生しないように、異なるスクリプトで同じ依存関係を使用する場合はどうすればよいですか?
アプリケーションのエントリ ポイントの正しい構造を定義するにはどうすればよいですか?