一個輕量級的js前端模版庫：yunCloud

yunCloud中文文檔

一個輕量級的js前端模版庫

yunCloud是一個高效、輕量[壓縮完只有2k]、兼容javascript邏輯語法的前端 (Javascript) 模板引擎，使用yunCloud可以是你的代碼實現數據和視圖模型的分離(MVC)。 除此之外，它還可以在Node.js環境中運行（正在測試中）。

你可以在遵守 MIT Licence 的前提下隨意使用并分發它。yunCloud 代碼完全開源并托管在 Github 上。

yunCloud的引入

 <script type="text/javascript" src="yunCloud.js"></script>

* 使用方法

| 編譯模板并根據所給的數據立即渲染出結果.

 var tpl = yunCloud(tpl, data);

| 僅編譯模版暫不渲染，它會返回一個可重用的編譯后的函數.

 var template_String = yunCloud(tpl); // 根據Data渲染得到html template_String(data);

| 注冊/注銷自定義函數，實現angularJS中的過濾器。在下邊 <%= 變量 %> 中會有實例。

yunCloud.register('filterName', function);
yunCloud.unregister('filterName');

* 語法

| <%= 變量 %>

<%= content %>
<%= content|filter %>

var str = 'hello <%= name|filter %>';
yunCloud.register('filter', function (data) {
    return data + '_Filter';
});
var Str = yunCloud(str, {name: 'world'});
console.log(Str); // => hello world_Filter

| <%- 變量 %>

這個是為了解決內容轉義提供的功能。(此寫法不支持Filter過濾器)

例如：需要在頁面中顯示<script>alert(1);</script>直接使用<%= 變量 %>會發現頁面會執行此內容。如果使用<%- 變量 %>會對內容進行轉義。在頁面中是不會執行此內容，而是原原本本的在頁面中輸出。

var str = '<%- <script>alert(1);</script> %>'
str = yunCloud(str)();
document.getElementById('ele').innerHTML = str;
// 頁面未彈出1

| <%& javascript變量 %>

此命令會原樣輸出javascript變量

var tpl = '<% var name = "hello" %><div><%& name %></div>';

yunCloud(tpl)();

| <% javascript邏輯代碼 %>

var tpl = [
    '<% for(var i = 0;i<10;i++) {%>',
      '<div>這是第<%& i %>個div</div>',
    '<% } %>'
  ].join('');

yunCloud(tpl);

讓我們通過一個例子演示一下自定義函數的奇妙用法吧.

var jsonData = {
    linkList: [
        {href: 'http://www.baidu.com', alt: '百度一下'},
        {href: 'http://pan.baidu.com', alt: '百度網盤'},
        {href: 'http://yun.baidu.com', alt: '百度云'}
    ]
};

var tpl = [
    '<ul>',
        '<% for(var i=0,len=linkList.length;i<len;i++){ %>',
            '<% var val = linkList[i]; %>',
            '<li><%= val|linkFilter %></li>',
        '<% } %>',
    '</ul>'
].join('');

var linkFilter = function (data) {
     return '<a href="' + data.href + '" alt="' + data.alt + '" />';
};

yunCloud.register('linkFilter', linkFilter);

yunCloud(tpl, jsonData);

項目主頁：http://www.baiduhome.net/lib/view/home/1443361671656