3

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

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

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

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

如何实现（2）？即允许设计人员和开发人员在一个隔离的组件上工作——推荐的加载组件的方法是什么，以便它可以开发/调试/测试？

4

1 回答 1

1

关于 CSS

一个 UI 组件大致有 3 个部分：结构 (HTML)、表示 (CSS)、行为 (JS)。一种常见的处理方式是开发人员专注于设计人员处理演示的结构和逻辑。

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

在此处输入图像描述

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

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

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

无论如何，您可以通过多种方式将 CSS 添加到组件中，看看这个问题，其中讨论了这些不同的方式。

将外部 CSS 文件添加到 BoilerplateJS 项目

现在关于嵌入组件...

如果您希望将组件嵌入到其他网页中，您可以使用样板的 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();

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

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

当然，有两点需要注意：

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

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

于 2012-09-21T03:37:48.013 回答