3.3 atm与后台语言协同工作方案 php类及使用示例

<?php
class atmjs{
    private $path = '/path/to/maps/remote';　　　　//这里必须修改
    private $id = '';
    private $scripts = '';

    private $debugId = '';
    private $status = false;
    private $domain = '';
    private $isDebug = false;
    private $port = 1234;
    private $debugPath = '';
    private $settings = '';

    public function import($id){
        $this->id = $id;
        if (preg_match ('/^([^:]+):([\d]+\.[\d]+\.[\d]+)/', $id, $m)) {
            $route =  $m[1].'/'.$m[2];
        } else {
            return;
        }
        $filePath = $this->path.'/'.$route.'.json';
        $datas = @file_get_contents($filePath);
        if(!$datas){
            return;
        }
        $datas = json_decode($datas, true);

        if( !isset($datas['settings']) || !isset($datas) || !isset($datas['maps']) || !isset($datas['maps'][$id]) ){
            return;
        }

        $this->settings = $datas['settings'];
        $this->json = $datas['maps'][$id];

        // 获取domain
        $this->setDomain();

        $this->status = true;

    }
    
    private function setDomain(){
        $settings = $this->settings;
        $param = $settings['debugParam'];
        $debugId = $_REQUEST[$param];

        // 如果URL或post参数里面有debugParam则为调试模式
        if(isset($debugId)){
            $this->isDebug = true;

            // 如果调试参数值为true,则用127.0.0.1进行调试
            // 如果不是,则认为参数值即为指定的调试地址
            if($debugId=='true' || empty($debugId)){
                $debugId = $this->debugId = '127.0.0.1';
            }else{
                $debugId = $this->debugId = $debugId;
            }
            $port = $this->port = $settings['port'];
            $domain = 'http://'.$debugId.':'.$port.'/dev';
            $this->debugPath = 'http://'.$debugId.':'.$port.'/debug';
        }else{
            $domain = $settings['domain'];
        }
        $this->domain = $domain;
    }

    public function loadJs(){
        // 如果入口文件是css类型,则onlyCss字段值为true
        if($this->json['onlyCss']){
            return;
        }
        // 如果有错误 则输出空字符串
        if(!$this->status){
            return;
        }

        // 如果是调试模式
        if($this->isDebug){
            $debugSrc = $this->debugPath.'?id='.$this->id.'&type=js&timestamp='.time();
            echo implode("\n", array(
                '<script type="text/javascript" id="atmjsnode" data-base="'.$this->domain.'" src="'.$debugSrc.'"></script>',
                $this->getUseTag()
            ));
        }else{
            echo implode('', array(
                $this->getLoaderTag(),
                $this->getMapTag(),
                $this->getJsTags(),
                $this->getUseTag()
            ));
        }
    }

    private function getUseTag(){
        if(!empty($this->scripts)){
            $scripts = ' ,'.$this->scripts;
        }else{
            $scripts = '';
        }
        $codes = 'atmjs.use(\''.$this->id.'\''.$scripts.')';
        return '<script type="text/javascript">'.$codes.'</script>';
    }

    private function getLoaderTag(){
        $json = $this->json;
        $uri = $json['loader'];
        if(!empty($uri)){
            $url = $this->domain.$uri;
            return '<script id="atmjsnode" data-base="'.$this->domain.'" type="text/javascript" src="'.$url.'"></script>';
        }else{
            return '';
        }
    }

    private function getMapTag(){
        $json = $this->json;
        $map = $json['map'];
        if(!empty($map)){
            return '<script type="text/javascript">'.$json['map'].'</script>';
        }else{
            return '';
        }
    }

    private function getJsTags(){
        $json = $this->json;
        $js = $json['js'];
        $arr = array();
        if(isset($js)){
            foreach($js as $uri){
                $tag = $this->getJsTag($uri);
                array_push($arr, $tag);
            }
            return implode('', $arr);
        }else{
            return '';
        }
    }

    private function getJsTag($uri){
        $url = $this->domain.$uri;
        return '<script type="text/javascript" src="'.$url.'"></script>';
    }

    public function setJs($scripts=''){
        $this->scripts = $scripts;
    }

    public function loadCss(){
        // 如果有错误 则输出空字符串
        if(!$this->status){ echo ''; return;}
        // 如果是调试模式
        if($this->isDebug){
            $debugSrc = $this->debugPath.'?id='.$this->id.'&type=css&domain='.$this->domain.'&timestamp='.time();
            echo '<link rel="stylesheet" type="text/css" href="'.$debugSrc.'" />';
        }else{
            echo $this->getCssTags();
        }
    }

    private function getCssTags(){
        $json = $this->json;
        $css = $json['css'];
        $arr = array();
        if(isset($css)){
            foreach($css as $uri){
                $tag = $this->getCssTag($uri);
                array_push($arr, $tag);
            }
            return implode('', $arr);
        }else{
            return '';
        }
    }

    private function getCssTag($uri){
        $url = $this->domain.$uri;
        return '<link type="text/css" rel="stylesheet" href="'.$url.'" />';
    }
}

 

使用示例：

 

<?php
    require_once('./atmjs.php');
    $atmjs = new atmjs;
    $atmjs->import('user/account:1.0.0/login');
?>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <?php
        $atmjs->loadCss();
    ?>
</head>
<body>
<!--some html code-->



some code
<?php
$scripts= <<<EOT
function (loginExport) {
    //some code
}
EOT;
    $atmjs->setJs($scripts);
    $atmjs->loadJs();
?>
</body>
</html>

　　

3.生成的页面源代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="http://cn-style.gcimg.net/static/core/reset/1.0.0/reset_e5b6e95.css" />
    <link type="text/css" rel="stylesheet" href="http://cn-style.gcimg.net/static/user/account/1.0.0/account_2e2d290.css" />
    <link type="text/css" rel="stylesheet" href="http://cn-style.gcimg.net/static/user/account/1.0.0/css/login_9fa75f4.css" />
</head>
<body>
<!--some html code-->



some code
<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_aa23401.js"></script>
<script type="text/javascript">atmjs.setMap({"_alias":{},"alias":{"user/account:1.0.0/other/ajax":"/user/account/1.0.0/other/ajax_49ac7f5.js"},"pkg":{},"cssDeps":{}});</script>
<script type="text/javascript" src="http://cn-style.gcimg.net/static/user/account/1.0.0/account_8c2acc1.js"></script>
<script type="text/javascript" src="http://cn-style.gcimg.net/static/user/account/1.0.0/exports/login_1074d04.js"></script>
<script type="text/javascript">atmjs.use('user/account:1.0.0/login' ,function (loginExport) {
        //some code
    })</script>
</body>
</html>