Astros在设计之初，就考虑到了模块化。 模块化的好处自不必说，传统的开发方案，往通过反复拷贝html结构，每个页面反复依赖的css和js，需要手动维护结构和js、css的对应关系。而在 Astros 中，这些变的很简单。 Astros中，模块放在 `root/compnents` 目录（支持多级目录哦），模块资源名称必须和模块名称相同。如： root[dir] components[dir] header-menu[dir] header-menu.html [必选] header-menu.less [可选] header-menu.js [可选] img[dir][可选，模块自身的图片资源部] logo.png 在模块和页面中，可通过``引用模块（模块之间也可以相互引用）。 ## 定义模块 模块的资源包括结构、样式、js脚本及图片。以顶部菜单模块`header-menu`为例： root[dir] components[dir] header-menu[dir] header-menu.html [必选] header-menu.less [可选] header-menu.js [可选] img[dir][可选] logo.png root/components/header-menu/header-menu.html：

root/components/header-menu/header-menu.less： .header{ h1{ a{ background:url(logo.png) no-repeat; // 发布后自动替换为 background:url(/img/wc/header-menu/logo.png) no-repeat; } } } root/components/header-menu/header-menu.js： ``` $(function(){ var URL_LOGO= $res('logo.png'); // 发布后自动替换为 URL_LOGO = '/img/wc/header-menu/logo.png'; $('.header').delegate('li', 'click', function(){ .... }); }); ``` ## 引用模块 ### 模块之间的引用 Astros支持模块之间的相互引用，基于此可以实现模块的高粒度抽象，使模块之间充分解耦。以通用页面模板`layout/normal`为例： ``` root[dir] components[dir] layout[dir] normal[dir] normal.html [必选] normal.less [可选] normal.js [可选] .. ``` root/components/layout/normal.html： ``` {{title}}-Astros
``` `layout/normal`模块中引用了`header-menu`和`footer`模块，中间使用`point`标签定义了插入点`content`，是该模板可自定义的部分，在使用模板时，可同通过`def`设置插入点的内容。如： root/tpls/home.html： hello home 通过定义通用页面模块，完成一个页面就是这么简单。例中只定义了一个插入点，如果有多个插入点，在对应的位置定义多个名称不同的`point`标签即可。 > 如果页面中只有一个插入点，是可以省略`def`标签的，本例中，`home.html`这样写也是可以的： hello home `home.html`解析后最终内容如下： 标题-Astros

hello home