模块粒度策略答案

【问题标题】：Module granularity strategies模块粒度策略
【发布时间】：2012-12-28 17:57:15
【问题描述】：

我正在构建一个使用 RequireJS 模块化的 KnockoutJS Web 应用程序。我正在尝试在几种将事物分解为模块的策略之间做出决定。

扁平化方法：
一种方法具有更扁平的目录结构和更大的模块：

/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) { ... };

});

等等。

这两种方法都是首选吗？我错过了更好的方法吗？

【问题讨论】：

我倾向于采用与您的第一种方法接近的方法。然而。我还有一个 viewmodel 子文件夹，main.js、person.js 和car.js 都在其中。显然两种方式都有效。它只是保持所有编码人员一致地创建文件的一个例子

标签： javascript knockout.js requirejs

【解决方案1】：

对于 Backbone/Require，我们使用的是 this Boilerplate，我认为您可以将它与另一个框架一起使用，只需稍作调整。

很全，找个模块也很容易，即使是第一次找代码。

【讨论】：