全栈工程师通往架构师之路

第十三天 评论

2016-08-22  本文已影响17人  霄峰

1. css样式嵌套

css代码:

  .comm{
    padding:10px;
    margin:2px;
    
    border:1px solid #ccc;
  }

html 代码:

  <div class="comm">
    这是一楼的内容
    <div class="comm">
      这是二楼的内容
      <div class="comm">
        这是三楼的内容
      </div>
    </div>
  </div>

2. 数据存储结构

评论和回复数据结构

  {
      _gid://商品ID
      _uid:ObjctID(),//用户ID
      _username:,//用户名
      _content://评论内容
      _createtime://评论时间
      _status://状态
      _reply:[//回复评论
        {
          _id:ObjectID(),//回复自动ID
          _uid:ObjctID(),//用户ID
          _username:,//用户名
          _content://回复内容
          _createtime://回复时间
        },
        ...
      ]
    }
  

递归格式化

      //递归格式化
      function formatReply(reply, id, j){
        var html = '';
        html += '<div class="ext-discuss-div">';
        html += '<p class="ext-user"><span style="float: left;">'+(reply[j]._username)+'</span><span style="float: right;">'+(reply[j]._createtime)+'</span><div style="clear:both"></div></p>';
        html += '<p class="ext-content">'+(reply[j]._content)+'</p>';
        html += '<p class="ext-dis-btn" ><button class="ui-btn ui-btn-inline ext-ui-btn" data-disid="'+(id)+'" onclick="showPanelForReply(this)">回复</button></p>';
          
        if(j < reply.length - 1){
          html += formatReply(reply, id, j+1);
          
        }
        
        html += '</div>';
        
        return html;
      }

测试

var test = [{_username:'aaa',_content:'cont_aaa',_createtime:'20160506'},{_username:'aaa',_content:'cont_aaa',_createtime:'20160506'}];

var res = formatReply(test, '99', 0);

console.log(res);

3. jquery 序列化表单

html 代码:

  <form id="myForm">
    <input type="text" name="username"/>
    <input type="text" name="password"/>
  </form>

jquery 代码:


  $("#myForm").serialize();

结果

  username=USERNAME&password=PASSWORD
上一篇下一篇

猜你喜欢

热点阅读