先以登陆页来分析
// ~/blog/user/account/1.0.0 文件夹产出的地图文件， 1.0.0/exports下的入口文件的依赖都生成到了maps里面
{
"settings": {
"port": 1234,
"debugParam": "debugId",
"domain": "http://cn-style.gcimg.net/static"
},
"maps": {
"user/account:1.0.0/help.css": {
"css": [
"/core/reset/1.0.0/reset.css",
"/user/account/1.0.0/account.css",
"/user/account/1.0.0/exports/help.css"
],
"loader": "",
"js": [],
"onlyCss": true
},
"user/account:1.0.0/login": {
"css": [
"/core/reset/1.0.0/reset.css",
"/user/account/1.0.0/account.css",
"/user/account/1.0.0/css/login.css"
],
"loader": "/lib/loader/1.0.0/loader.js",
"js": [
"/user/account/1.0.0/account.js",
"/user/account/1.0.0/exports/login.js"
],
"onlyCss": false,
"map": "atmjs.setMap({\"_alias\":{},\"alias\":{\"user/account:1.0.0/other/ajax\":\"/user/account/1.0.0/other/ajax.js\"},\"pkg\":{},\"cssDeps\":{}});"
},
"user/account:1.0.0/reg": {
"css": [
"/core/reset/1.0.0/reset.css",
"/user/account/1.0.0/account.css",
"/user/account/1.0.0/css/reg.css"
],
"loader": "/lib/loader/1.0.0/loader.js",
"js": [
"/user/account/1.0.0/account.js",
"/user/account/1.0.0/exports/reg.js"
],
"onlyCss": false
}
}
}
登陆页入口脚本id：user/account:1.0.0/login
那么登陆页的依赖信息就要从maps[‘user/account:1.0.0/login‘]去获取,暂且用deps表示
1. deps.css字段
表示的是登陆页需要的全部的css文件，每个css文件的实际访问地址为 settings字段里面的domain连接上数组里面的每个css的uri
<link type="text/css" rel="stylesheet" href="http://cn-style.gcimg.net/static/core/reset/1.0.0/reset.css" /> <link type="text/css" rel="stylesheet" href="http://cn-style.gcimg.net/static/user/account/1.0.0/account.css" /> <link type="text/css" rel="stylesheet" href="http://cn-style.gcimg.net/static/user/account/1.0.0/css/login.css" />
2. deps.loader字段
因为atm只支持模块化开发，因此需要先加载模块解析器文件,deps.loader字段存放的就是模块解析器文件的uri
因此在加载其他模块化js脚本之前应最先加载改脚步,地址规则同样是 settings字段里面的domain连接上模块解析器的uri
<script id="atmjsnode" data-base="http://cn-style.gcimg.net/static" type="text/javascript" src="http://cn-style.gcimg.net/static/lib/loader/1.0.0/loader.js"></script>
注意上面的id是固定值，data-base的值要替换成settings里面的domain字段的值
3. deps.map字段
因为牵扯到异步的id与路径的一些映射等，所以需要该字段，不过后台语言对该字段的处理比较简单，直接用一个script标签包起来放到 模块解析器脚本后面即可
<script type="text/javascript">atmjs.setMap({"_alias":{},"alias":{"user/account:1.0.0/other/ajax":"/user/account/1.0.0/other/ajax.js"},"pkg":{},"cssDeps":{}});</script>
4. deps.js字段
登陆页需要的除模块解析器之外的所有js文件,每个js文件的实际访问呢地址为settings字段里面的domain连接上数组里面的每个js的uri
<script type="text/javascript" src="http://cn-style.gcimg.net/static/user/account/1.0.0/account.js"></script> <script type="text/javascript" src="http://cn-style.gcimg.net/static/user/account/1.0.0/exports/login.js"></script>
5. deps.onlyCss
像上面json文件里面的 user/account:1.0.0/help.css (一个简单的帮助页面)，只需要一个css，不需要js，所以用css文件作为了入口文件
也就是说，如果入口文件是css文件，则该字段的值为true
如果入口文件是js文件，则该字段为false
如果该字段值为true，则上面的deps.loader,deps.map,deps.js都不能输出。
6.如果入口文件为js,需要在最后渲染入口文件的调用，如果入口文件为css文件（即 deps.onlyCss为true）则不需要输出下面这段代码
<script type="text/javascript">atmjs.use(‘user/account:1.0.0/login‘)</script>
综上：最终的产出代码为：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆页</title>
<link type="text/css" rel="stylesheet" href="http://cn-style.gcimg.net/static/core/reset/1.0.0/reset.css" />
<link type="text/css" rel="stylesheet" href="http://cn-style.gcimg.net/static/user/account/1.0.0/account.css" />
<link type="text/css" rel="stylesheet" href="http://cn-style.gcimg.net/static/user/account/1.0.0/css/login.css" />
</head>
<body>
<!--登陆页相关html代码-->
<script id="atmjsnode" data-base="http://cn-style.gcimg.net/static" type="text/javascript" src="http://cn-style.gcimg.net/static/lib/loader/1.0.0/loader.js"></script>
<script type="text/javascript">atmjs.setMap({"_alias":{},"alias":{"user/account:1.0.0/other/ajax":"/user/account/1.0.0/other/ajax.js"},"pkg":{},"cssDeps":{}});</script>
<script type="text/javascript" src="http://cn-style.gcimg.net/static/user/account/1.0.0/account.js"></script>
<script type="text/javascript" src="http://cn-style.gcimg.net/static/user/account/1.0.0/exports/login.js"></script>
<script type="text/javascript">atmjs.use(‘user/account:1.0.0/login‘)</script>
</body>
</html>