俗話說，分久必合，合久必分

什麼東西都阻擋不了大勢，俗話說，大勢所趨就是這個道理

在多終端的環境下，以前讓服務端比如php那些煞筆在頁面上直接輸出資料的年代早就過去啦，

什麼？你們還這樣做？

那就有人要問了，那現在流行什麼呢？請容我細細道來

那就是資料和前端絕對的分開，伺服器只負責提供 一串json資料，至於資料怎麼展示，就交給前端啦，所以一個介面可以滿足web，ios，android，等各種需求

哎呦，需求很強烈呀！

對於網頁前端的我們，以前的那些遍歷資料的操作就全部到我們手裡了

所以各種

$("#xxx").val()
$("#xxx").html()
$("#xxx").attr()
 

就出現了，一個一個寫，好煩啊

甚至還有陣列，我們要這樣

for(var i=0;i<len;i++) {
     $("<p>"+xx+"eee"+""+"</p>").apendTo(xxxx)
}

怎麼辦呢？能不能我只要寫好一些屬性，你就我自動給生成呢？

比如

<span data-name></span>

自動把json的裡的name給塞進去，多舒服

下面樓主就給大家寫一個外掛

啥叫外掛？就是插進去的一件東西。。。

有朋友說了？噢。。。那我也有。。。

jrender

一個基於jQuery的json資料快速展示系統

用法

html程式碼

<div class="info">
    <span render-html="weather"></span>
    <ul render-loop="seven_days">
            <li render-html="seven_days.weather"></li>
    </ul>
</div>

html程式碼

var data = {
    weather:'晴',
    seven_days:[
        {
            weather:
 
'陰'
        },
        {
            weather:'霧霾'
        },
        {
            weather:'小雨'
        }
    ]
};
$(".info").renderValues(data);

說明

1.所有的資料展示都是在某一個標籤內 比如

<span render-html="username"></span>

迴圈型別的只迴圈，子元素的第一個元素，所以儘量套一個div進去

<div render-loop="seven_days">
    <div>
        <span render-html="seven_days.temperature"></span>
        <span render-html="seven_days.weather"></span>
    </div>
</div>

錯誤的寫法

<div render-loop="seven_days">
    <span render-html="seven_days.temperature"></span>
    <span render-html="seven_days.weather"></span>
</div>

2.可以render的型別有如下一個

render-html, 
render-src, 
render-value, 
render-href, 
render-loop, 
render-attr(這個型別自定義屬性例子:render-attr="userid=uid")

程式碼地址當然要在github上拉

https://github.com/suxianbaozi/jrender

ok就到這裡,大家去試試吧