2

モジュール化するためにRequireJSを使用してKnockoutJS Webアプリを構築しています。物事をモジュールに分割するためのいくつかの戦略のどちらかを決定しようとしています。

フラットなアプローチ:
1 つのアプローチは、よりフラットなディレクトリ構造とより大きなモジュールを備えています。

/webapp
 |-/scripts
    |-/templates
    |  |-car_edit.html
    |  |-car-view.html
    |  |-person_edit.html
    |  |-person_view.html
    |-main.js
    |-person.js
    |-car.js

例として、person モジュール (person.js 内) は次のように実装されます。

define(['jquery', 'knockout', ...], function($, ko, ...) {

  var PersonViewModel = function PersonViewModel() { ... };

  var load = function load(id) { ... };

  var create = function create() { ... };

  var view = function view(element, model) { ... };

  var edit = function edit(element, model) { ... };

  return {
    Model : PersonViewModel, // exposes ViewModel for testing
    create : create,         // reserve id on server, return new empty Person
    load : load,             // get data from server, return new Person w/ data
    view : view,             // load view template, bind Person
    edit : edit              // load edit template, bind Person
  };
});

深い構造のアプローチ:
別のアプローチでは、より小さなモジュールでより深いディレクトリ構造を使用します。

/webapp
 |-/scripts
    |-/car
    |  |-/templates
    |  |  |-edit.html
    |  |  |-view.html
    |  |- Model.js
    |  |- view.js
    |  |- edit.js
    |  |- create.js
    |  |- load.js
    |-/person
    |  |-/templates
    |  |  |-edit.html
    |  |  |-view.html
    |  |- Model.js
    |  |- view.js
    |  |- edit.js
    |  |- create.js
    |  |- load.js
    |-main.js

コードは前の例と似ていますが、モジュールの各部分が独自のモジュールになっている点が異なります。

//  /person/Model.js
define(['jquery', 'knockout', ...], function($, ko, ...) {

  return function Model() { ... };

});


//  /person/view.js:
define(['jquery', 'knockout', ...], function($, ko, ...) {

  return function view(element, model) { ... };

});

など。

どちらのアプローチが優先されますか? 私が見逃しているより良いアプローチはありますか？

4

1 に答える 1

-1

Backbone / Requireでは、このボイラープレートを使用しているので、少し調整して別のフレームワークで使用できると思います。

それは非常に完全であり、初めてコードを見つけたとしても、モジュールを見つけるのは非常に簡単です。

于 2013-03-06T04:37:52.830 に答える