DoraCMS广告模块优化

  DoraCMS 后台是有广告模块的，下面简要介绍一下DoraCMS的广告模块可以做什么：

  1、友情链接

  2、简单的文本链接

  3、图片广告

  以上的内容都可以在后台添加

  但是怎么展示呢，展示功能之前就做了，今天做了进一步优化，以面向对象的方式介绍一下图片广告的展示：

  前端的图片广告展示，默认使用了bootstrap的一个叫 Carousel 的插件，是什么样的呢：

它具备了幻灯片的基础功能，可以轮播并可以随意切换。DoraCMS目前使用它作为前端展现广告的方式。它的结构是这样的：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

下面看一下js是怎样实现的：

'use strict';
/*滑动组件
* adsId 广告id
* containerId 自定义广告容器ID
* showPoint 是否显示小圆点 默认false
* */

function initSlides(jsonData){
    var jsonData = jsonData || {};
    jsonData.adsId = jsonData.adsId || '';
    jsonData.containerId = jsonData.containerId || '';
    jsonData.showPoint = jsonData.showPoint || false;
    if(jsonData.adsId && jsonData.containerId){
        this.init(jsonData);
    }
}


initSlides.prototype = {

    init : function(jsonData){
        $.ajax({
            url:"/content/requestAds/ads/item?uid="+jsonData.adsId,
            type:"get",
            dataType:"json",
            success:function(data){
                if(!data){
                    return;
                }
                if(data.type === "1"){
                    var imgContent = data.content;
                    var imgList = imgContent.replace(/},/g,"};").split(";");
                    adsTemp(imgList,jsonData);
                }else{
                    var contentObj = JSON.parse(data.content);
                    var txtHtml = "";
                    txtHtml += "<a href='"+contentObj.link+"' target='_blank'><i class='fa fa-tags'></i>"+contentObj.title+"</a>";
                    $("#"+jsonData.containerId).html(txtHtml);
                }

            }
        });
    }
};

function adsTemp(imgList,jsonData){
    var imgIcons = "";
    var imgItems = "";
    for(var i=0;i<imgList.length;i++){
        var item = JSON.parse(imgList[i]);
        if(i==0){
            imgIcons += "<li data-target='#carousel-example-generic' data-slide-to='0' class='active'></li>";
            imgItems += "<div class='item active'><a href='"+item.link+"' target='"+item.target+"'><img width='"+item.width+"' height='"+item.height+"' src='"+item.sImg+"' alt='"+item.discription+"'></a></div>";
        }
        else{
            imgIcons += "<li data-target='#carousel-example-generic' data-slide-to='"+i+"'></li>";
            imgItems += "<div class='item'><a href='"+item.link+"' target='"+item.target+"'><img width='"+item.width+"' height='"+item.height+"' src='"+item.sImg+"' alt='"+item.discription+"'></a></div>";
        }
    }

    var adsHtml = `
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            ${jsonData.showPoint ? imgIcons : ''}
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            ${imgItems}
        </div>

        <!-- Controls -->
        <a class="left carousel-control ${imgList.length == 1 ? 'hide' : ''}" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control ${imgList.length == 1 ? 'hide' : ''}" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    `;
    $("#"+jsonData.containerId).html(adsHtml);

}

在需要添加广告的位置加入代码：

<div id="expressAds1"></div>

在页面初始化时加入代码：

$(function(){
	new initSlides({
		adsId : 'Vkbq3feZg',
		containerId : 'expressAds1'
	})
})

这里提供三个参数：

1、adsId 传入新增广告的key，可以在后台查看

2、containerId 传入需要插入广告位置的id，自定义即可

3、如果需要小圆点显示出来，设置 showPoint 属性为 true

其实重写的目的也是为了熟悉一下es6的语法，突然感觉，某些地方（特别是在html拼接）用es6的语法更加直观，省了很多麻烦，以上实现思路是这样的：通过调用接口获取广告相关信息，填入到组装好的html中，当然中间针对不同参数也进行了特别处理。比如，针对单图片是不需要滑动的，去掉了左右的切换图标等，实现效果：