组件化的前端开发流程

Posted on 2012-12-25 13:10 xuld 阅读(2304) 评论(4) 编辑收藏举报

背景

做前端的同学都知道，做的页面多了，东西就会乱，因此我们需要统一一个开发流程。开发流程的好坏，直接影响着页面开发的效率，间接影响游戏的时间。

开发流程的目标

可以快速完成页面。
通过组件化的方式，保证代码重用，避免重复劳动。
保证页面上线后能够高效运行。

开发流程的范畴

文件的存放规范。
代码的组织结构和编码规范。
发布策略。
支持整个流程所必须的开发工具。

每个团队都有自己的开发流程规范。实际上也不存在一个最好的流程规范，只有最适合的。以下介绍一个根据多个团队的开发流程总结归纳得出的一套通用开发流程规范。

文件夹规范

假设项目文件夹为 p/ 。那么这个文件夹内包含：

p/assets/ 存放开发工具
p/dev/ 存放开发状态的项目文件
p/dpl/ 存放项目的公用组件库
p/release/ 存放发布后的项目文件（这里的文件都是已经压缩好的）

p/dev/ 内的结构为：

p/dev/website1/public/ 全站公用的项目（存放全站公用的文件）
p/dev/website1/project1/ 项目1
p/dev/website1/project2/ 项目2
....

其中，每个项目内的结构为：

p/dev/website1/project1/page1.html
p/dev/website1/project1/assets/page1.js
p/dev/website1/project1/assets/page1.css
p/dev/website1/project1/assets/images/
p/dev/website1/project1/include/page1.inc

p/dpl/ 内的结构为：

p/dpl/system/ 系统js模块
p/dpl/controls/ UI 模块
p/dpl/widgets/ 业务组件

其中，每个文件夹内的结构为：

p/dpl/system/category1/component1.html
p/dpl/system/category1/assets/component1.js
p/dpl/system/category1/assets/component1.css
p/dpl/system/category1/assets/images/

p/release/ 内的结构：

根据线上文件规范决定，也可以和 p/dev/ 一样。

组件化开发实现

1. 全站公用的js和css

全站公用的js和css是用工具从 p/dpl/ 里选取一些组件合成的。放在 p/dev/website1/public/assets/common.js (或 .css)

2. 非全站公用的js和css

网页中可以使用下列代码载入一个组件：

using("System.Category1.Component1");
var comp1 = new Component1();

其中，System.Category1.Component1 会被映射到 p/dpl/system/category1/assets/component1.js(或 .css)。

using的作用相当于在页面引了一个 <script> 脚本。页面发布后，using会被替换为对应组件的源码，而不需要动态载入。

3. 异步载入js和css

流程本身不提供异步载入组件的功能，项目中可以使用任何第三方模块加载器实现异步载入。比如：

use(["System.Category1.Component1"], function(Component1){
      var comp1 = new Component1();
});

4. html的复用

在 html 文件中写如下代码即可将对应的 html 片段嵌入页面。

<script>include('../public/include/topbar.inc');</script>

5. 总结

只有 release 里的文件才会最终上线。如果希望使用 dpl 里的组件，只有2种方法：

开发前通过脚本合并，并存放到 dev 中指定目录。（如 project1/assets/common.js）
发布时自动合并到 dev 中。（替换 using）

页面的发布

页面发布主要做这些事情：

内联 include 和 using 等，以减少页面的请求数。
压缩 js 和 css。
重新更改文件位置，适应实际项目需求（比如需要将js和css提取出来，而过滤 html）

xuld

公告