3.2 atm与后台语言协同工作方案 -- 调试模式

json文件

// ~/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_e5b6e95.css",
        "/user/account/1.0.0/account_2e2d290.css",
        "/user/account/1.0.0/exports/help_5751a04.css"
      ],
      "loader": "",
      "js": [],
      "onlyCss": true
    },
    "user/account:1.0.0/login": {
      "css": [
        "/core/reset/1.0.0/reset_e5b6e95.css",
        "/user/account/1.0.0/account_2e2d290.css",
        "/user/account/1.0.0/css/login_9fa75f4.css"
      ],
      "loader": "/lib/loader/1.0.0/loader_aa23401.js",
      "js": [
        "/user/account/1.0.0/account_8c2acc1.js",
        "/user/account/1.0.0/exports/login_1074d04.js"
      ],
      "onlyCss": false,
      "map": "atmjs.setMap({\"_alias\":{},\"alias\":{\"user/account:1.0.0/other/ajax\":\"/user/account/1.0.0/other/ajax_49ac7f5.js\"},\"pkg\":{},\"cssDeps\":{}});"
    },
    "user/account:1.0.0/reg": {
      "css": [
        "/core/reset/1.0.0/reset_e5b6e95.css",
        "/user/account/1.0.0/account_2e2d290.css",
        "/user/account/1.0.0/css/reg_a005dbe.css"
      ],
      "loader": "/lib/loader/1.0.0/loader_aa23401.js",
      "js": [
        "/user/account/1.0.0/account_8c2acc1.js",
        "/user/account/1.0.0/exports/reg_0d22604.js"
      ],
      "onlyCss": false
    }
  }
}

1.当登陆页上线之后，我想利用线上的页面(假设访问地址为：http://url/login.html)调用本地的js/css资源去调试，如何实现

json文件中的settings字段中的debugParam的值为debugId，因此，我们可以通过访问 

http://url/login.html?debugId 或

http://url/login.html?debugId=true

去调用127.0.0.1的资源，因为线上程序无法获取到本地的地图文件，因此这里比较纠结，最终的解决方案是这样的：

本地的node环境提供了一个调用js和一个css的接口，相应的资源会合并到一个文件里面

 

因此，如果是调试模式

css应该是这样的，而不用去考虑deps.css的内容

<link rel="stylesheet" type="text/css" href="http://127.0.0.1:1234/debug?id=user/account:1.0.0/login&type=css&domain=http://127.0.0.1:1234/dev&timestamp=1437033687" />

 

同样的,js最终应该是

<script type="text/javascript" id="atmjsnode" data-base="http://127.0.0.1:1234/dev" src="http://127.0.0.1:1234/debug?id=user/account:1.0.0/login&type=js&timestamp=1437033687"></script>
<script type="text/javascript">atmjs.use('user/account:1.0.0/login')</script>

 

参数中的id为入口文件id，时间戳是为了防止缓存，type表示文件是js还是css类型

 

2.现在调试模式全部调用的是127.0.0.1上的资源，那么问题来了，如果去调试一个移动站点,用手机肯定是调试不了调试模式

因此我们要想法把127.0.0.1去替换成一个手机可以访问的ip，比如 192.168.1.100

因此，我们用

http://url/login.html?debugId=192.168.1.100

去调试

然后对应的css和js调用，要变成下面这样子

<link rel="stylesheet" type="text/css" href="http://192.168.1.100:1234/debug?id=user/account:1.0.0/login&type=css&domain=http://192.168.1.100:1234/dev&timestamp=1437034561" />


<script type="text/javascript" id="atmjsnode" data-base="http://192.168.1.100:1234/dev" src="http://192.168.1.100:1234/debug?id=user/account:1.0.0/login&type=js&timestamp=1437034561"></script>
<script type="text/javascript">atmjs.use('user/account:1.0.0/login')</script>

　　

因此参数中的 domain和script标签中的data-base的值的值是这样得来的

$port = 1234;   //settings.port
$debugId = 'debugId';　　//settings.debugParam
$debugId = $_REQUEST[$debugId];
if($debugId=='true' || empty($debugId)){
    $debugId = $this->debugId = '127.0.0.1';
}else{
    $debugId = $this->debugId = $debugId;
}
$domain = 'http://'.$debugId.':'.$port.'/dev';

src和href的调试地址前缀是这样得来的

$port = 1234;   //settings.port
$debugId = $_REQUEST['debugId'];
if($debugId=='true' || empty($debugId)){
    $debugId = $this->debugId = '127.0.0.1';
}else{
    $debugId = $this->debugId = $debugId;
}
$prefix = 'http://'.$debugId.':'.$port.'/debug';

同样的，如果入口文件是css文件，SCRIPT标签不能输出