Javascript meteor:导入目录-模块化导入所需的方法

我正在将我的meteor应用程序迁移到meteor 1.3的导入功能

但我认为这并不是最好的方式。难道不能加载/导入真正需要的方法吗？ 我的意思是，现在所有的方法都是通过导入methods.js来加载的。但我想以模块化的方式来做。因此，如果应用程序中使用了表单

.fomNewElement

，则将导入方法

插入项目

，依此类推。不仅仅是加载所有内容

下面您可以看到我的

/imports

文件夹结构和文件的一些内容。结构本身还有什么我可以改进的吗

如果导入依赖于用户角色，那也太好了。这可能吗

导入/api/article/client/article.js

import { Articles } from '../';
import { insertArticle, updateArticle } from '../methods.js';

Template.Articles.helpers({
    // some helpers
});
Template.Artilces.onCreated(function() {
    // some code
});
Template.Artilces.onRendered(function() {
    // some code
});
Template.Articles.events({
    'submit .formNewElement': function(event) {
        event.preventDefault();

        var title = event.target.title.value.trim();
        insertArticle.call({ 
            title: title
        });
    },
    'click .anything': function() {}
});

export const Articles = new Mongo.Collection('articles');

import { Articles } from './';

export const insertArticle = new ValidatedMethod({
        name: 'article.insert',
        validate: new SimpleSchema({
            title: { type: String }
    }).validator(),
    run( document ) {
        Articles.insert( document );
    }
});

export const updateArticle = new ValidatedMethod({
        name: 'article.update',
        validate: new SimpleSchema({
            _id:                { type: String },
            'update.title':     { type: String }
    }).validator(),
    run( { _id, update } ) {
        Articles.update( _id, { $set: update } );
    }
});

import '../../api/redactor-article/client';

import '../../api/redactor-article/server/publications.js';
import '../../api/redactor-article/methods.js';

import './article.html';
import './article.sass';
import './article.js';

如您所见，我将所有helpers、events和onCreated/onRendered代码都放入该js文件中。希望这是“正确的”。。。如果这不是很聪明，请给我一些提示

导入/api/article/index.js

import { Articles } from '../';
import { insertArticle, updateArticle } from '../methods.js';

Template.Articles.helpers({
    // some helpers
});
Template.Artilces.onCreated(function() {
    // some code
});
Template.Artilces.onRendered(function() {
    // some code
});
Template.Articles.events({
    'submit .formNewElement': function(event) {
        event.preventDefault();

        var title = event.target.title.value.trim();
        insertArticle.call({ 
            title: title
        });
    },
    'click .anything': function() {}
});

export const Articles = new Mongo.Collection('articles');

import { Articles } from './';

export const insertArticle = new ValidatedMethod({
        name: 'article.insert',
        validate: new SimpleSchema({
            title: { type: String }
    }).validator(),
    run( document ) {
        Articles.insert( document );
    }
});

export const updateArticle = new ValidatedMethod({
        name: 'article.update',
        validate: new SimpleSchema({
            _id:                { type: String },
            'update.title':     { type: String }
    }).validator(),
    run( { _id, update } ) {
        Articles.update( _id, { $set: update } );
    }
});

import '../../api/redactor-article/client';

import '../../api/redactor-article/server/publications.js';
import '../../api/redactor-article/methods.js';

import './article.html';
import './article.sass';
import './article.js';

导入/api/article/methods.js

import { Articles } from '../';
import { insertArticle, updateArticle } from '../methods.js';

Template.Articles.helpers({
    // some helpers
});
Template.Artilces.onCreated(function() {
    // some code
});
Template.Artilces.onRendered(function() {
    // some code
});
Template.Articles.events({
    'submit .formNewElement': function(event) {
        event.preventDefault();

        var title = event.target.title.value.trim();
        insertArticle.call({ 
            title: title
        });
    },
    'click .anything': function() {}
});

export const Articles = new Mongo.Collection('articles');

import { Articles } from './';

export const insertArticle = new ValidatedMethod({
        name: 'article.insert',
        validate: new SimpleSchema({
            title: { type: String }
    }).validator(),
    run( document ) {
        Articles.insert( document );
    }
});

