本文概述
在过去的几年中, 可用的JavaScript框架数量急剧增加。从久经考验的AngularJS到每个月都会出现的众多框架, 都有令人印象深刻的多样性可供选择。几年前引起我注意的一个框架叫做Meteor。与大多数框架不同, Meteor旨在成为JavaScript应用程序开发的完整平台。对于那些不熟悉Meteor的人, 我建议你在其网站上查看。本文将不会是Meteor的介绍。相反, 我们将探索一些简单的方法来在Meteor项目中引入结构。
Meteor框架中改善项目结构的开发人员指南
Meteor的一大优点是, 使用它快速原型化复杂的JavaScript应用程序非常容易。由于Meteor是前端模板和渲染的混合, 再加上与MongoDB交互的基于节点的服务器(统一解决方案), 因此创建全栈式Web应用程序所需的大多数初始设置已经完成。但是, 这提供的易于开发可能是一个陷阱。在构建Meteor应用程序时, 很容易陷入不良做法并最终导致杂乱无章的代码。对于如何避免这种情况, 我有一些建议。
脚手架:Meteor中可管理的目录层次结构
首先, 在构建应用程序时, 维护建议的文件夹结构非常重要。 Meteor默认情况下允许你将文件放置在项目文件夹中的任何位置-如果需要, 甚至可以将所有代码放在一个文件中。尽管这可能适用于黑客马拉松项目, 但如果没有健全的结构, 通常难以管理通常的生产级可伸缩应用程序所带来的复杂性。
为了解决此问题, 我建议你检查Chris Mather的npm包装铁。该软件包具有多种配置选项, 因此此处将很难描述, 但总的来说, 它构造了一个项目结构, 看起来像这样:
my-app/
|- .iron/
|- config.json
|- bin/
|- build/
|- config/
|- development/
|- env.sh
|- settings.json
|- app/
|- client/
|- collections/
|- lib/
|- stylesheets/
|- templates/
|- head.html
|- lib/
|- collections/
|- controllers/
|- methods.js
|- routes.js
|- packages/
|- private/
|- public/
|- server/
|- collections/
|- lib
|- methods.js
|- publish.js
|- bootstrap.js
但是, 对于某些项目, 像这样的文件夹和文件结构可能会显得过分。并非每个项目都需要具有这种细粒度的组织级别, 并且需要在服务器上分离集合, 方法和发布代码。对于那些没有太大项目或只是不想安装和学习另一个npm软件包的人, 我建议使用以下基本文件夹结构:
关键元素是一个公用文件夹, 其中包含诸如收藏夹图标和其他静态资产之类的文件, 以及客户端, 公用和服务器文件夹。客户端和服务器文件夹(当然)应包含分别在客户端和服务器上执行的代码。 common文件夹包含客户端和服务器都必须可以访问的代码。 Schema代码就是一个例子, 稍后我们将对其进行讨论。
有两种执行最低级别组织的方法:一种是通过文件类型, 第二种是通过功能。按文件类型组织意味着, 例如, 在你的client / templates文件夹中, 你将有三个文件夹-一个用于JavaScript文件, 一个用于CSS, 一个用于HTML。 HTML文件夹将包含你的所有模板HTML文件, 例如Login.html, Main.html等。 JavaScript和CSS文件夹将分别包含其类型的模板文件。另一方面, 按功能组织意味着通过文件体现的概念进行组织。例如, 在客户端/模板中, 我将拥有一个”登录”文件夹, 其中包含与该应用程序的登录过程相关的所有JavaScript, CSS和HTML文件。我更喜欢按功能组织, 因为它使你可以更清楚地了解在哪里可以找到某些文件或代码段。但是, 它不是纯黑白的, 大多数个人和团队都使用这些方法的某种混合来构造其文件和文件夹。
模式:即使你的数据库不需要, 你的应用也需要它
我想讨论的第二种结构与数据库有关。本文假设你正在使用MongoDB。如果不是这样, 则这些概念可能仍然适用, 但具体内容将不适用。那些使用MongoDB的人都知道, 它允许我们存储数据的方式是非结构化的。由于MongoDB是NoSQL文档存储数据库, 因此对于任何”类型”的数据都没有固定的架构。这种自由意味着你不必担心要确保将所有对象标准化为某种刚性形式, 实际上, 如果需要, 你的所有应用程序数据都可以放入一个集合中。但是, 在制作高质量的应用程序时, 这确实不是很理想。为了进行管理并添加有用的功能, 例如验证写请求, 我们可以使用两个不错的Meteor软件包:Aldeed的SimpleSchema和Collection2。
顾名思义, SimpleSchema程序包允许你以反应方式验证应用程序中的对象。在GitHub上查看文档。 Collection2软件包从SimpleSchema引导, 并允许你将适当的架构带入Meteor集合。启用的功能是自动验证对任何具有附加模式的集合的客户端和服务器端写请求。这两个软件包都很深入且可自定义, 因此很难在几段中全面了解它们。相反, 我建议你查看Aldeed针对特定内容编写的详细自述文件。我将简单谈谈如何从这些套餐中获得价值。他们启用的最好的功能之一就是验证用户的表单输入。这对于验证”Meteor用户”文档(来自”帐户”包)非常有用。默认情况下, “Meteor用户”具有令人惊讶的复杂隐式架构。以下是Aldeed非常乐意提供的代码中的一部分图片:
Schema.UserProfile = new SimpleSchema({
firstName: {
type: String, optional: true
}, lastName: {
type: String, optional: true
}, birthday: {
type: Date, optional: true
}, gender: {
type: String, allowedValues: ['Male', 'Female'], optional: true
}, organization : {
type: String, optional: true
}, website: {
type: String, regEx: SimpleSchema.RegEx.Url, optional: true
}, bio: {
type: String, optional: true
}, country: {
type: Schema.UserCountry, optional: true
}
});
这只是用户个人资料对象的架构。如果没有像SimpleSchema这样的专用软件包, 尝试验证所有User对象将是一团糟。尽管所有这些字段在图片中都显示为可选, 但如果你想要一个经过正确验证的User模式, 它们可能就不会被选中, 例如” Schema.UserCountry”之类的内容实际上会重定向到其他模式以进行验证。通过将此模式附加到User对象并将其动态地集成到我们的表单中, 也许使用Aldeed的AutoForm之类的程序包, 我们可以很好地控制将哪些内容放入或未放入数据库中, 从而节省了时间和精力关于如何在我们的应用程序中处理数据的概念模型, 可以用具体的术语指出和讨论。
角色:适用于401和403
关于构造和改进Meteor项目的最后建议是Alanning的Roles软件包。这是Meteor的授权系统, 它使你可以检查Web应用程序任何部分的用户访问级别。权限以字符串的形式附加到用户配置文件中, 当用户尝试访问任何发布到客户端的Meteor方法或数据时, 权限将在以后验证或无效。例如:
if (Roles.userIsInRole(Meteor.userId(), "admin")) {
tabsArr.push({
name: "Users", slug: "users"
});
}
尽管系统的核心相对简单, 但是它允许为应用程序的任何部分提供复杂且细粒度的权限。由于所有角色都存储为字符串, 因此你可以设置一个尽可能深的系统-” admin”, ” admin.division1.manage”, ” admin.division1.manage.group2″, 依此类推。
该软件包所具有的自由度带来的麻烦是, 很难跟踪高度精细的角色系统。该软件包确实提供了诸如” getAllRoles”之类的函数, 顾名思义, 该函数可检索你创建的所有角色, 但是由你来跟踪它们的所有含义是什么, 以及何时给定角色使用。对于那些好奇的人来说, “角色”和”权限”之间的区别是什么, 就本包而言, 它们本质上没有什么不同。
本文总结
不幸的是, 由于本文的广度(这里提到的每个软件包都应有其单独的教程), 因此无法详细介绍任何特定的软件包, 但我希望我能阐明一些如何实现”标准化”的方法。你可以放心的Meteor应用程序将在生产和大规模生产中良好运行。如果你需要更多信息, 请查看我发布的链接, 并查看另一篇文章未涉及的内容, 但在Meteor应用程序中使用它很有用:Restivus软件包, 它使你可以轻松为你的应用公开REST API。
作为免责声明, 我不是这些软件包中的任何一个的作者, 如果我对任何软件包的任何功能或目标作了错误的陈述, 我深表歉意。感谢你的阅读, 希望本文对你有所帮助。如有任何疑问, 请随时与我联系, 或在下面发表评论。
相关:Meteor教程:使用Meteor构建实时Web应用程序
评论前必须登录!
注册