導入深度嵌套的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組件的最佳做法

回答

相關問題