export const updateArticle = new ValidatedMethod({
        name: 'article.update',
        validate: new SimpleSchema({
            _id:                { type: String },
            'update.title':     { type: String }
    }).validator(),
    run( { _id, update } ) {
        Articles.update( _id, { $set: update } );
    }
});

import '../../api/redactor-article/client';

import '../../api/redactor-article/server/publications.js';
import '../../api/redactor-article/methods.js';

import './article.html';
import './article.sass';
import './article.js';

以及其他文件：

导入/startup/client/index.js

import { Articles } from '../';
import { insertArticle, updateArticle } from '../methods.js';

Template.Articles.helpers({
    // some helpers
});
Template.Artilces.onCreated(function() {
    // some code
});
Template.Artilces.onRendered(function() {
    // some code
});
Template.Articles.events({
    'submit .formNewElement': function(event) {
        event.preventDefault();

        var title = event.target.title.value.trim();
        insertArticle.call({ 
            title: title
        });
    },
    'click .anything': function() {}
});

export const Articles = new Mongo.Collection('articles');

import { Articles } from './';

export const insertArticle = new ValidatedMethod({
        name: 'article.insert',
        validate: new SimpleSchema({
            title: { type: String }
    }).validator(),
    run( document ) {
        Articles.insert( document );
    }
});

export const updateArticle = new ValidatedMethod({
        name: 'article.update',
        validate: new SimpleSchema({
            _id:                { type: String },
            'update.title':     { type: String }
    }).validator(),
    run( { _id, update } ) {
        Articles.update( _id, { $set: update } );
    }
});

import '../../api/redactor-article/client';

import '../../api/redactor-article/server/publications.js';
import '../../api/redactor-article/methods.js';

import './article.html';
import './article.sass';
import './article.js';

导入/startup/server/index.js

import { Articles } from '../';
import { insertArticle, updateArticle } from '../methods.js';

Template.Articles.helpers({
    // some helpers
});
Template.Artilces.onCreated(function() {
    // some code
});
Template.Artilces.onRendered(function() {
    // some code
});
Template.Articles.events({
    'submit .formNewElement': function(event) {
        event.preventDefault();

        var title = event.target.title.value.trim();
        insertArticle.call({ 
            title: title
        });
    },
    'click .anything': function() {}
});

export const Articles = new Mongo.Collection('articles');

import { Articles } from './';

export const insertArticle = new ValidatedMethod({
        name: 'article.insert',
        validate: new SimpleSchema({
            title: { type: String }
    }).validator(),
    run( document ) {
        Articles.insert( document );
    }
});

export const updateArticle = new ValidatedMethod({
        name: 'article.update',
        validate: new SimpleSchema({
            _id:                { type: String },
            'update.title':     { type: String }
    }).validator(),
    run( { _id, update } ) {
        Articles.update( _id, { $set: update } );
    }
});

import '../../api/redactor-article/client';

import '../../api/redactor-article/server/publications.js';
import '../../api/redactor-article/methods.js';

import './article.html';
import './article.sass';
import './article.js';

导入/api/article/client/index.js

import { Articles } from '../';
import { insertArticle, updateArticle } from '../methods.js';

Template.Articles.helpers({
    // some helpers
});
Template.Artilces.onCreated(function() {
    // some code
});
Template.Artilces.onRendered(function() {
    // some code
});
Template.Articles.events({
    'submit .formNewElement': function(event) {
        event.preventDefault();

        var title = event.target.title.value.trim();
        insertArticle.call({ 
            title: title
        });
    },
    'click .anything': function() {}
});

export const Articles = new Mongo.Collection('articles');

import { Articles } from './';

export const insertArticle = new ValidatedMethod({
        name: 'article.insert',
        validate: new SimpleSchema({
            title: { type: String }
    }).validator(),
    run( document ) {
        Articles.insert( document );
    }
});

export const updateArticle = new ValidatedMethod({
        name: 'article.update',
        validate: new SimpleSchema({
            _id:                { type: String },
            'update.title':     { type: String }
    }).validator(),
    run( { _id, update } ) {
        Articles.update( _id, { $set: update } );
    }
});

import '../../api/redactor-article/client';

