javascript - 如何在单页 Web 应用程序中组织您的模型并实现封装

Question

首先，对于我的无知，我深表歉意。当谈到 JavaScript 时，我的脸很幼稚，主要来自 Java 背景，所以其中有相当一部分对我来说是新的。我已经阅读了几篇文章，但老实说，我什至不确定要问什么好问题。

我一直在关注“单页 Web 应用程序:端到端的 JavaScript”，现在我要回顾代码并尝试重构/重构它，以便它对我有意义。

我想了解的一件事是如何使用作者引用的模块化模式正确组织代码。

spa.model = (function () {
    var people,
        stateMap = { id : 1 };

    people = (function () {
        var methods1, method2;

        method1 = function(){ … }; // do something
        method2 = function(){ … }; // do something 

        return {
            method1 : method1,
            method2 : method2
        };
    }());

    return {
        people : people
    };

}());

这让我可以调用类似 spa.model.people.method1();

我喜欢做的是以某种方式将 people var 移动到另一个文件，使其看起来像这样

spa.model = (function () {
    var people = spa.model.people,
        stateMap = { id : 1 };

    return {
        people : people
    };

}());

spa.model.people = (function () {
    var method, method2;

    method1 = function() { return stateMap.id; },
    method2 = ... ;

    return {
        method1 : method1,
        method2 : method2
    };

}());

但是，当我像这样重构代码时，会遇到各种范围错误。例如，我无法再从 spa.model.people 引用 stateMap。

使用此模式时如何组织较大的文件？即使只有两个对象(人员和聊天)，作者的 spa.model 文件也变得相当大。想象一下有 20 个数据库对象要建模。那将是一个巨大的文件。

Answer 1

IMO，最好的方法是创建父(“模型”)和从属模块，如 model.people、model.auth 和 model.chat。父级(“模型”)管理和协调共享状态和配置。从属模块(model.people、model.auth、model.chat)不应相互调用或以其他方式依赖于对方的存在。

这是一个示例，其中模型协调 3 个从属模块接口(interface)(model.people、model.chat、model.auth)并将共享状态存储在其 stateMap 中。认识到每个从属模块都会有自己封装的stateMap，不会污染父状态。虽然这个例子肯定不完整，但希望它能帮助指明方向。

model = (function () {
  var 
    __undef,
    configMap = {};
    stateMap  = { 
      user_id   : __undef,
      chatee_id : __undef
    },

    logIn, addPerson, rmPerson, callPerson, hangUp;

  logIn = function ( user_name, passwd_str ) {
    user_id = model.auth( user_name, passwd_str );
    if ( user_id ) {
      model.people.addPerson( user_id ):
      model.chat.announceUser( user_id );
      stateMap.user_id = user_id;
    } 
  };

  // ... and more methods that coordinate subordinate modules

  return { 
    logIn      : logIn,
    addPerson  : addPerson,
    rmPerson   : rmPerson,
    callPerson : callPerson,
    hangUp     : hangUp
  };
}());

这东西并不总是那么容易。我尽量不要太在意组织，但要记住这一点。这有点像项目管理:我见过的唯一“完美”的项目计划是在项目完成后写的。代码组织也是如此。在我的第一遍中，我允许自己有点草率。例如，作为快速破解，我可能会违反无对等串扰规则 - 但我会添加一个大的 TODO 以确保它不会进入生产代码。

一旦我们的代码确定下来，我就会再给它一次并清理松散的部分 - 就像前面提到的大脂肪 TODO。结果通常是组织良好、易于理解和可维护的代码。如果没有，我会冲洗并重复。

希望对您有所帮助!