使用BoilerplateJS的开发过程

Question

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

我们是一个由5人组成的团队，每个团队都有不同的技能，BoilerplateJS的一个吸引人的地方是能够隔离UI组件。

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

1. 开发人员A创建组件结构和视图模型（已测试）并将其传递给开发人员B
2. 开发人员B为组件开发CSS和可能的动画
3. 开发人员A和/或B将该组件集成到网站的其余部分并进一步测试集成

如何实现（2）？即允许设计人员和开发人员处理隔离组件 - 加载组件的推荐方法是什么，以便开发/调试/测试？

Answer 1

关于CSS

UI组件大致有3个部分：结构（HTML），演示文稿（CSS），行为（JS）。一种常见的处理方式是开发人员专注于结构和逻辑，设计师在这里进行演示。

这就是我们开发样板应用程序的方法。例如，菜单，主题和本地化组件是由开发人员开发的一个简单的“无序列表”，在完成它时完全如下所示（只需通过Chrome开发者工具删除主题css链接，您将看到相同的内容）：< / p>

然后设计师采用丑陋的UI并创建了一个主题，以专业的方式定位和呈现这些列表（我们开发了2个主题，存储在src / modules / baseModule / theme）。开发人员当然很难提供丑陋的东西，但他们需要相信设计师完成工作的能力。我确信您使用的源代码控制工具允许不同的团队成员甚至同时处理同一个组件。

如果您希望主题成为一个突出的功能，我建议最小化组件特定的CSS文件。否则，您可能无法创建完全更改组件布局和外观的不同主题。没有组件本地css的缺点是组件在没有“表示”的情况下不是真正自包含的。我仍在努力正确回答这个问题，任何想法/帮助表示赞赏！请参阅下面的相关问题：

global CSS theming combination with component specific local stylesheets

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

Adding external CSS file to a BoilerplateJS project

现在关于嵌入组件......

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

    //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();

现在在您的网页或外部网站上放置一个div或section元素，供DomController嵌入部门。

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

当然，您需要注意两件事：

1）您的网页需要具有样板运行时。这意味着应将所有第三方JS库和主题CSS文件静态添加到网页中。 （我们正在解决这个问题，使用v0.2-stable，我们希望发布一个可以通过单个脚本声明完成所有操作的引导程序）

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