作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Darion卡塞尔
验证专家 在工程

Darion有3年以上用JavaScript构建web应用程序的经验 & Python. 他曾为Rackspace等公司工作, & CommVault.

专业知识

以前在

谷歌
分享

在过去的几年里, 可用的JavaScript框架的数量急剧增加. 从久经考验的AngularJS到每月推出的众多框架, 有令人印象深刻的多样性可供选择. 几年前引起我注意的是一个名为流星的框架. 与大多数框架不同,流星旨在成为JavaScript应用程序开发的完整平台. 对于那些刚接触流星的人,我鼓励您去看看 他们的网站. 本文不是对流星的介绍. 相反,我们将探索一些在流星项目中引入结构的简单方法.

在流星框架中改进项目结构的开发者指南

在流星框架中改进项目结构的开发者指南

流星的一大好处是,使用它可以非常容易地快速构建复杂JavaScript应用程序的原型. 因为流星是前端模板和渲染的混合,加上一个基于node的服务器与MongoDB交互(一个统一的解决方案), 创建全栈web应用程序所需的大部分初始设置已经为您完成了. 然而,这提供的开发便利性可能是一个陷阱. 在构建流星应用程序时,很容易陷入糟糕的实践,并以混乱的非结构化代码告终. 对于如何避免这种情况,我有一些建议.

脚手架:流星中可管理的目录层次结构

第一个, 在构建应用程序时,维护推荐的文件夹结构非常重要. 默认情况下,流星允许您将文件放置在项目文件夹中的任何位置——如果您愿意,甚至可以将所有代码放在一个文件中. 虽然这可能适用于黑客马拉松项目, 通常生产水平所产生的复杂性, 如果没有合理的结构,可扩展的应用很难管理.

为了解决这个问题,我建议查看Chris Mather的npm包 . 这个包有各种各样的配置选项,所以很难在这里描述, 但总的来说,它构建了一个项目结构,看起来像这样:

我的app /
|- .铁/
   | - - - - - -配置.json
| - bin /
| - - - - - -构建/
| - config /
   | - - - - - -开发/
      | - env.sh
      | - - - - - -设置.json
| - app /
   | - - - - - -客户端/
      | -集合/
      | - lib /
      | -样式表/
      | -模板/
      | - - - - - -头.html
   | - lib /
      | -集合/
      | -控制器/
      | - - - - - -方法.js
      | -路线.js
   | -包/
   | -私人/
   | -公共/
   | -服务器/
      | -集合/
      | - - - - - -自由
      | - - - - - -方法.js
      | - - - - - -发布.js
      | - - - - - -引导.js

然而,对于某些项目,这样的文件夹和文件结构可能是多余的. 并不是每个项目都需要这种细粒度的组织级别, 具有用于集合的分隔, 方法, 并在服务器上发布代码. 对于那些没有太大的项目,或者只是不想安装和学习另一个npm包的人, 我推荐这样的基本文件夹结构:

关键元素是一个公共文件夹,其中包含像你的图标和其他静态资产之类的文件, 而客户, 常见的, 服务器文件夹. 客户端和服务器文件夹(当然)应该包含分别在客户端和服务器上执行的代码. 公共文件夹包含客户端和服务器都必须可以访问的代码. 模式代码就是一个例子,我们将稍微讨论一下.

有两种方法可以执行最低级别的组织:一种是按文件类型, 第二个是通过函数. 按文件类型组织意味着在客户端/模板文件夹中, 例如, 您将有三个文件夹-一个用于JavaScript文件, 一个是CSS, 一个是HTML. HTML文件夹将包含所有模板HTML文件,例如Login.html,主要.Html等等. JavaScript和CSS文件夹将分别包含各自类型的模板文件. 另一方面,按功能组织意味着按文件所体现的概念进行组织. 例如, 在客户端/模板, 我会创建一个名为Login的文件夹, 所有的JavaScript, CSS, 以及与应用程序登录过程相关的HTML文件. 我更喜欢按函数组织,因为这样可以让您更清楚地知道在哪里可以找到某些文件或代码片段. 然而, 这不是纯粹的非黑即白, 大多数个人和团队都会使用这些方法的混合来构建他们的文件和文件夹.

模式:你的应用程序需要它,即使你的数据库不需要

我要讨论的第二种结构与数据库有关. 本文假设您正在使用MongoDB. 如果你不是,这些概念可能仍然适用,但细节就不适用了. 使用MongoDB的人知道,它允许我们以非结构化的方式存储数据. 由于MongoDB是一个NoSQL文档存储数据库,因此对于任何“类型”的数据都没有固定的模式. 这种自由意味着您不必担心确保所有对象都标准化为某种刚性形式, 事实上, 如果你愿意,你可以将应用程序的所有数据放入一个集合中. 然而,当涉及到制作产品质量的应用程序时,这就不那么可取了. 为了管理这一点并添加有用的特性,如写请求的验证, 我们可以转向两个很棒的流星软件包:Aldeed的Simple模式和Collection2.

