jQuery.fill 数据填充插件

博客园的伙伴们，大家好，I'm here，前段时间特别的忙，只有零星分散的时间碎片，有时候用来发呆，有时候用来写代码，正如下面给大家介绍的这个jQuery.fill插件，正是在这样的状态下写出来的。

主要功能

一直想要一个能解决前端拼接html代码的jQuery插件，但在网上搜来搜去都没找到满意的结果。还是老毛说的对，自己动手丰衣足食啊，设计的思路是通过在页面上排出模板，然后通过脚本向其填充数据，页面上的脚本不再关心版面的布局和样式，只关心数据，将数据从UI中分离出来，其主要的功能有：1、对DOM对象填充数据；2、将DOM对象反序列化为json对象；3、支持复杂的javascript对象提交至服务端；4、填充触发器和动作触发器，实现页面零脚本。

1、对DOM对象填充数据

fill方法向jQuery对象填充来自服务端的数据，服务端必须返回json格式的数据，来看一个栗子

html代码：

    <ul class="data1">      <li class="fill-item">        <label data-fill="name">bruce</label>:<span data-fill="title">hass</span>        <span data-dateformat="{yyyy}年{MM}月{dd}日 星期{w:日,一,二,三,四,五,六},{hh}时{mm}分{ss}秒" data-fill="date">2014年12月26日 星期五,8时8分56秒</span>        <div data-fill="books">          <h3>书籍</h3>          <div style="margin-bottom:1em;" class="fill-item">            <label data-fill="name">mvc 4.0</label>            作者：<span data-fill="author">feng</span>          </div><div style="margin-bottom:1em;" class="fill-item">            <label data-fill="name">jQuery 10</label>            作者：<span data-fill="author">Jonh</span>          </div><div style="margin-bottom:1em;" class="template">            <label data-fill="name">bruce</label>            作者：<span data-fill="author"></span>          </div>        </div>      </li>      <li class="template">        <label data-fill="name"></label>:<span data-fill="title"></span>        <span data-fill="date"></span>        <div>          <h3>书籍</h3>          <div class="template" style="margin-bottom:1em;">            <label data-fill="books.name"></label>            作者：<span data-fill="books.author"></span>          </div>        </div>      </li>    </ul>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：jQuery.fill 数据填充插件

关键词：jquery