20、MeteorJS开发最佳实践、模式与SEO优化-优快云博客

本文链接：https://blog.youkuaiyun.com/zero1/article/details/149384911

MeteorJS开发最佳实践、模式与SEO优化

1. MeteorJS基础组件

MeteorJS由多个基础组件构成，这些组件共同支撑起强大的框架，以下为你详细介绍：
- MiniMongo ：一种NoSQL Web SQL，是客户端对MongoDB的近似实现。MeteorJS采用这种方式，可确保服务器和客户端的查询操作统一。当订阅启动时，MeteorJS会在MiniMongo中创建具有相同文档结构的集合，但仅包含订阅的数据。
- 数据检索 ：数据库数据发生变化时，服务器会运行MergeBox进程，找出差异并将其发送给客户端。随着数据库规模增大，差异计算的复杂度也会增加。为优化此过程，若有访问权限，MeteorJS会尝试读取Mongo的操作日志（oplog）。在生产环境中，必须启用oplog跟踪并为MeteorJS提供访问权限。
- 会话（Session） ：一种响应式数据源，即使应用刷新后仍能保留数据。它是reactive - dict和本地存储持久化的扩展，可设置任何EJSON可处理或未定义的值。
- 粘性会话（Sticky session） ：部署应用到服务器时需关注的问题。当请求来自特定客户端时，所有请求都应指向同一服务器。若服务器前有负载均衡器或代理，必须启用粘性会话。选择托管服务提供商时，要确保其支持粘性会话。
- Fibers ：MeteorJS使用Node.js的核心差异化因素。MeteorJS内部广泛使用Fibers，因其允许随时中断操作，让其他操作使用CPU，从而实现更精细的执行控制。更多信息可参考：https://github.com/laverdet/node - fibers 。
- 跟踪器（Trackers） ：一个简单却强大的库，当相关数据发生变化时，可重新运行代码。MeteorJS在所有响应式数据源和模板中都使用了它。
- Blaze ：MeteorJS的视图层，位于客户端。它与跟踪器绑定，能创建超简单、高度响应式的界面，类似于Angular.js和React.js。从Meteor 1.2开始，可在Meteor.js应用中使用Angular.js和React.js，但即使不使用Blaze，它仍会存在于应用中，未来有计划将其外部化，让用户选择使用的UI框架。
- 包（Packages） ：MeteorJS的核心组成部分。MeteorJS框架由一系列包构建而成，如Meteor、Trackers、Mongo、WebApp等。它还支持创建和使用自定义包，并且可在应用中包含NPM包，在移动开发中使用Cordova插件。
- 构建工具 ：MeteorJS拥有先进的构建工具，可同时为移动和Web平台创建构建。它能将HTML代码编译为JavaScript代码，使用Babel转换ES2015代码，将包合并为单个文件，为Web应用创建HTML文档，在移动开发中打包相关代码等。

以下是这些基础组件的关系流程图：

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    MiniMongo([MiniMongo]):::process --> DataRetrieval([数据检索]):::process
    Session([会话]):::process --> Application([应用]):::process
    StickySession([粘性会话]):::process --> Server([服务器]):::process
    Fibers([Fibers]):::process --> MeteorJS([MeteorJS]):::process
    Trackers([跟踪器]):::process --> Blaze([Blaze]):::process
    Packages([包]):::process --> BuildTools([构建工具]):::process
    BuildTools --> Application
    DataRetrieval --> Application
    MeteorJS --> Application
    Blaze --> Application

2. 数据库操作安全

开发MeteorJS应用时，确保数据库操作安全至关重要。以下是一些关键要点：
- 数据验证 ：插入或更新数据库数据前，必须验证每一条数据。不要轻信用户输入，防止SQL注入、XSS注入等攻击。编写数据库操作代码时，要采用防御性编程，避免恶意输入。例如，在SQL中使用预编译语句可防止基本的SQL注入，但MongoDB没有预编译语句，需谨慎构建查询。
- 权限检查 ：执行数据库操作前，要检查用户是否有权限。如用户A不应被允许更新用户B的资料。对于用户集合，其包含电子邮件、密码和资料详情等敏感信息，更新或查询操作应基于角色进行访问控制。

以下是一个更新用户资料的示例及问题分析：

Meteor.methods({
  updateUser: function(id, profile) {
    Meteor.users.update({_id: id}, {$set: {profile: profile}});
  }
});

上述代码存在安全风险，若攻击者知道用户ID，就能轻松更新其他用户的资料。可通过以下方式改进：

