《应用拆分与平台搭建最佳实践》-阿南达文事网

《应用拆分与平台搭建最佳实践》

《应用拆分与平台搭建最佳实践》- 跨应用平台静态资源

什么是跨应用平台静态资源

静态资源可以横跨多个应用正常使用

为什么需要做成静态资源

1.任何使用的此资源的平台风格保证一致性。 2.不需要后段做太多渲染处理，降低接入平台成本。

效果图

怎么做

可以看出，top头部，和左侧的导航，基本样式保持一致。其中,top颜色不同，是提供给每个应用个喜欢定制需要的配置颜色的方式。导航没有改颜色，当然也是可以改的。
我们如何做成这个效果呢？
两套方案：
方案一将静态资源打包成war包，需要的应用依赖来使用，缺点很明显，应用需要往页面注入值，需要对接一系列接口，复杂。方案二引入一段js，所有的事情都是js去完成。业务方不关心其他细节。

两种方案笔者都有做过，笔者这里只讲第二种方案，因为更加合理。

首先，我们引入一个空的js文件

<#-- 公用静态资源 -->
<script type="text/javascript"
        src="/js/plat/plat.js"
        id="plat-resources"
        env="${env}"
        nav="true"
        userinfo="true"
></script>

使用的应用始终只调用线上的js文件，然后注入env，决定当前环境，找对应jsonp接口拿数据。（现在说复杂了点，慢慢来。）

我们引入了这段js，如下给出源码

// 此文件最好修改成纯js，在jquery之前体验更好，笔者js功底不行，不敢献丑

$(function (){// 获取当前环境
    var env = $("#plat-resources").attr("env");
    // 是否需要导航
    var needNav =  $("#plat-resources").attr("nav");
    // 是否显示个人信息
    var needUserInfo = $("#plat-resources").attr("userinfo");
    // 获取静态服务地址
    var logginServerUrl = getSpileUrl(env);
    // 最前面插入标签

    // 加载公共资源页面
    //

    var publicDoc ="<style>" +"*{padding:0;margin:0;font-family:'微软雅黑';}" +"body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,th,td,p,pre,form,input,textarea,fieldset,blockquote{padding: 0;margin: 0;}" +".body-top {width: 100%;height: 100px;color: white;background: black;}" +".body-top-left {height: 100%;width: 270px; float: left;}" +".body-top-left-top {height: 70px;width: 270px;font-size: 50px;padding-left: 10px;line-height: 70px;}" +".body-top-left-bottom {height: 30px;width: 270px;font-size: 15px;line-height: 30px;text-align: right;}" +".body-top-mid {float: left;}" +".body-top-right {float: right;margin-right: 40px; width: 400px;margin-top: 10px;}" +".body-top-right-count {text-align: right;margin: 5px;font-size: 20px;}" +".hidden {display: none}" +"div{cursor:default}" +"</style>" +"<div class='body-top'>" +"<div class='body-top-left'>" +"<div class='body-top-left-top'>xiaotian.shi</div>" +"<div class='body-top-left-bottom'>欢迎来到石啸天的个人网站</div>" +"</div>" +"<div class='body-top-mid'></div>" +"<div class='body-top-right'>" +"<div class='body-top-right-count'></div>" +"<div class='body-top-right-user hidden'>登陆</div>" +"<div class='body-top-right-userinfo hidden'>" +"<div class='body-top-right-userinfo-username'></div>" +"<div class='body-top-right-userinfo-logout'>退出</div>" +"</div>" +"</div>" +"</div>" +"<style>" +".body-nav {top: 100px;left: 0px;width: 200px;bottom:0; height:100%;position: absolute;color: white;background: #2e68aa;padding-top: 20px;}" +".body-nav-item {height: 20px;font-size: 20px;padding-left: 40px;padding-top: 10px;padding-bottom: 10px;}" +".body-nav-item:hover{background: #1e508a}" +".current {background:#5387c3}" +"</style>" +"<div class='body-nav hidden'>" +"</div>"
        ;

    $("body").prepend(publicDoc);

    // 请求top头右边个人信息，和左边导航信息，进行渲染
    $.ajax({type : "get",
        async:false,
        url : logginServerUrl + "/cloudInfo",
        dataType : "jsonp",//数据类型为jsonp
        jsonp: "callback",//服务端用于接收callback调用的function名的参数
        success : function(data){var indexAccessCount = data.data.indexAccessCount;
            $(".body-top-right-count").html("访问量：" + indexAccessCount);

            if(data.code === 200 && "true" === needUserInfo) {$(".body-top-right-userinfo-username").html(data.data.username + " |");
                $(".body-top-right-userinfo").removeClass("hidden");
                $(".body-top-right-user").addClass("hidden");

                $(".body-top-right-user").click(function() {location.href = loginHost;
                });

            }if(data.code === 200 && "true" === needNav) {var navlist = data.data.nav;
                if(navlist.length > 0) {var navStr = "";
                    for(var i = 0 ; i < navlist.length ; i++) {var url =navlist[i].url;

                        var nowUrl = window.location.href;

                        var current = "";
                        if(nowUrl.indexOf(url) > -1) {current = "current";
                        }navStr = navStr + "<div class='body-nav-item "+ current +"' url='" + url + "'>" + navlist[i].name + "</div>";

                    }$(".body-nav").html(navStr);
                    $(".body-nav").removeClass("hidden");

                    $(".body-nav-item").click(function(){var url = $(this).attr("url");
                        location=url;
                    })}}mRealy(data);
        },
        error:function(){alert('fail');
        }});


    $(".body-top-right-userinfo-logout").click(function() {$.ajax({type : "get",
            async:false,
            url : logginServerUrl + "/logout",
            dataType : "jsonp",//数据类型为jsonp
            jsonp: "callback",//服务端用于接收callback调用的function名的参数
            success : function(data){location.href = "/";
            },
            error:function(){alert('fail');
            }});
    });
    // 绑定高度
    $(".body-nav").height(document.documentElement.clientHeight);

});

