javascript - meteor: 导入目录 - 需要的方法的模块化导入

Question

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

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

下面您可以看到我的/imports 文件夹结构和文件的一些内容。结构本身还有什么我可以改进的吗？

此外，如果导入取决于用户 Angular 色，那就太好了。这可能吗？

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() {}
});

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

imports/api/article/index.js

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

imports/api/article/methods.js

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 } );
    }
});

和其他文件:

imports/startup/client/index.js

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

imports/startup/server/index.js

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

imports/api/article/client/index.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/
        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 文件)...

对吧？

Answer 1

几点:

• 您已将所有内容放在 imports/api 下。该目录是为集合、方法、助手、“业务逻辑”和公共(public) API 设计的(例如，如果您公开 REST API，您将从该目录中进行)。将 imports/ui 用于您的模板(包括它们的样式和关联的 .js 文件)。
• 您不需要在导入中区分client 和server 目录。只需从各自的主要入口点(即 client/main.js 和 server/main.js)导入您需要的文件。这一点比我在这里建议的要复杂一些，请参阅下面的 meteor 指南中“结构”的链接。
• index.js 似乎不是放置您的 Articles 集合的合乎逻辑的地方。我会在 /imports/api/articles/articles.js 为它创建一个文件。参见 http://guide.meteor.com/structure.html了解将东西放在哪里以及为什么放东西。
• 此外，为了遵循最佳实践，请为您的文章 集合使用默认导出:http://guide.meteor.com/code-style.html#collections

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

关于您关于仅为某些用户 Angular 色导入位的问题:始终避免使用 import 或其他类型的混淆以确保安全。在 Meteor 上实现安全性的理想方法是假设任何东西都可以在客户端访问(几乎可以访问)并相应地编写服务器端代码。这意味着，如果你有一个管理区域，假设任何人都可以访问它。您可以在服务器 methods 和 publications 中检查 this.userId 并在那里 进行数据库查找以确保用户具有正确的权限。同样，该指南有更多关于此的信息:http://guide.meteor.com/security.html

关于导入/导出的最后一点说明:它们背后的想法不是减少代码大小，而是提供实际使用的图表(并忽略未使用的文件)以使热代码重新加载更快以获得更好的开发体验。它们还可以生成更易于理解的更简洁的应用程序代码，因为您没有可能来自任何地方的随机魔法全局变量，并且有助于将逻辑上不同的代码片段分开。

祝你好运:)