import '../../api/redactor-article/server/publications.js';
import '../../api/redactor-article/methods.js';

import './article.html';
import './article.sass';
import './article.js';

文件结构

/imports
    /api
        /article
            /client
                article.html
                article.js
                article.sass
                index.js
            /server
                publications.js
        index.js
        methods.js

---

更新

/imports
    /api
        /article
            /client
                article.html
                article.js
                article.sass
                index.js
            /server
                publications.js
        index.js
        methods.js

也许这样构造导入模块会更好：

imports/
    api/
        articles/
            publication.js
            methods.js
            collection.js
    ui/
        articles/
            article.html
            article.css
            article.js     // contains helpers, events and onCreated/onRendered

然后我必须导入

startup/client

（>此模块的所有ui文件和所有api文件）和

startup/server

（>仅导入所有api文件）中的文件

对吗？

有几点：

• 您已将所有内容置于

  imports/api

  下。该目录是为集合、方法、帮助程序、“业务逻辑”和公共API而设计的（例如，如果您公开了REST API，您将在该目录中进行）。对模板（包括其样式和相关的

  .js

  文件）使用

  imports/ui

• 您不需要区分导入中的

  客户端

  和

  服务器

  目录。只需从相应的主入口点导入所需的文件（即

  client/main.js

  和

  server/main.js

  ）。这一点比我在这里建议的要复杂一些，请参阅下面流星指南中“结构”的链接

• index.js

  似乎不是放置

  文章集的合乎逻辑的地方。我会在
  /imports/api/articles/articles.js
  为它创建一个文件。请参阅，以获得有关放置位置和原因的良好概述

• 此外，为了实现以下最佳实践，请为您的

  文章

  收藏使用默认导出：

要回答您关于导出了多少文件（即哪些函数）的问题，对于加载的所有内容，您无能为力。bundler无论如何都需要读取整个JS文件（假设您导出了一个对象，然后在同一个文件中进一步修改了它——这不是最佳实践，但可能是）。如果您没有使用函数，请务必不要导入它！如果方法变得不可管理，您总是可以将它们拆分为单独的文件

关于仅为某些用户角色导入位的问题：始终避免使用

import

s或其他类型的模糊处理以确保安全。在Meteor上实现安全性的理想方法是假设任何东西都可以在客户机上访问（几乎可以），并相应地编写服务器端代码。这意味着，如果你有一个管理区域，假设任何人都可以访问它。您可以在服务器

方法

和

出版物

中检查

this.userId

并在那里进行数据库查找，以确保用户具有正确的权限。此外，本指南还提供了有关这方面的更多信息：

关于导入/导出的最后一点注意事项：它们背后的思想不是减少代码大小，而是提供实际使用的内容（并省略不使用的文件）的图表，以加快热代码的重新加载，从而获得更好的开发体验。它们还可以使应用程序代码更清晰、更容易理解，因为您没有可能来自任何地方的随机魔法球，并且有助于将逻辑上不同的代码片段分开

---

祝你好运：）

谢谢。对你的答案有几个问题：1。我想我不明白

api

和

ui

文件夹之间的区别。如果我将助手放在

api

中，将模板放在

ui

中，那么编码就比较困难，因为它们属于一个整体，但存储在两个位置。。。？？你说“关联的.js文件”进入

ui

。。2. '使用默认导出“->我不是在“imports/api/article/index.js”中这样做的吗？我将

api/

文件夹划分为客户机/服务器，正如这里所描述的那样：这可能“更难”，但它可以简化在技术发生变化时交换应用程序位的过程。这个想法是，虽然您现在可能正在使用Blaze作为模板，但稍后可能会切换到React或Angular。同样，您可能会决定从MongoDB切换到另一个数据库堆栈。数据应该独立于视图，并且每个数据都应该是可独立测试的。关于你的第二条评论：在一天结束时，你可以随意分割文件夹。为了您自己的利益，我建议将UI代码放在API目录中是没有意义的。出于同样的原因，不建议采用Meteor 1.3结构的

/client

/server

/both

并将其转储到

/imports/api

目录中。如果有的话，把它放在

/imports/client

/imports/server

等中，但是有很好的理由不这样做，正如我在我的回答中链接到的Meteor指南部分所述