node-framework
Version:
node-framework
37 lines (29 loc) • 2.52 kB
Markdown
# public
在默认配置下，public目录用以存放静态资源（例如js, css）。这个配置可以在`config/global.js`的`staticDir`中更改。下面将默认使用public作为静态文件资源的目录。
按照web应用的常用开发习惯，一般我们在`public`下再建立一层文件夹并命名为`assets`,再在其中分别建立`css`,`js`,`font`,`img`等文件夹用以分别存储脚本，样式文件，自定义字体和图片等。这种分类方式基于静态资源类型，当然你也可以根据功能来划分，将同一个功能（模块）内使用的脚本和样式文件归类在同一个目录中。
一个典型的静态资源目录结构如下所示：
在默认配置下，public目录中的静态资源并不能直接被外部访问。需要在`config/routes.js`额外添加静态路由规则，如下：
```javascript
// 需要添加静态路由规则，才能访问public目录内的静态资源
'/assets/(.*)': {
// 指定当前请求是否为静态文件请求
type: 'static',
// 如果指定了target，则会用target的作为响应文件的name
target: '/assets/{0}',
// 以下配置参考 https://github.com/visionmedia/send#options
// 是否需要使用etag
etag: true,
// max age
maxAge: 1 * 365 * 24 * 3600 * 1000,
// 类似于.bashrc这类的文件配置访问许可 deny allow ignore
dotfiles: 'deny',
extensions: false,
index: false
}
```
至此，用户可以通过访问例如`/assets/css/common.css`来获取静态资源。因此在模板文件中（通常在`common/header.tpl`或者每个页面模板开头）可以通过添加`<link rel="stylesheet" type="text/css" href="/assets/css/common.css">`来引用样式资源文件。
引用脚本文件的方式略微不同。虽然用于也可以使用上述方式，例如`/assets/js/common.js`访问到脚本文件，但这并不符合现代前端模块管理的思想。因此更常见的方式如下：
1. 在全局引入模块管理（如[RequireJS](http://requirejs.org/)或者[ESL](https://github.com/ecomfe/esl)等），例如`<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.min.js"></script>`
2. 配置baseUrl，例如`<script>require.config({baseUrl: '/assets'});</script>`
3. 在每个页面模板最后引入页面所需的脚本文件，例如`<script>require(['./js/common', './js/config']);</script>`