关于DoraCMS 代码结构优化
DoraCMS 刚上线受到了前端开发者的关注,但是匆匆上线也让我发现了很多问题,例如调试之前需要插入数据,很不方便,随着关注增多也暴露了很多bug,而有些bug我一直在找是什么触发的,很头疼。
DoraCMS 刚上线受到了前端开发者的关注,但是匆匆上线也让我发现了很多问题,例如调试之前需要插入数据,很不方便,随着关注增多也暴露了很多bug,而有些bug我一直在找是什么触发的,很头疼。很多冗余代码也是初始版DoraCMS一个很大问题,有朋友也跟我提到过,在某些页面有很多当前页面用不到的js,对页面优化不利。于是针对于上述发现的种种问题,我打算重新整理下代码。
这几天主要在一下几个方面将代码整理了一下:
1、基于ejs的模板引擎让灵活的模板套用成为可能,我基本上把之前原本的界面元素剥离出来了,形成了cms的基础元素:
这里面包含了header,footer,文档列表,热门文档,标签列表,搜索框,留言板,用户注册、用户登录、左侧导航、分页等基础模块剥离出来,例如分页模块:
<!--分页模块--> <div class="pagenation text-center" ng-controller="pagenation"> <ul> <li ng-class="{true:'hide'}[currentPage==1]"><a href="javascript:void(0);" ng-click="prevPage()">上一页</a></li> <li ng-repeat="page in pages" ng-class="{true:'active'}[currentPage==page]"><a href="javascript:void(0);" ng-click="loadPage(page)">{{ page }}</a></li> <li ng-class="{true:'hide'}[currentPage==totalPage]"><a href="javascript:void(0);" ng-click="nextPage()">下一页</a></li> </ul> </div> <script> doraApp.controller("pagenation",function($scope,$http) { $scope.currentPage = Number('<%=pageInfo.currentPage%>'); $scope.totalItems = Number('<%=pageInfo.totalItems%>'); $scope.limit = Number('<%=pageInfo.limit%>'); $scope.startNum = Number('<%=pageInfo.startNum%>'); $scope.totalPage = Math.ceil($scope.totalItems / $scope.limit); $scope.pages = []; var localUrl = ""; var param = ""; var pageType = '<%=pageType%>'; if(pageType == 'index'){ localUrl = "/page"; }else if(pageType == 'cate'){ localUrl = "/<%=cateInfo.defaultUrl%>___<%=cateInfo._id%>"; }else if(pageType == 'search'){ param = "?searchKey=<%=pageInfo.searchKey%>"; localUrl = "/content/searchResult/items"; } initPagination($scope,$http,localUrl,param); }) </script>
它将作为单独模块在任意页面灵活调用,而调用页面只用这样写就可以了:
<% include public/pagination %>
也就是说,基础模块你可以随意组装,只要后台返回指定数据集合就可以了。另外,所有基础模块都使用了最基础的html5标签,整个结构没有过于复杂的样式代码,除去bootstrap之外,样式文件只有5k(未压缩)
这样做的目的是让开发更加方便,灵活。模板改变的同时,后台返回数据也做了相应的优化,只返回所需要的数据,力求响应速度最快。下面是优化后的响应速度
目前只对前台部分做了优化,先放上来测测性能,接下来会对后台做进一步优化。
很赞哦! ( 0
)