使用Boilerplate的開發過程JSON

Question

BoilerplateJS提供的集成和最佳實踐給我們留下了深刻印象，但文檔絕對缺乏，特別是對於新的RequireJS用戶。

我們是一個由5人組成的團隊，每個團隊都有不同的技能，BoilerplateJS的吸引力之一就是能夠隔離UI組件。

從樣本腳手架中，我們很清楚我們如何單獨測試每個組件。但是，我們不清楚我們如何能夠在開發過程中做到這一點：

1. 開發A創建組件結構，視圖模型（測試），並把它傳遞給開發人員B
2. 開發人員B的發展和CSS動畫可能爲組件
3. 開發人員A和/或B的成分融入到網站，並進一步集成測試

其餘怎麼可能實現（2）？即允許設計人員和開發人員在獨立的組件上工作 - 建議加載組件的方式是什麼，以便開發/調試/測試？

Answer 1

關於CSS

UI組件具有大致3個部分：結構（HTML），演示文稿（CSS），行爲（JS）。一種常見的處理方式是開發人員將注意力集中在設計人員進行演示的結構和邏輯上。

這是我們如何開發boilerplatejs的示例應用程序。例如，菜單，主題和本地化組件是由開發人員開發的一個簡單的「無序列表」，看起來像下面的完整時間（只需通過Chrome開發人員工具刪除主題CSS鏈接，您將看到相同的內容）：

然後設計了醜陋的UI和創建的主題這一立場，並以專業的方式呈現這些列表（我們開發了儲存在SRC /模塊/ baseModule /主題2個主題）。開發人員當然很難提供難看的東西，但他們需要相信設計師的工作能力。我相信你使用了一個源代碼控制工具，它允許不同的團隊成員在同一個組件上同時工作。

如果你想讓主題成爲一個突出的功能，我建議最小化組件特定的CSS文件。否則，您可能無法創建完全改變組件佈局和外觀的不同主題。沒有組件本地CSS的不利因素是組件並不是真正的獨立包含而沒有「呈現」。我仍然努力正確回答這個問題，任何想法/幫助表示讚賞！看到這個我下面的相關問題：

global CSS theming combination with component specific local stylesheets

反正有幾種方法您可以添加CSS的成分，看看這個問題，當這些不同的方式進行了討論。

Adding external CSS file to a BoilerplateJS project

現在關於嵌入組件...

如果您希望將組件嵌入到其他網頁中，則可以使用樣板的DOMController。例如，假設您需要將'部門（src/modules/sampleModule1/departments）'組件嵌入到其他網站。除了已經存在的UrlController（UrlController響應瀏覽器URL更改）之外，您還必須向模塊（src/modules/sampleModule1/module.js）添加DomController。

//crate a dom controller that searchs within whole document body 
    var domController = new Boiler.DomController($("body")); 
    domController.addRoutes({ 
     //look for elements with id 'department_comp' and embed the department component 
     '#department_comp' : new DepartmentComponent(context), 
    }); 
    domController.start(); 

現在在您的網頁或外部網站上爲DomController放置一個div或section元素以嵌入部門。

<section id="department_comp"></section> 

當然也有兩件事情你需要照顧：

1）你的網頁，需要有boilerplatejs運行它。這意味着你所有的第三方JS庫和主題CSS文件應該靜態添加到網頁中。 （我們正在解決這個問題，v0.2-stable我們期望發佈一個引導程序，可以通過一個腳本聲明來完成所有這些）

2）如果你的組件使用來自不同域的JSON服務，通過JSONp或CORS解決跨域HTTP請求。但是，如果您的REST服務託管在同一個域上，則不必擔心這一點。