php如何传递数据给前端的javascript

尝试写主题的时候遇到了需要利用后台的设置数据去改变前端javascript设置的需求，比如后台设置一个幻灯的轮播速度为“5000”毫秒，需要将这个数据传递给js插件“slidejs”。

最初的做法是利用php直接输出一段标签，类似下面这样：

<script>
var interval = 5000;
</script>

因为“var interval = 5000”被包裹在了“script”标签里，所以也能够被正确的执行，但一查看页面源码，东一段“script”西一段“script”的，感觉页面结构异常的混乱。某天接触到了html的“data-”属性，感觉就是用这家伙来传递数据再好不过了啊。

例如定义上文的例子，需要为轮播图设置一下轮播间隔时间，就给轮播模块一个“data-interval”的属性，用php组织了下面这样一段html语句：

<div id="slides" class="slides-column" data-interval="5000" style="overflow: hidden;">

一个轮播图的基础写法如下，可以看到interval原来是直接写死在js文件当中的：

  $('#slides').slidesjs({
  width:1,
  height:$('#slides').data('scale'),  
  active:false,      
  play:{
      auto:true,
      interval: 5000,
      swap:true,
      effect: 'fade',
  },
  navigation:{
    active: false,
    prev: 'slidesjs-previous slidesjs-navigation',
    next: 'slidesjs-next slidesjs-navigation',
    effect: 'fade',
  }
  });

但现在我们可以利用js（这里博主使用的是jquery）来获取“#slides”的“data-interval”的值，这样当后台后台“data-interval”的值后，前端也能即时得到修改。

  $('#slides').slidesjs({
  width:1,
  height:$('#slides').data('scale'),  
  active:false,      
  play:{
      auto:true,
      interval: $('#slides').data('interval'),
      swap:true,
      effect: 'fade',
  },
  navigation:{
    active: false,
    prev: 'slidesjs-previous slidesjs-navigation',
    next: 'slidesjs-next slidesjs-navigation',
    effect: 'fade',
  }
  });