DoraCMS

您现在的位置是:首页>文档内容页

文档详情

关于DoraCMS 代码结构优化

doramart 2015-08-30 11:12:01 原创教程225270
DoraCMS 刚上线受到了前端开发者的关注,但是匆匆上线也让我发现了很多问题,例如调试之前需要插入数据,很不方便,随着关注增多也暴露了很多bug,而有些bug我一直在找是什么触发的,很头疼。

 DoraCMS 刚上线受到了前端开发者的关注,但是匆匆上线也让我发现了很多问题,例如调试之前需要插入数据,很不方便,随着关注增多也暴露了很多bug,而有些bug我一直在找是什么触发的,很头疼。很多冗余代码也是初始版DoraCMS一个很大问题,有朋友也跟我提到过,在某些页面有很多当前页面用不到的js,对页面优化不利。于是针对于上述发现的种种问题,我打算重新整理下代码。

 这几天主要在一下几个方面将代码整理了一下:


1、基于ejs的模板引擎让灵活的模板套用成为可能,我基本上把之前原本的界面元素剥离出来了,形成了cms的基础元素:


QQ截图20150830102938.jpg


这里面包含了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(未压缩)


QQ截图20150830103833.jpg

这样做的目的是让开发更加方便,灵活。模板改变的同时,后台返回数据也做了相应的优化,只返回所需要的数据,力求响应速度最快。下面是优化后的响应速度


QQ截图20150830132002.jpg


目前只对前台部分做了优化,先放上来测测性能,接下来会对后台做进一步优化。 


文章评论

Cancel the reply
Login Participate In Comments

Review(