前端组件化思维

一、常规思维
需求：新闻列表展示
如图样式：

我们ajax去请求后端php的代码：

$new1 = array("news_title"=>"测试新闻标题1","news_content"=>"测试新闻内容1","news_time"=>"2016-07-08");
$new2 = array("news_title"=>"测试新闻标题2","news_content"=>"测试新闻内容2","news_time"=>"2016-07-09");

header("Content-type: application/json");
// json_encode 加JSON_UNESCAPED_UNICODE参数 中文不转码.在PHP5.4可用
die(json_encode(array($new1,$new2),JSON_UNESCAPED_UNICODE));

常规思维：在ajax成功返回的函数里，循环拼接html，再填充到页面

<script type="text/javascript">
      $(document).ready(function(){
          $.post("http://localhost/myphp/news.php",function(data){
              // for循环
          });
      });
  script>

二、简单的封装一下html
我们可以看出需要循环的html就是

<div class="card">
   <div class="card-header">卡头div>
   <div class="card-content">
      <div class="card-content-inner">头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。div>
    div>
  <div class="card-footer">卡脚div>
div>

接下来，看我们怎么拆分
把上面 HTML代码保存为card.html。

<div class="card">
    <div class="card-header">{news_title}div>
    <div class="card-content">
      <div class="card-content-inner">{news_content}div>
    div>
    <div class="card-footer">{news_time}div>
div>

然后在js里， $.get(“card.html”) 就拿到了。

$.post("http://localhost/myphp/news.php",function(data){
            $.get("./lib/card.html",function(html){
               for(var i=0;ivar clone_html = html;
                  for(var key in data[i]){
                    // 替换模板
                    clone_html = clone_html.replace("{"+key+"}",data[i][key]);
                  }

                  // append到页面
                  $(".content").append(clone_html);
               }
            });
        });

我们成功的把数据展示到了页面上。

上面的方式，最重要的一步是我们对列表的 拆分成了单独的html模板。