使用BoilerplateJS的开发过程

Question

BoilerplateJS提供的集成和最佳实践给我们留下了深刻的印象，但文档显然是缺乏的，特别是对于新的RequireJS用户。

我们是一个由5人组成的团队，每个团队都拥有不同的技能集，而BoilerplateJS最吸引人的地方之一就是隔离UI组件的能力。

从样本脚手架中，我们可以清楚地知道如何分别对每个组件进行单元测试。但是，我们不清楚如何在开发过程中做到这一点：

1. Developer A创建组件结构和视图模型(测试)并将其传递给开发人员B
2. Developer B为组件开发CSS和动画。
3. 开发人员A和/或B将组件集成到网站的其他部分，并进一步测试集成

如何实现(2)？也就是说，允许设计人员和开发人员开发一个独立的组件--如何加载组件，使其能够开发/调试/测试？

Answer 1

关于CSS

UI组件大约有三个部分:结构(HTML)、表示(CSS)、行为(JS)。一种常见的处理方法是开发人员将注意力集中在设计人员处理演示文稿的结构和逻辑上。

这就是我们如何开发boilerplatejs示例应用程序的方法。例如，菜单、主题和本地化组件是由开发人员作为简单的“无序列表”开发的，它们在完成时如下所示(只需通过Chrome Developer工具删除主题css链接，您就会看到相同的内容)：

​

​

然后设计人员使用丑陋的UI创建了一个主题，该主题以专业的方式定位和呈现这些列表(我们开发了存储在src/modules/ these模块/主题中的2个主题)。当然，开发人员很难做出如此丑陋的事情，但是他们需要相信设计师的能力来完成他们的工作。我确信您使用了一个源代码管理工具，它允许不同的团队成员同时处理同一个组件。

如果您希望主题成为一个突出的特性，我建议最小化组件特定的CSS文件。否则，您可能无法创建完全改变组件布局和外观的不同主题。没有组件本地css的缺点是，如果没有“表示”，组件就不是真正的自我包含。我仍然在努力正确地回答这个问题，任何想法/帮助都是值得感激的！以下是我有关这方面的问题：

全局CSS主题与组件特定本地样式表的组合

无论如何，有几种方法您可以添加CSS到您的组件，看看这个问题，这些不同的方式是讨论。

向BoilerplateJS项目添加外部CSS文件

现在关于嵌入组件.

如果您希望将组件嵌入到其他网页中，则可以使用样板的DOMController。例如，假设您需要将“部门(src/ some /sampleModule1/departments)”组件嵌入到其他网站。除了已经存在的DomController (对浏览器URL更改的响应UrlController )之外，还必须向模块(src/UrlController/sampleModule1 1/module.js)添加一个UrlController。

    //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 id="department_comp"></section>

当然，有两件事你需要处理：

1)您的网页需要包含boilerplatejs运行时。这意味着所有第三方JS库和主题CSS文件都应该静态地添加到网页中。(我们正在努力解决这个问题，使用v0.2稳定版本，我们希望发布一个引导程序，它可以用一个脚本声明来完成所有这些工作)

2)如果组件使用来自不同域的JSON服务，则必须使用JSONp或CORS来处理跨域HTTP请求。但是，如果您的REST服务托管在相同的域中，您不必担心这一点。