Simple模式包, 顾名思义, 允许你在应用程序中响应性地验证对象. 请查看 GitHub上的docs. 的 Collection2 包从Simple模式中启动,并允许您将适当的模式引入流星集合. 这样就可以自动验证客户端和服务器端对任何带有模式的集合的写请求. 这两个包都是非常深入和可定制的,所以很难在几段话中完全理解它们. 相反,我建议您查看Aldeed为具体内容编写的详细说明. 我将简单地谈谈我如何从这些包中获得价值. 他们支持的最好的事情之一是验证用户的表单输入. 这在验证流星 User文档时很方便(从Accounts包). 默认情况下,流星 Users有一个非常复杂的隐式模式. 这是Aldeed提供的代码的一部分图片:

模式.UserProfile = new Simple模式({
    firstName: {
        类型:字符串,
        可选:真
    },
    姓:{
        类型:字符串,
        可选:真
    },
    生日:{
        类型:日期,
        可选:真
    },
    性别:{
        类型:字符串,
        allowedValues:['男','女'],
        可选:真
    },
    组织:{
        类型:字符串,
        可选:真
    },
    网站:{
        类型:字符串,
        regEx: Simple模式.正则表达式.网址,
        可选:真
    },
    生物:{
        类型:字符串,
        可选:真
    },
    国家:{
        模式类型:.UserCountry,
        可选:真
    }
});

这就是User的概要文件对象的模式. 如果没有像Simple模式这样专门构建的包,尝试验证所有User对象将是一场混乱 . 而所有这些字段在图片中都是可选的, 如果你想要一个正确验证的用户模式,他们可能不会, 以及“图式”之类的东西.UserCountry”实际上重定向到其他模式进行验证. 通过将此模式附加到User对象并将其响应式地集成到表单中, 也许有一个包裹像 alde的AutoForm, 我们可以很好地控制什么可以进入数据库,什么不可以进入数据库, 使用一个关于如何在应用程序中处理数据的概念模型来节省时间和精力,这个概念模型可以用具体的术语来指出和讨论.

角色:针对401和403

关于构建和改进流星项目,我的最后一个建议是Alanning的 角色包. 这是流星的授权系统, 它允许你检查你的web应用的任何部分的用户访问级别. 权限以字符串的形式附加到User配置文件上,当用户尝试访问发布到客户端的任何流星方法或数据时,这些字符串稍后会被验证或无效. 例如:

如果(角色.userIsInRole(流星.userId(), "admin")) {
     tabsArr.({推
            名称:“用户”,
            鼻涕虫:“用户”
      });
 }

虽然系统的核心比较简单, 它允许为应用程序的任何部分提供复杂和细粒度的权限. 因为所有的角色都存储为字符串, 你可以建立一个系统,只要你喜欢-“管理”, “管理.division1.管理”、“管理.division1.管理.Group2”,以此类推.

这个包所带来的自由带来的问题是,很难跟踪高度细粒度的角色系统. 这个包确实提供了诸如“getAllRoles”之类的函数, 顾名思义, 检索您创建的所有角色, 但你要掌握它们的含义, 以及什么时候应该使用给定的角色. 对于那些好奇“角色”和“权限”之间有什么区别的人, 就本包的目的而言,它们本质上没有什么不同.

结束

不幸的是, 由于文章的广度(这里提到的每个包都有自己的教程),不可能详细介绍任何特定的包, 但我希望我能对你如何朝着“标准化”的方向努力提供一些启示。 流星 您可以确信的应用程序将在生产和大规模中运行良好. 如果你想了解更多信息, 请查看我发布的链接,并看看另一件没有出现在本文中的事情, 但是在流星应用程序中很有用 Restivus包,它允许您轻松地为您的应用程序公开REST API.

作为免责声明, 我不是这些软件包的作者, 如果我歪曲了任何软件包的功能或目的,我向您道歉. 谢谢你的阅读,我希望这篇文章对你有所帮助. 如果你有任何问题,请随时与我联系,或者在下面留言.

聘请Toptal这方面的专家.
现在雇佣
Darion卡塞尔

Darion卡塞尔

验证专家 在工程

匹兹堡,宾夕法尼亚州,美国

2016年1月8日成为会员

作者简介

Darion有3年以上用JavaScript构建web应用程序的经验 & Python. 他曾为Rackspace等公司工作, & CommVault.

作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

以前在

谷歌

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal开发者

加入总冠军® 社区.