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

Question

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

但我认为这并不是最好的方式。是否可以仅加载/导入真正需要的方法？ 我的意思是，现在所有方法都是通过导入 methods.js 来加载的。但我想以模块化的方式做到这一点。因此，如果应用程序中使用 .fomNewElement 形式，则将导入 insertArticle 方法，依此类推。不只是加载所有内容...

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

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

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 文件中。希望这是“正确的”...如果这不是很聪明，请给我一些提示。

导入/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 } );
    }
});

以及其他文件:

导入/startup/client/index.js

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

导入/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 Guide 中的“结构”链接。
• index.js 似乎不是放置 Articles 集合的合乎逻辑的位置。我会在 /imports/api/articles/articles.js 为其创建一个文件。请参阅http://guide.meteor.com/structure.html很好地了解了放置元素的位置和原因。
• 此外，为了遵循最佳实践，请为您的文章集合使用默认导出:http://guide.meteor.com/code-style.html#collections

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

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

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

祝你好运:)