Astros中，引用页面的JS和CSS分别通过以下方式引用：

    <script src="http://127.0.0.1:3101/js/p/home.js"></script>
    
    <link rel="stylesheet" href="http://127.0.0.1:3101/css/p/home.css" />
    
当然，这是Astros默认的路径引用规则，你可以通过Astros的插件机制，自定义各种资源的url路径(引用规则)，[查看细节](#)。



## 引用JS

Astros默认引用页面JS的规则是

    /js/p/name.js

其中`name`对应的是`root/pages`下的页面名称。
> 本文档中，`root`均表示项目根目录。

在书写页面和模块JS时，难免会依赖弹窗、表单验证等通用组件，Astros不必写很多script标签，如你在登录页面中依赖了表单验证和对话组件，如下即可：

    //@require form-validate,dialog
    $(function(){
    
        var dom_form= $('.login-form');
        
        dom_form.form({
            //......
        });
    
    });

通过 `@require` 关键字，就可实现JS组件引用，`JS组件之间的依赖也是如此`，Astros会自动分析并加载依赖项。

##### JS的引用规则如下

JS类型|引用方式|示例
----|----|----
页面|js/**p**/页面名称|js/p/home.js
JS组件|js/**jscom**/组件名称|js/p/dialog.js
web组件|js/**webcom**/组件名称|js/p/footer.js
共用JS|js/js文件名称|js/jquery.js


如果页面（JS组件、WEB组件等）包括二级目录，需要写上路径名称，如登录页面放在二级目录user下，则需要以如下方式引用: js/user/login.js。


这里有在Astros中使用AMD模式的示例，请[点击这里](https://github.com/lemonabc/astros-example/tree/astros-seajs)

除了传统引用方式你也可以通过[astros-cmd-read](https://www.npmjs.com/package/astros-cmd-read)、[astros-cmd-dep](https://www.npmjs.com/package/astros-cmd-dep)、[astros-cmd-define](https://www.npmjs.com/package/astros-cmd-define)组件，使用CMD方式引用组件

## 引用本页面（web模块或js组件）的图片

该功能通过中间件 `astro-resource-refer` 实现

html结构、样式、JS中均有可能引用到图片。

在html结构中，可通过'$res'方法本页面（模块、组件）下的图片资源：

    <img src="$res(avatar.png)" >
    
>是的，它相对引用

**样式中：**

    background:url(avatar.png) no-repeat;
    
**js中：**

    var avatar = $res('avatar.png');
    
### 公共图片
该功能通过中间件 [astro-resource-refer](https://www.npmjs.com/package/astros-resource-refer) 实现

除了页面（模块、组件）自有的图片，还有logo，icon等公共图片，这些都需要存放在 root/asset/img目录下，引用时，`在URL前面加上 ~/即可`。以HTML为例：

    <img src="$res(~/img/avatar.png)" >
    
样式和JS中同理。

以上示例中，引用图片的语法为 $res('资源路径'), 该语法可通过 `astro-resource-refer` 的参数 `jsImgRefer` 来设置。具体设置请[点击查看](https://www.npmjs.com/package/astros-resource-refer)。


模块|资源类型|示例
----|----|----|----
页面|JS| http://cdn/**js**/**p**/login.js
web组件|JS| http://cdn/**js**/**webcom**/header.js
js组件|JS| http://cdn/**js**/**jscom**/dialog.js
共用资源|js| http://cdn/**js**/**jquery**.js
页面|CSS| http://cdn/**css**/**p/login**.css
web组件|CSS| http://cdn/**css**/**webcom**/header.css
js组件|CSS| http://cdn/**css**/**jscom**/dialog.css
页面|img| http://cdn/**img**/**p/banner**.png
web组件|img| http://cdn/**img**/**webcom**/logo.png
js组件|img| http://cdn/**img**/**jscom**/close.png
共用资源|img| http://cdn/**img**/**avatar**.png


共用资源是放在 root/assets/目录下的资源。如静态资源路径和页面、web组件及JS组件的访问路径重复，会导致无法访问到公共资源。因此`root/assets/JS（css、img）`下的目录名称不能和p、webcom、jscom重复。

> JS、CSS以及图片的引用路径（url和资源的对应规则）可通过自定义中间件，替换 [astros-asset-parse](https://www.npmjs.com/package/astros-asset-parse) 来实现

### JS模板

传统方案中，JS渲染HTML，是通过字符串拼接的形式，JS和HTML代码混合在一起，维护起来很不方便。Astros的中间件 [astros-js-tpl](https://www.npmjs.com/package/astros-js-tpl)，提供了另一种解决方案。可以用在JS中直接引用HTML文件，方便维护和开发。

`astros-js-tpl`会把依赖的JS组件的HTML合并到文件最前面。

**note:**

示例中，`$tpl`是全局方法，用于设置和返回模板，以下是一个简单的实现，使用该功能需要你调用组件前实现这个方法。

#### 配置

```
{
    name:'astros-js-tpl',
    config:{
        tpl: "$tpl('{name}','{content}')",
        define:['(function(win) {',
            'var _tpl = {};',
            'window.$tpl = function(key, ctx) {',
                'if (ctx) {',
                    '_tpl[key] = ctx;',
                    'return;',
                '}',
                'return _tpl[key];',
            '}',
        '}(window));',
        ].join('\n')
    }
}
```

参数|说明
----|----
tpl|  生成的JS模板的格式，{name}是模板路径，{content}是HTML内容
define| 模板设置方法的实现


**以弹窗组件dialog为例**

HTML路径：root/assets/jslib/dialog/dialog.html

```
<div class="dia-title">{{title}}</div>
```

> 此路径对应的 {name} = dialog/dialog

**引用方式**

在页面中通过$tpl直接引用

```
console.log($tpl('dialog/dialog'));
//output
//<div class="dia-title">{{title}}</div>
```

页面最终生成的JS顶部内容如下：


```
(function(win) {
    var _tpl = {};
    window.$tpl = function(key, ctx) {
        if (ctx) {
            _tpl[key] = ctx;
            return;
        }
        return _tpl[key];
    }
}(window));
$tpl('dialog/dialog', '<div class=\"dia-title\">{{title}}</div>');
```


**示例2**

HTML路径：root/assets/jslib/tp/tips.html

> {name} = tp/tips

引用方式

```
console.log($tpl('tp/tips'));
```

**示例2**

HTML路径：root/assets/jslib/tp/toast.html

> {name} = tp/toast

引用方式

```
console.log($tpl('tp/toast'))
```

<!-- todo 自动返回标签和自动合并 -->