使用许多HTML模板文件构建大型Meteor应用程序的最佳实践是什么？ [关闭]-Java 学习之路

166

在所有示例（排行榜，文字游戏等）中，他们都有一个HTML模板文件 . 是否有一些大型开源Meteor项目，包含许多不同的HTML模板文件，我们可以将其作为最佳实践示例？将大型应用程序所需的所有内容都放在一个模板文件中似乎不切实际 .

14 回答

把它们拼凑在一起！来自文档：

> HTML files in a Meteor application are treated quite a bit differently
> from a server-side framework. Meteor scans all the HTML files in your
> directory for three top-level elements: <head>, <body>, and
> <template>. The head and body sections are seperately concatenated
> into a single head and body, which are transmitted to the client on
> initial page load.
> 
> Template sections, on the other hand, are converted into JavaScript
> functions, available under the Template namespace. It's a really
> convenient way to ship HTML templates to the client. See the templates
> section for more.

回复于 2024-04-16T14:06:48+08:00

11

和非官方流星常见问题一样，我认为它几乎解释了如何构建一个大型应用程序：

我应该把文件放在哪里？流星中的示例应用程序非常简单，并没有提供太多的洞察力 . 以下是我目前对最佳方法的思考:(非常欢迎任何建议/改进！）lib /＃< - 客户端/服务器的任何常用代码 .
lib / environment.js＃< - 一般配置
lib / methods.js＃< - Meteor.method定义
lib / external＃< - 来自其他人的公共代码
##请注意，lib文件夹中的js文件在其他js文件之前加载 .

集合/＃< - 集合和方法的定义（可能是模型/）

client / lib＃< - 客户端特定的库（也首先加载）
client / lib / environment.js＃< - 任何客户端软件包的配置
client / lib / helpers＃< - 视图文件中经常使用的任何助手（把手或其他）

client / application.js＃< - subscriptions，基本的Meteor.startup代码 .
client / index.html＃< - toplevel html
client / index.js＃< - 及其JS
client / views / <page> .html＃< - 特定于单个页面的模板
client / views / <page> .js＃< - 和JS挂钩
client / views / <type> /＃< - 如果您发现有相同对象类型的大量视图
客户/样式表/＃< - css / styl / less文件

server / publications.js＃< - Meteor.publish定义
server / lib / environment.js＃< - 服务器端软件包的配置

public /＃< - 直接提供的静态文件，例如图像 .

tests /＃< - 单元测试文件（不会加载到客户端或服务器上）
对于较大的应用程序，可以将离散功能分解为子目录，这些子目录本身使用相同的模式进行组织 . 这里的想法是，最终功能模块可以被分解为一个单独的智能包，理想情况下，共享 . feature-foo /＃< - 与功能'foo'相关的所有功能
feature-foo / lib /＃< - 公共代码
feature-foo / models /＃< - 模型定义
feature-foo / client /＃< - 仅发送给客户端的文件
feature-foo / server /＃< - 仅在服务器上可用的文件

了解更多：Unofficial Meteor FAQ

回复于 2024-04-16T14:06:48+08:00
5
我同意yagooar，但不是：
```
client/application.js
```
使用：
```
client/main.js
```
main . *文件最后加载 . 这有助于确保您没有任何加载订单问题 . 有关详细信息，请参阅Meteor文档，http://docs.meteor.com/#structuringyourapp .
回复于 2024-04-16T14:06:48+08:00
36
Meteor的设计使您可以按照自己想要的方式构建应用程序 . 因此，如果您不喜欢您的结构，您可以将文件移动到新目录，甚至将一个文件拆分成多个部分，而Meteor几乎完全相同 . 请注意主文档页面中指定的客户端，服务器和公共目录的特殊处理：http://docs.meteor.com/ .

将所有内容整合在一个HTML填充中肯定不会成为最佳实践 .

以下是一个可能结构的示例：在我的一个应用程序中，一个讨论论坛，我按模块或“页面类型”（主页，论坛，主题，评论）组织，为每个应用程序放置.css，.html和.js文件页面类型一起放在一个目录中 . 我还有一个“基础”模块，它包含常见的.css和.js代码以及主模板，它使用{}根据路由器呈现其他模块之一 .
```
my_app/
    lib/
        router.js
    client/
        base/
            base.html
            base.js
            base.css
        home/
            home.html
            home.js
            home.css
        forum/
            forum.html
            forum.js
            forum.css
        topic/
            topic.html
            topic.js
            topic.css
        comment/
            comment.html
            comment.js
            comment.css
```
你也可以按功能组织
```
my_app/
    lib/
        router.js
    templates/
        base.html
        home.html
        forum.html
        topic.html
        comment.html
    js/
        base.js
        home.js
        forum.js
        topic.js
        comment.js
    css/
        base.css
        home.css
        forum.css
        topic.css
        comment.css
```
我希望尽管会出现一些更具体的最佳实践结构和命名约定 .
回复于 2024-04-16T14:06:48+08:00
15

对于每个在Google上搜索此主题的人：

em 命令行工具（由铁路由器背后的人员EventedMind）在装配新的Meteor应用程序时非常有用 . 它将创建一个漂亮的文件/文件夹结构 . 如果您已经在应用程序上工作并想要重新组织它，只需使用 em 设置一个新项目，您就可以使用它来获取灵感 .

见：https://github.com/EventedMind/em

和这里：https://stackoverflow.com/questions/17509551/what-is-the-best-way-to-organize-templates-in-meteor-js

回复于 2024-04-16T14:06:48+08:00
6
我认为来自Discover Meteor Book的文件结构非常好并且是一个可靠的开始 .
```
/app: 
 /client
   main.html
   main.js
 /server 
 /public
 /lib
 /collections
```
- / server目录中的代码仅在服务器上运行 .
- / client目录中的代码仅在客户端上运行 .
- 其他所有内容都在客户端和服务器上运行 .
- / lib中的文件在其他任何内容之前加载 .
- 在其他所有内容之后加载任何main . *文件 .
- 您的静态资产（字体，图像等）位于/ public目录中 .
回复于 2024-04-16T14:06:48+08:00
3

创建包

当然并不是所有东西都适合这种方法，但是在大型应用程序中，您需要创建包以避免开销，以模块化方式构造代码是个好主意（参见these suggestions）

Meteor允许对如何加载文件（加载顺序，其中：client / server / both）以及包导出的内容进行细粒度控制 .

我特别觉得在相关文件之间共享逻辑的简单方法非常方便 . 比如说，你想做一些util函数并在不同的文件中使用 . 你只需要它"global"（没有 var ）并且Meteor将它包装在包的名称空间中，因此它不会污染全局命名空间

Here是官方文件

回复于 2024-04-16T14:06:48+08:00
26

从meteorjs编码开始一段时间后，我很高兴有一些空余时间来投入 Build 一个相当复杂的在线游戏 . 应用程序结构一直是我最关心的问题之一，看起来好几个非常优秀的程序员都支持构建应用程序的仅包方法，它允许您松散地耦合功能不同的包 . 该方法还有其他优点，可以在这里找到解释该方法的2篇非常好的文章：

http://www.matb33.me/2013/09/05/meteor-project-structure.html http://www.manuel-schoebel.com/blog/meteorjs-package-only-app-structure-with-mediator-pattern

回复于 2024-04-16T14:06:48+08:00

我们有一个大型项目（可能是迄今为止任何人建造的最大的Meteor项目之一，因为它是全职开发的1 . 5年） . 我们在每个视图中使用相同的文件名集 . 它非常一致，可帮助我们快速导航到我们正在寻找的内容：

events.js
helpers.js
templates.html
routes.js
styles.less
等

在项目中看起来像这样：

       ├── consolidationRequests
       │   ├── events.js
       │   ├── helpers.js
       │   ├── routers.js
       │   └── templates.html
       ├── customerSpoof
       │   └── routers.js
       ├── dashboard
       │   ├── events.js
       │   ├── helpers.js
       │   ├── onDestroyed.js
       │   ├── onRendered.js
       │   ├── routers.js
       │   └── templates.html
       ├── emailVerification
       │   ├── events.js
       │   ├── helpers.js
       │   ├── routers.js
       │   └── templates.html
       ├── loading
       │   ├── styles.css
       │   └── templates.html
       ├── mailbox
       │   ├── autoform.js
       │   ├── consolidationRequestConfirmation
       │   │   ├── events.js
       │   │   ├── helpers.js
       │   │   ├── onCreated.js
       │   │   ├── onRendered.js
       │   │   └── templates.html
       │   ├── events.js
       │   ├── helpers.js

相关模板只存储在同一个文件中 . 显示 view/order/checkout/templates.html 的内容已折叠：

<template name="orderCheckout"></template>

<template name="paymentPanel"></template>

<template name="orderCheckoutSummary"></template>

<template name="paypalReturnOrderCheckout"></template>

当视图与许多部分复杂时，我们使用子文件夹：

       ├── cart
       │   ├── addItem
       │   │   ├── autoform.js
       │   │   ├── events.js
       │   │   ├── helpers.js
       │   │   ├── onRendered.js
       │   │   ├── routers.js
       │   │   ├── styles.less
       │   │   └── templates.html
       │   ├── checkout
       │   │   ├── autoform.js
       │   │   ├── events.js
       │   │   ├── helpers.js
       │   │   ├── onRendered.js
       │   │   ├── routers.js
       │   │   └── templates.html
       │   └── view
       │       ├── autoform.js
       │       ├── deleteItem
       │       │   ├── events.js
       │       │   ├── helpers.js
       │       │   └── templates.html
       │       ├── editItem
       │       │   ├── autoform.js
       │       │   ├── events.js
       │       │   ├── helpers.js
       │       │   └── templates.html
       │       ├── events.js
       │       ├── helpers.js
       │       ├── onDestroyed.js
       │       ├── onRendered.js
       │       ├── routers.js
       │       ├── styles.less
       │       └── templates.html

我们还使用WebStorm开发，这是一个非常强大且灵活的Meteor开发编辑器 . 在搜索和组织代码并高效工作时，我们发现它非常有用 .
Webstorm view

很高兴根据要求分享细节 .

回复于 2024-04-16T14:06:48+08:00

274

使用iron-cli搭建CLI . 让事情变得非常简单 .

https://github.com/iron-meteor/iron-cli

一旦安装 . 使用 iron create my-app 创建一个新项目 . 它将为您创建以下结构 . 您也可以在现有项目中使用它 . 在项目目录中使用 iron migrate .

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/    
     controllers/    
     lib/    
     methods.js    
     publish.js    
     bootstrap.js

回复于 2024-04-16T14:06:48+08:00

我遵循mattdeom样板格式，其中包括铁路由器和型号（Collection2） . 见下文：

client/                 # Client folder
    compatibility/      # Libraries which create a global variable
    config/             # Configuration files (on the client)
    lib/                # Library files that get executed first
    startup/            # Javascript files on Meteor.startup()
    stylesheets         # LESS files
    modules/            # Meant for components, such as form and more(*)
    views/              # Contains all views(*)
        common/         # General purpose html templates
model/                  # Model files, for each Meteor.Collection(*)
private/                # Private files
public/                 # Public files
routes/                 # All routes(*)
server/                 # Server folder
    fixtures/           # Meteor.Collection fixtures defined
    lib/                # Server side library folder
    publications/       # Collection publications(*)
    startup/            # On server startup
meteor-boilerplate      # Command line tool

回复于 2024-04-16T14:06:48+08:00

9
构建应用程序有很多不同的方法 . 例如，如果你有一个路由器和不同的页面模板，并且内部的每个页面模板都有很多页面部分，依此类推，我会根据更高级别更低级别的语义来构造它 .

例如：
```
client
  views
    common
      header
        header.html
        header.js
        header.css
      footer
        footer.html
        footer.js
        footer.css
    pages
      mainPage
        mainPage.html
        mainPage.js
        mainPage.css
        articles
          articles.html
          articles.js
          articles.css
        news
          news.html
          news.js
          news.css
     ...
```
当然，您可以将新闻模板放在公共文件夹中，因为您可以在不同页面上使用新闻模板 .

我认为以您熟悉的方式构建应用程序是最好的 .

我在这里写了一个小应用程序：http://gold.meteor.com它是如此之小，我只使用一个html文件，只有一个template.js文件.. :)

我希望它有点帮助
回复于 2024-04-16T14:06:48+08:00
4
在Evented Mind上有一个名为Setting Up Meteor Projects的新类，它解决了这个问题，但也讨论了项目配置和设置开发环境 .

来自 class 中的Application Structure视频：Meteor对应用程序的结构方式没有非常强烈的意见，但这里有一些规则：

1）加载顺序 - Meteor首先进入文件目录中最深的位置，然后按字母顺序处理文件

2）客户端和服务器是Meteor识别的特殊文件夹

我们的结构如下：
```
both/
    collections/
        todos.js
    controllers/
        todos_controller.js
    views/
        todos.css
        todos.html
        todos.js
    app.js - includes routes
client/
    collections/
    views/
        app.js
server/
    collections/
    views/
        app.js
packages/
public/
```
todos_controller扩展了RouteController，这是Iron Router附带的东西 .

上面提到的 em 工具现在也得到了很大的更新，应该会更好，可以在以下位置找到：https://github.com/EventedMind/em
回复于 2024-04-16T14:06:48+08:00
6
我也在寻找通过精心设计的架构来增强和扩展我的应用程序的最佳实践 . 所有上述实践都适用于中小型应用程序，但是当您在更大的团队中工作时会失败 . 我尝试过几种方法：

1）我遵循了这个策略：https://github.com/aldeed/meteor-autoform来扩展和重用模板 . 作者对组件和现场设计有很好的了解 . 我目前正在实施它，因为社区开发了36个软件包，几乎涵盖了所有案例，我可以在开发阶段使用TypeScript来保证类型安全 .
```
<template name="autoForm">
  {{#unless afDestroyUpdateForm this.id}}
  {{! afDestroyUpdateForm is a workaround for sticky input attributes}}
  {{! See https://github.com/meteor/meteor/issues/2431 }}
  <form {{atts}}>
    {{> Template.contentBlock ..}}
  </form>
  {{/unless}}
</template>
```
这是一篇关于如何做的好文章：http://blog.east5th.co/2015/01/13/custom-block-helpers-and-meteor-composability/以及这里：http://meteorpedia.com/read/Blaze_Notes

2）这个看起来很有前景但最近没有更新 . 它是用咖啡脚本编写的一个包 . 用于Meteor的Blaze Components（https://github.com/peerlibrary/meteor-blaze-components）是一个用于轻松开发复杂UI元素的系统，需要在Meteor应用程序周围重复使用 . 您可以在CoffeeScript，vanilla JavaScript和ES6中使用它们 . 最好的是，组件是OOP . 以下是他们的一个例子：
```
class ExampleComponent extends BlazeComponent {
  onCreated() {
    this.counter = new ReactiveVar(0);
  }

  events() {
    return [{
      'click .increment': this.onClick
    }];
  }

  onClick(event) {
    this.counter.set(this.counter.get() + 1);
  }

  customHelper() {
    if (this.counter.get() > 10) {
      return "Too many times";
    }
    else if (this.counter.get() === 10) {
      return "Just enough";
    }
    else {
      return "Click more";
    }
  }
}

ExampleComponent.register('ExampleComponent');

{{> ExampleComponent }}
```
3）我喜欢类型和转换器，告诉我什么时候出错 . 我正在使用TypeScript与Meteor合作并找到以下存储库：https://github.com/dataflows/meteor-typescript-utils似乎创建者试图完成MVC方法 .
```
class MainTemplateContext extends MainTemplateData {
    @MeteorTemplate.event("click #heybutton")
    buttonClick(event: Meteor.Event, template: Blaze.Template): void {
        // ...
    }

    @MeteorTemplate.helper
    clicksCount(): number {
        // ...
    }
}

class MainTemplate extends MeteorTemplate.Base<MainTemplateData> {
    constructor() {
        super("MainTemplate", new MainTemplateContext());
    }

    rendered(): void {
        // ...
    }
}

MeteorTemplate.register(new MainTemplate());

<template name="MainTemplate">
    <p>
        <input type="text" placeholder="Say your name..." id="name">
        <input type="button" value="Hey!" id="heybutton">
    </p>
    <p>
        Clicks count: {{ clicksCount }}
    </p>

    <p>
        <ul>
            {{#each clicks }}
                <li> {{ name }} at <a href="{{pathFor 'SingleClick' clickId=_id}}">{{ time }}</a></li>
            {{/each}}
        </ul>
    </p>
</template>
```
不幸的是，这个项目没有得到维护或积极开发 .

4）我认为已经提到过，你可以使用包进行扩展 . 这需要一种良好的抽象思维方式 . 它似乎适用于望远镜：https://github.com/TelescopeJS/Telescope

5）meteor-template-extension - 提供了各种方法来复制模板助手，事件处理程序和模板之间的钩子，允许代码重用;一个缺点是开发人员必须经常一次又一次地处理所有复制，这随着代码库的增长而变得有问题;而且，如果没有明确定义的API社区，则无法构建和共享组件

6）Flow Components - 流程组件在API设计中更接近React，而Blaze Components保持熟悉的概念，如数据上下文和模板助手;另一方面，Flow Components仍然使用基于模板的事件处理程序，而Blaze Components使它们成为类方法，因此通过继承更容易扩展或覆盖它们 . 一般来说，Blaze Components似乎更倾向于OOP; Flow Components尚未正式发布（＃5和＃6的文本编号https://github.com/peerlibrary/meteor-blaze-components#javascript-and-es6-support）

2号和3号也需要一些使用，但随着时间的推移你会获得开发速度 . 第四个允许您构建和测试组件以使代码更稳定 . 第三个类型具有Typescript的完全类型安全性的优势，当你在一个文档很差的团队中开发时，这是一个巨大的优势 . 但是，我目前正在将第二个移植到TypeScript，因为我觉得使用它非常舒服，而且当我不使用Gulp时，我不必调整编译器包以使其与Meteor一起使用 .

仍然很难找到与Meteor合作的正确方法 . 你需要自己解决这个问题，否则你最终会得到一个安排得很好的文件夹结构，但你不知道一切都在哪里 . 快乐的编码 .
回复于 2024-04-16T14:06:48+08:00

使用许多HTML模板文件构建大型Meteor应用程序的最佳实践是什么？ [关闭]

14 回答

创建包

相关问题