updateUser: function(id, profile) {
    if(id!== Meteor.userId()) {
      throw new Meteor.Error('Unauthorized');
    }
    Meteor.users.update({_id: id}, {$set: {profile: profile}});
  }

此外，直接更新整个资料对象也有风险，攻击者可能发送大量垃圾数据占用系统内存。应创建新对象，仅复制需要存储的属性。同时，要对输入进行特殊字符清理，使用URL编码对输入进行清理，并根据需要检查数据类型。MeteorJS提供了 check 函数和 Match 模式进行数据验证：

check(value, pattern)
check(data, String)
check(office, {building: String, room: Number})

更多验证函数和方法可参考：
- http://docs.meteor.com/#/full/check
- http://docs.meteor.com/#/full/matchpatterns

使用如collection2等包，可进一步定义输入类型和验证逻辑，增强数据库操作的安全性。

对于 $where 子句，使用前必须验证参数，否则可能遭受攻击。例如以下代码：

Meteor.methods({
  findProducts: function(query, fields) {
    return Products.find({$where: query}, fields);
  }
});

攻击者可能通过传递 1 == 1 获取所有文档，或通过空的 fields 参数获取文档的所有字段。Mongo查询允许执行函数，要避免创建接受函数作为查询参数的数据库操作方法，防止攻击者注入使CPU负载达到100%的脚本。

3. 数据库索引

数据库索引并非MeteorJS特有的功能，但在创建生产应用时非常重要。索引可提高搜索效率和速度。MeteorJS未明确支持创建索引，但可直接在数据库中创建。MongoDB提供多种索引类型，可根据需求选择。MeteorJS通过 _ensureIndex 方法提供非官方支持，但使用时需自行承担风险，因为它是数据库阻塞操作，可能导致应用停机，建议在MongoDB控制台进行索引操作。

检查数据库文档是否已索引，可使用MongoDB的 .explain 方法，示例如下：

db.users.find({}, {"profile.name": 1}).explain();

若集合已索引， explain 方法将返回 BtreeCursor ，否则返回 BasicCursor 。作为开发者，为提高性能，应负责对数据库进行索引。

4. oplog跟踪

MeteorJS从服务器向客户端提供数据时，会计算必要数据的差异并仅发送差异部分。但对于大型数据库，这种方式效率较低。若能访问数据库的oplog，MeteorJS可高效地进行差异计算。

将应用部署到生产环境时，oplog跟踪支持是重要的检查项。要选择能提供oplog访问权限的数据库供应商，若使用内部MongoDB设置，需创建主从备份系统，确保oplog可被MeteorJS访问。

5. 错误处理

编程中，错误处理与编写应用逻辑同样重要。开发MeteorJS应用时，需广泛处理各种错误，如404页面、错误路由、无效输入、网络连接问题、授权违规和认证失败等。

MeteorJS提供了 Meteor.Error 类来定义和抛出异常，语法和示例如下：

new Meteor.Error(error, [reason], [details])

例如，用户未登录就尝试发表评论时抛出异常：

throw new Meteor.Error("logged - out", "The user must be logged in to post a comment.");

根据MeteorJS文档，从服务器向客户端传递错误的唯一方式是通过 Meteor.Error ，若抛出其他错误，客户端将收到500错误。在服务器方法中抛出异常时，必须使用 Meteor.Error 类，确保异常能正确传递到客户端。更多异常处理信息可参考：http://docs.meteor.com/#/full/meteor_error 。

6. 测试

测试应用可确保其稳定性。开发中，通常关注单元测试，可使用Tinytest和Jasmine编写测试。除单元测试外，还可使用Robot Framework或Cucumber编写行为测试或自动化测试。Velocity是MeteorJS的官方测试运行器，可运行多个测试，应充分利用它编写稳定的应用。

7. 订阅管理

订阅是异步操作，每次调用 Meteor.subscribe 时，服务器会创建缓存来跟踪订阅数据，这会占用服务器内存。因此，完成订阅后应及时停止，订阅句柄的 .stop 方法可用于停止订阅。

为高效管理订阅，应立即终止不再需要的订阅，并在页面间保留必要的订阅，避免每次导航时重新订阅。例如，在实现搜索功能时，每次用户输入新查询就订阅新数据，会导致旧订阅一直存在，增加服务器内存负担，降低应用性能。可将查询设为响应式变量，并使用跟踪器管理订阅。

