导入深度嵌套的Javascript组件的最佳做法

我正在研究Ruby/React项目。我们使用的是反应的组分和CoffeeScript的和最后的JS由链轮组装：导入深度嵌套的Javascript组件的最佳做法

#= require org/components/whatever 

{ Whatever } = Org.Components

这是正常时，没有太多的嵌套，然后你wrtiting是这样的：

#= require org/components/whatever 
#= require org/components/something/else/whatever 

{ Whatever1 } = Org.Components 
{ Whatever2 } = Org.Components.Something.Else

今天我试图找到在哪里使用Org.Components.Image.Upload。但有时它被导入为{ Upload }或作为Image.Upload使用，它不会让事情变得更容易。

现在我想也许不要再比Org.Components更进一步。所以如果你需要Image.Upload - 得到{ Image } = Org.Components，并使用Image.Upload。如果变得太长 - 分配给一个变量。

#= require org/components/image 

{Image} = Org.Components 
Upload = Image.Super.Complex.Upload 

# Or use it like this for explicitness 
render: -> 
    Image.Super.Complex.Upload

这里的最佳做法是什么？我希望代码可被搜索。

来源

2015-11-24 firedev

对象可以帮助减少查找时间，这是什么，似乎你正在做的，但如果它的组织，该_Dependency宣言Pattern_可以非常有用的局部引用方便。 – ZachPerkitny

我通常在使用深度嵌套对象时使用该方法。 – ZachPerkitny

我不认为有最佳做法。但是你当然不应该混合它们，使用* * *解构*或*变量赋值。 – Bergi

如果您处于CommonJS环境（节点）中，并且可能使用模块捆绑器（如Webpack或Browserify），则可以利用直接模块导入。例如：

而不是做这个Org.Components.Image的，你可以这样做：

import Upload from 'org/components/Image/Super/Complex/Upload' 
// or var Image = require('org/components/Image/Super/Complex/Upload');

在原来的策略，你加载整个库（组织），以进一步筛选下来到Upload。

在上面提出的解决方案中，您只加载图像模块，没有其他任何东西。这可能会为您节省大量成本，特别是如果org包含贵公司内部使用的大量组件。

来源

2015-11-24 04:45:14

问题是如果我单独重新使用Image.Upload – firedev

如果我的问题不对，我很抱歉。但是我试图做的一点是总是只提到你在给定的依赖关系中寻找的模块。在你的场景中，我会说最好的做法是始终设置上传组件的整个路径。希望我在这里有所帮助。 –

停止对链轮战斗我已经定义，告诉链轮哪里去寻找子根组件：

# components/branding.coffee 

#= require_tree ./branding 

Org.Components.Branding = {}

所以，现在，如果我需要什么，从品牌的树，我只是做到以下几点：

#= require org/components/branding 

{div} = React.DOM 

{Branding} = Org.Components 

Org.defineComponent "Settings.Branding", 
    render: -> 
    div {}, 
     Branding.Edit.ContactUs {} 
     Branding.Config {}, 
     Branding.Edit

这种方式我不需要担心依赖关系，并发现它工作起来会更愉快。

我建议这种方法有助于重构，因为您无需在任何地方更改多个需求。

Branding.Config是加载和同步设置的数据包装。在上面的示例中，它用于加载Brading.Edit页面的设置。在这里它正在加载“Layouts.Default”的品牌。

我又只需要branding

# apps/src/org/components/layouts/default.coffee 

#= require org/components/branding 

{Branding, TenantStateBar, UnsupportedBrowserBar} = Org.Components 

Org.defineComponent 'Layouts.Default', 
    render: -> 
    div {}, 
     Branding.Config {}, 
     Branding.Style

来源

2015-11-24 12:16:07 firedev

导入深度嵌套的Javascript组件的最佳做法

回答

相关问题