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

Question

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

And*_*row 166 meteor

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

Answer 1

yag*_*oar 275

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

我应该把文件放在哪里？

流星中的示例应用程序非常简单,并没有提供太多的洞察力.以下是我目前对最佳方法的看法:(非常欢迎任何建议/改进!)

lib/                       # <- any common code for client/server.
lib/environment.js         # <- general configuration
lib/methods.js             # <- Meteor.method definitions
lib/external               # <- common code from someone else
## Note that js files in lib folders are loaded before other js files.

collections/               # <- definitions of collections and methods on them (could be models/)

client/lib                 # <- client specific libraries (also loaded first)
client/lib/environment.js  # <- configuration of any client side packages
client/lib/helpers         # <- any helpers (handlebars or otherwise) that are used often in view files

client/application.js      # <- subscriptions, basic Meteor.startup code.
client/index.html          # <- toplevel html
client/index.js            # <- and its JS
client/views/<page>.html   # <- the templates specific to a single page
client/views/<page>.js     # <- and the JS to hook it up
client/views/<type>/       # <- if you find you have a lot of views of the same object type
client/stylesheets/        # <- css / styl / less files

server/publications.js     # <- Meteor.publish definitions
server/lib/environment.js  # <- configuration of server side packages

public/                    # <- static files, such as images, that are served directly.

tests/                     # <- unit test files (won't be loaded on client or server)

Run Code Online (Sandbox Code Playgroud)

对于较大的应用程序,可以将离散功能分解为子目录,这些子目录本身使用相同的模式进行组织.这里的想法是,最终功能模块可以被分解为一个单独的智能包,理想情况下,共享.

feature-foo/               # <- all functionality related to feature 'foo'
feature-foo/lib/           # <- common code
feature-foo/models/        # <- model definitions
feature-foo/client/        # <- files only sent to the client
feature-foo/server/        # <- files only available on the server

Run Code Online (Sandbox Code Playgroud)

了解更多: 非官方流星常见问题解答

从0.6.0开始,你最好避免这种混乱并完全用智能包运行你的应用程序.我在这篇博文中详细介绍了一下:http://www.matb33.me/2013/09/05/meteor-project-structure.html (17认同)
恕我直言,这比接受的答案更好.我现在就试试吧. (12认同)
至于流星1.3,我会说由于ES6模块导入,这已经过时了.请参阅有关应用程序结构的流星指南文章:https://guide.meteor.com/structure.html (3认同)

Answer 2

小智 36

我同意yagooar,但不是:

client/application.js

使用:

client/main.js

main.*文件最后加载.这有助于确保您没有任何加载订单问题.有关更多详细信息,请参阅Meteor文档http://docs.meteor.com/#structuringyourapp.

Answer 3

Jon*_*den 26

Meteor的设计使您可以按照自己想要的方式构建应用程序.因此,如果您不喜欢您的结构,您可以将文件移动到新目录,甚至将一个文件拆分成多个部分,而Meteor几乎完全相同.请注意主文档页面中指定的客户端,服务器和公共目录的特殊处理:http://docs.meteor.com/.

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

以下是一个可能结构的示例:在我的一个应用程序中,一个讨论论坛,我按模块或"页面类型"(主页,论坛,主题,评论)组织,为每个应用程序放置.css,.html和.js文件页面类型一起放在一个目录中.我还有一个"基础"模块,它包含常见的.css和.js代码以及主模板,它使用{{renderPage}}根据路由器呈现其他模块之一.

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

Run Code Online (Sandbox Code Playgroud)

你也可以按功能组织

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

Run Code Online (Sandbox Code Playgroud)

我希望尽管会出现一些更具体的最佳实践结构和命名约定.

这是我最喜欢的答案.关于Meteor,我最喜欢的一件事就是你可以用适合自己的方式构建你的文件. (2认同)

Answer 4

mdg*_*ech 16

把它们拼凑在一起!来自文档:

> 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.

Run Code Online (Sandbox Code Playgroud)

这个答案是谷歌的第一个结果,但它可靠地过时了.像我这样的其他未来的访客; 往下看! (36认同)
这是海报的关注点.集结是可以的,但你可以看到Asana会发生什么 - 它需要一个加载屏幕,同时下载> 1MB的客户端代码.这对许多网站来说都是不可接受的.我们将看看在主屏幕加载后我们是否也不能做一些零碎的加载,但我现在对此持怀疑态度.我认为它需要成为一个功能来解决一些问题. (29认同)

Answer 5

Mik*_*ank 14

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

该em索具新的流星应用程序时,命令行工具(通过EventedMind,后面的铁路由器的球员)是非常有帮助的.它将创建一个漂亮的文件/文件夹结构.如果您已经在应用程序上工作并想要重新组织它,只需设置一个新项目,em您就可以使用它来获取灵感.

请参阅:https://github.com/EventedMind/em

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

注意:这已经被iron-cli(同一作者)所取代.请参阅:https://github.com/iron-meteor/iron-cli (4认同)

Answer 6

Alm*_*ren 11

我认为来自Discover Meteor Book的文件结构非常好并且是一个可靠的开始.

/app: 
 /client
   main.html
   main.js
 /server 
 /public
 /lib
 /collections

Run Code Online (Sandbox Code Playgroud)

/ server目录中的代码仅在服务器上运行.
/ client目录中的代码仅在客户端上运行.
其他所有东西都在客户端和服务器上运行.
/ lib中的文件先于其他任何内容加载.
在其他所有内容之后加载任何main.*文件.
您的静态资产(字体,图像等)位于/ public目录中.

Answer 7

Bog*_*n D 10

创建包

当然,并不是所有东西都适合这种方法,但在大型应用程序中,您将拥有许多可以隔离的功能.任何可分离和可重复使用的东西都适合包,其余的都在通常的目录结构中,如其他答案中所述.即使您不创建包以避免开销,以模块化方式构造代码也是一个好主意(请参阅这些建议)

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

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

这是官方文件

Answer 8

luk*_*her 6

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

Answer 9

Max*_*ges 6

我们有一个大型项目(可能是迄今为止任何人建造的最大的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>

Run Code Online (Sandbox Code Playgroud)

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

       ??? 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开发编辑器.在搜索和组织代码并高效工作时,我们发现它非常有用.

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

如果您认为可以改进此答案,请考虑添加评论. (3认同)

Answer 10

rav*_*ker 5

使用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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，5 月前
查看次数：	47389 次
最近记录：	7 年，12 月前