// 默认http
// 如何组装，需要根据自己应用的域名来决定
function getSpileUrl(env) {var p = "http";
    var s = ":8081";
    if(typeof(env) == "undefined" || env === "product") {env="";
        // 暂时没有https环境
        // p = "https";
        s = "";
    }return p + "://login.xiaotian" + env + ".shi" + s;

}

js文件有点长，但是不复杂
1.获取了标签的一些配置 2.写了一些html样式 3.根据环境参数，组装了接口数据请求地址 4.读取了jsonp 个人会话的数据
其中html笔者有尝试写在另一个静态文件中，然后跨域调取。但是面临几个问题： 1.延迟高 2.跨域方式不友好
这些内容不长，所以写成字符串的形式，一次渲染进去，高效快捷。

其中，绿色的login系统右上角的样式，有特殊定制，可以通过复写的方式，将样式修改掉。
例如top头部的颜色修改

.body-top {width: 100%;
    height: 100px;
    /*border-bottom: 4px white solid;*/
    color: white;
    background: black;
}

或者使用plat.js渲染完成后的回掉函数进行设置。

function mRealy(publicData) {};

其中publicData是异步请求的个人信息数据，结构可以自行设定。
这样基本完成了资源静态化的工作，但是这里有一些小细节。
比如如何提速，plat最好使用cdn加速节点，并且，jquery也需要cdn加速。版本需要手动控制，不可以经常更新。例如plat.js?v1.0.0
这样可以提升用户体验，不过最好的方式是使用纯原生的js方式去实现，笔者js功底不好，为了赶稿子就不献丑了。
这里可以跨域访问的前提是，您完成了应用跨域访问的配置，详情请看笔者单点登录相关的帖子，里面有详细描述，跨子域名会话共享的实现。
或者您可以下载系列源码，run demo来体验

项目地址 .shi-plat.git
demo /
账户密码
admin admin
user1 user1
user2 user2
user3 user3