[meteor] HTML 템플릿 파일이 많은 대형 Meteor 앱을 구성하는 모범 사례는 무엇입니까? [닫은]

모든 예제 (리더 보드, 워드 플레이 등)에는 하나의 단일 HTML 템플릿 파일이 있습니다. 모범 사례로 사용할 수있는 다양한 HTML 템플릿 파일이 포함 된 대형 오픈 소스 Meteor 프로젝트가 있습니까? 큰 앱에 필요한 모든 것을 하나의 템플릿 파일에 넣는 것은 실용적이지 않습니다.



답변

모두 함께 뭉치세요! 문서에서 :

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


답변

비공식 유성 FAQ에서와 같이 큰 앱을 구성하는 방법을 거의 설명한다고 생각합니다.

파일을 어디에 두어야합니까?

유성의 예제 앱은 매우 간단하며 많은 통찰력을 제공하지 않습니다. 가장 좋은 방법에 대한 나의 현재 생각은 다음과 같습니다. (제안이나 개선 사항은 매우 환영합니다!)

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)

더 큰 응용 프로그램의 경우 개별 기능을 동일한 패턴을 사용하여 구성되는 하위 디렉토리로 나눌 수 있습니다. 여기서 아이디어는 결국 기능 모듈이 별도의 스마트 패키지로 분리되어 이상적으로 공유 될 수 있다는 것입니다.

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

자세한 내용 : 비공식 유성 FAQ


답변

나는 yagooar에 동의하지만 대신 :

client / application.js

사용하다:

client / main.js

main. * 파일이 마지막으로로드됩니다. 이렇게하면로드 순서 문제가 없는지 확인할 수 있습니다. 자세한 내용은 Meteor 설명서 ( http://docs.meteor.com/#structuringyourapp )를 참조하십시오.


답변

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

기능별로 정리할 수도 있습니다

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

좀 더 구체적인 모범 사례 구조와 명명 규칙이 나오기를 바랍니다.


답변

이 주제에 대해 인터넷 검색을하는 모든 사람에게 :

em새로운 유성 앱을 장비 할 때 (EventedMind에 의해, 철 라우터 뒤에있는 사람) 명령 줄 도구는 매우 유용합니다. 멋진 파일 / 폴더 구조를 만듭니다. 이미 앱에서 작업하고 재구성하려는 경우 새 프로젝트를 설정 em하면 영감을 얻을 수 있습니다.

참조 : https://github.com/EventedMind/em

그리고 여기 : https : //.com/questions/17509551/what-is-the-best-way-to-organize-templates-in-meteor-js


답변

Discover Meteor Book의 파일 구조가 정말 좋고 시작이 튼튼하다고 생각합니다.

/app:
 /client
   main.html
   main.js
 /server
 /public
 /lib
 /collections
  • / server 디렉토리의 코드는 서버에서만 실행됩니다.
  • / client 디렉토리의 코드는 클라이언트에서만 실행됩니다.
  • 다른 모든 것은 클라이언트와 서버 모두에서 실행됩니다.
  • / lib의 파일은 다른 것보다 먼저로드됩니다.
  • main. * 파일은 다른 모든 것 후에로드됩니다.
  • 정적 자산 (글꼴, 이미지 등)은 / public 디렉토리에 있습니다.

답변

패키지 만들기

물론 모든 것이이 접근 방식에 맞지는 않지만 큰 앱에서는 격리 할 수있는 많은 기능이 있습니다. 분리 가능하고 재사용 가능한 것은 패키지에 적합하며 나머지는 다른 답변에서 언급했듯이 일반적인 디렉토리 구조로 진행됩니다. 오버 헤드를 피하기 위해 패키지를 만들지 않더라도 모듈 방식으로 코드를 구성하는 것이 좋습니다 ( 이러한 제안 참조 ).

Meteor를 사용하면 파일로드 방법 (로드 순서, 위치 : 클라이언트 / 서버 / 둘 다) 및 패키지 내보내기 내용을 세부적으로 제어 할 수 있습니다.

특히 관련 파일간에 논리를 공유하는 쉬운 방법이 매우 편리합니다. 예를 들어, util 기능을 만들고 다른 파일에서 사용하고 싶다고 가정 해보십시오. 당신은 그것을 “글로벌”(을 제외하고 var) 만들면 패키지의 네임 스페이스로 Meteor를 감쌀 것이므로 글로벌 네임 스페이스를 오염시키지 않을 것입니다

공식 문서는 다음과 같습니다.