还有一种流行的订阅模式——模板级订阅，订阅在模板回调中创建，模板销毁时自动销毁，无需手动销毁。可在模板实例上调用 subscribe 方法，并使用 Template.subscriptionsReady 标志等待所有订阅准备就绪。若模板和订阅有直接关系，建议在模板级别编写订阅代码。

8. 仅发布和订阅必要数据

开发过程中，多次强调仅发布和订阅必要数据。定义发布时，应只向客户端发送必要的字段，而非整个文档，以减少数据传输量，提高应用性能。

综上所述，开发MeteorJS应用时，遵循这些最佳实践和模式，可提高应用的安全性、性能和稳定性。牢记这些基础组件和操作要点，有助于更清晰地理解应用中的信息流动，从而更高效地开发和调试应用。

MeteorJS开发最佳实践、模式与SEO优化

9. 应用目录结构

以下是一个简单的目录结构示例：

my-meteor-app/
├── client/
│   ├── main.html
│   ├── main.js
│   └── styles.css
├── server/
│   ├── main.js
│   └── database.js
├── imports/
│   ├── api/
│   │   └── tasks.js
│   └── ui/
│       └── components/
│           └── taskList.js
├── public/
│   └── images/
│       └── logo.png
└── private/
    └── config.json

10. 静态资源服务

在MeteorJS应用中，静态资源（如图片、CSS文件、JavaScript库等）的服务需要特别注意。以下是一些处理静态资源的建议：
- 使用 public 目录 ：将静态资源放在 public 目录下，MeteorJS会自动将其发布到应用的根目录下。例如，将图片 logo.png 放在 public/images 目录下，可通过 /images/logo.png 访问。
- 使用CDN ：对于常用的JavaScript库和CSS框架，如jQuery、Bootstrap等，建议使用CDN（内容分发网络）来提供服务，以提高加载速度。在HTML文件中添加CDN链接即可：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Meteor App</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- 页面内容 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

缓存控制 ：为了提高性能，可设置静态资源的缓存策略。在 server 目录下创建一个文件，如 staticCache.js ，并添加以下代码：

import { WebApp } from 'meteor/webapp';

WebApp.rawConnectHandlers.use((req, res, next) => {
  if (req.url.match(/\.(jpg|jpeg|png|gif|css|js)$/)) {
    res.setHeader('Cache-Control', 'public, max-age=31536000'); // 缓存一年
  }
  next();
});

11. 应用命名空间

在MeteorJS应用中，使用命名空间可以避免全局变量冲突，提高代码的可维护性。以下是一个简单的命名空间示例：

// 定义命名空间
MyApp = {};

// 在命名空间下定义变量和函数
MyApp.tasks = new Mongo.Collection('tasks');

MyApp.addTask = function(task) {
  MyApp.tasks.insert(task);
};

通过这种方式，将相关的代码组织在一个命名空间下，减少了全局变量的使用，提高了代码的可读性和可维护性。

12. 转换类

转换类可用于对数据库中的数据进行转换和处理，使数据在不同的上下文中更易于使用。例如，将数据库中的日期字符串转换为JavaScript的 Date 对象：

// 定义转换类
class Task {
  constructor(doc) {
    _.extend(this, doc);
  }

  get createdAtDate() {
    return new Date(this.createdAt);
  }
}

// 在集合中使用转换类
Tasks = new Mongo.Collection('tasks', {
  transform: function(doc) {
    return new Task(doc);
  }
});

在上述示例中， Task 类的 createdAtDate 方法将数据库中的 createdAt 字段转换为 Date 对象，方便在应用中使用。

13. 使用Kadira识别可扩展性问题

Kadira是一个用于监控和性能分析的工具，可帮助开发者识别MeteorJS应用中的可扩展性问题。以下是使用Kadira的基本步骤：
1. 安装Kadira包 ：在MeteorJS应用中，使用以下命令安装Kadira包：

meteor add meteorhacks:kadira

配置Kadira ：在服务器端代码中，添加Kadira的配置信息：

Kadira.connect('appId', 'appSecret');

分析性能数据 ：登录Kadira控制台，查看应用的性能数据，如响应时间、CPU使用率、内存使用等。通过分析这些数据，可找出应用中的瓶颈和可扩展性问题。

以下是使用Kadira的流程图：

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    InstallKadira([安装Kadira包]):::process --> ConfigureKadira([配置Kadira]):::process
    ConfigureKadira --> AnalyzeData([分析性能数据]):::process
    AnalyzeData --> IdentifyIssues([识别可扩展性问题]):::process