PHP Lumen - 入门教程 - web前端架子

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wowkk/article/details/52254696

用了Lumen一段时间了，感觉还不错。也适合全栈开发。因为我一丢丢PHP基础都没看就直接用起了框架，挺多地方还是闹笑话了。比如，字符串追加，PHP它喵的居然是用 “.” 来追加，而通过“->”进行属性调用也是不爽~

这个web前端架子，不是Lumen专用的，额外分享。

首先我写了一个公共类（common.js），主要用来进行封装请求的。

/*!
 * =====================================================
 * 全局通用变量
 * =====================================================
 */
var Common = {};
//Common.ServerUrl = "http://120.24.xx.xx:8080/";       //线上测试版本
Common.ServerUrl = "http://192.168.0.110:8080/";    //公司测试版本
//Common.ServerUrl = "http://192.168.99.139:8080/";     //宿舍测试版本

Common.Post = function(url,data,successcallback,errcallback){
    console.log(Common.jsonToUrl(url,data));
    if(errcallback==null){
        errcallback = function(xhr,type,errorThrown){
            console.log(JSON.stringify(xhr))
            plus.nativeUI.closeWaiting();//关闭旋转菊花
            alert("网络异常:" + url);
        }
    }
    //这里的mui是HBuilder跨平台开发工具自己的js，根据自己项目调改。
    mui.ajax(Common.ServerUrl + url,{
        data:data,
        dataType:'json',
        type:'post',
        timeout:5000,
        success:successcallback,
        error:errcallback
    });
}

Common.jsonToUrl=function(url,jsonData){
    var full_url = Common.ServerUrl + url + "?";
    for(var index in jsonData){
        full_url = full_url + index + "=" + jsonData[index] + "&";
    }
    return full_url;
};

可以把这段代码塞到js插件里面去（比如jQuery）减少请求。
这一丢丢代码有几个好处：
1.统一请求的url，不需要每个页面都去设置请求地址。页面发送ajax时，只需要把相对路径传进来就行了。
2.统一错误返回的处理，可以即时知道哪个请求出错。也可以根据需要特殊回调处理。
3.把post的data转换为url地址，方便直接复制到浏览器进行get调试。
4.方便拓展与维护，比如可以统一处理“未登录则自动跳转到登录页”。

再看下html页的代码

<script>
        /*
         * 页面配置
         */
        var PAGE = {
                View: {},
                page: 0,
                Model: {
                    Article: function(article) {
                        return '<article id="' + article.information_id + '">' +
                            '<div class="article-time">' +
                            '<span>' + article.time_title + '</span>' +
                            '</div>' +
                            '<div class="article-bg" style="background-image: url(' + article.information_imgurl + ');">' +
                            '<div class="article-bg-cover">' +
                            '<span class="information_title"># ' + article.information_title + '</span>' +
                            '</div>' +
                            '</div>' +
                            '<div class="mui-pull-right article_collect">' +
                            '<img style="width: 100%;" src="../../img/news_shoucang.png" />' +
                            '<div class="article_collect_fone">' + article.favour_num + '</div>' +
                            '</div>' +
                            '</article>';
                    },
                    Articles:function(articles){
                        var html = "";
                        for(var i = 0; i < articles.length; i++) {
                            html += PAGE.Model.Article(articles[i]);
                        }
                        return html;
                    }
                }
            };
        mui.init();//（mui框架需要）初始化框架
        mui.plusReady(function() {
            PAGE.Init();//初始化本页面
        });
        /*
         * 页面初始化
         */
        PAGE.Init = function() {
                PAGE.preloadView();
                PAGE.addEventListener();
            }
            /*
             * 页面预加载
             */
        PAGE.preloadView = function() {}
            /*
             * 事件监听
             */
        PAGE.addEventListener = function() {
            PAGE.addEventListener_Article();//确定监听点击文章列表的元素
        }
            /*
             * 页面预加载-实现
             */
        PAGE.preloadView_Name = function() {}
            /*
             * 事件监听-实现
             */
        PAGE.addEventListener_Article = function() {
                mui("#div_newList").on("tap", "article", function() {
                    mui.openWindow({
                        id: "/View/News/details.html",
                        url: "/View/News/details.html",
                        extras: {
                            information_id: this.id,
                            information_title: this.getElementsByClassName("information_title")[0].innerText,
                            information_imgurl: this.getElementsByClassName("article-bg")[0].style.backgroundImage
                        }
                    })
                })
            }
            /*
             * 事件实现
             */
        PAGE.Event_Name = function() {}
    </script>

编出来的这段，个人用起来还是比较舒服的。
1.所有js代码都是在PAGE这个域里面，尽量避免污染。
2.将所有监听事件独个封装起来，然后由PAGE.addEventListener统一调用。这样在简单事件较多的情况下，代码也足够清晰易阅读和定位。
3.所有动态生成的代码放在PAGE.Model对象里面（传人json数据，返回对应的html代码）。同样也是清晰易阅读和定位。
4.普通函数比如，更新页面数据就用PAGE.Event_XXX格式命名函数。这个主要就是统一规范吧。
5.一些配置变量，比如当前页PageNum，也可以防止PAGE里面去维护。

接下来继续实战，看能不能怎么优化。现在为了性能，大多数都是用原生js，看看有没有机会封装个js架子。