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

用了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架子。