params.json

{"name":"Fxtpl","tagline":"全新的JS模板引擎","body":"Fxtpl v1.0 繁星前端模板引擎\r\n=====\r\n\r\n极速，简洁，高效，轻量级，直接在html中嵌入模板\r\n\r\n### 特点\r\n\r\nFxtpl可以直接在html中嵌入模板，无需编写script标签模板再innerHTML插入等繁琐操作\r\n\r\nFxtpl语法模仿Smarty，却比Smarty更简单优雅，更适合前端思维\r\n\r\nFxtpl有类似Smarty的单页面数据共享渲染模式，也有前端模板特有的闭包数据渲染模式\r\n\r\nFxtpl有自己的模板变量域名空间（类似PHP中的美元变量），无需依靠沙箱，模板环境和外部JS环境可以安全互访，模板的自由度和灵活性大大提升（市面流行的前端模板一般是沙箱牢房模式，应用灵活性大打折扣）\r\n\r\n### 性能\r\n\r\nFxtpl的性能追求极致，无论在IE中还是Chrome等现代浏览器中，Fxtpl都表现优越\r\n\r\n[详细性能对比测试>> ](http://koen301.github.io/fxtpl/test/speed.html)\r\n\r\n### 体积\r\n\r\nFxtpl在体积上也追求极致，一共100多行代码，1.6KB(gzip)\r\n\r\n[体积对比>> ](http://koen301.github.io/fxtpl/test/size.html)\r\n\r\n### 基本功能\r\n\r\n渲染、编译、模板缓存、数据缓存、HTML转义、自定义分隔符、调试模式、变量调节器（helpers）、include语句等\r\n\r\n### 浏览器支持\r\n\r\nIE6+ / Chrome / Firefox 等现代浏览器\r\n\r\n### 下载\r\n\r\n* [fxtpl.min.js (压缩)](http://koen301.github.io/fxtpl/fxtpl.min.js)\r\n* [fxtpl.js (无压缩)](http://koen301.github.io/fxtpl/fxtpl.js)\r\n* [fxtpl.plus.js (Plus版本，额外支持Ajax加载/渲染外部文件)](http://koen301.github.io/fxtpl/fxtpl.plus.js)\r\n\r\n## Fxtpl 快速上手\r\n\r\n### 渲染HTML\r\n\r\n#### html:\r\n\r\n\t<div id=\"myTemplate\">\r\n\t\t<p>Hello, <!--[$name]--></p>\r\n\t</div>\r\n\r\n#### js:\r\n\r\n\tvar data = {\r\n\t\tname: 'Fxtpl前端模板引擎'\r\n\t};\r\n\tFxtpl.render('myTemplate', data);\r\n\r\n[查看演示>> ](http://koen301.github.io/fxtpl/demo/quickstart-html.html)\r\n\r\n### 编译JS字符串\r\n\r\n#### js:\r\n\r\n\tvar title = '#音乐十年# 我在现场投票给了{{$starName}}，TA当前排名第{{$rank}}位共{{$votes}}票。';\r\n\tvar data = {\r\n\t\tstarName: '邓紫棋',\r\n\t\trank: 1,\r\n\t\tvotes: 128790\r\n\t};\r\n\ttitle = Fxtpl.compile(title, data, {leftTag: '{{', rightTag: '}}'});\r\n\t\r\n[查看演示>> ](http://koen301.github.io/fxtpl/demo/quickstart-string.html)\r\n\r\n## Fxtpl 语法\r\n\r\n### 1、输出变量/表达式\r\n\r\nFxtpl的变量和Smarty模板类似，模板域变量以``$``开头。同时，为了最大兼容浏览器的预渲染，默认左右分隔符为``<--[``和``]-->``\r\n\r\n\t>> 直接输出模板变量\r\n\t<div>歌手： <!--[$starName]--></div>\r\n\r\n\t>> 输出变量的子项\r\n\t<div>用户ID： <!--[$userInfo.userId]--></div>\r\n\r\n\t>> 应用模板辅助方法（变量调节器）“escape”转义字符串\r\n\t<div>您的留言： <!--[$notes|escape]--></div>\r\n\r\n\t>> 应用JS原生“||”语法，设置“$votes”的默认值为“暂无”\r\n\t<div>您的票数：<!--[$votes||'暂无']--></div>\r\n\r\n\t>> 应用JS原生字符串方法replace\r\n\t<div>时间：<!--[$time.replace('/', '-')]--></div>\r\n\r\n\t>> 应用JS三元运算，输出“成功”或“失败”\r\n\t<div>晋级：<!--[$status == 1? '成功': '失败']--></div>\r\n\r\n\t>> 应用外部jQuery的$.trim方法\r\n\t<div>评论：<!--[$.trim($comment)]--></div>\r\n\r\n[查看演示>> ](http://koen301.github.io/fxtpl/demo/syntax-base.html)\r\n\r\n### 2、if、if...else、if...elseif...，可多重嵌套\r\n\r\n\t>> if\r\n\t<!--[if $status == '1']-->\r\n\t\t<div>直播中...</div>\r\n    <!--[/if]-->\r\n\r\n    >> if...else\r\n\t<!--[if $status == '1']-->\r\n    \t<div>直播中...</div>\r\n    <!--[else]-->\r\n    \t<div>休息中...</div>\r\n\t<!--[/if]-->\r\n\r\n\t>> if...elseif\r\n\t<!--[if $status == '1']-->\r\n    \t<div>直播中...</div>\r\n    <!--[elseif $status == '2']-->\r\n    \t<div>录像中...</div>\r\n\t<!--[/if]-->\r\n\r\n[查看演示>> ](http://koen301.github.io/fxtpl/demo/syntax-if.html)\r\n\r\n### 3、each...[index]、each...as...[index]\r\n\r\n\t>> each遍历，默认带两个参数：$index(索引)、$item(值)，同时内部this指针指向$item\r\n\t<ul>\r\n    <!--[each $userList]-->\r\n        <li>索引：<!--[$index]-->，名称：<!--[$item]--></li>\r\n    <!--[/each]-->\r\n    </ul>\r\n\r\n    >> each...as...遍历，自定义$index、$item参数，可省略“$”前缀（为保持模板变量一致性，不建议省略）\r\n\t<ul>\r\n    <!--[each $userList as $name $i]-->\r\n        <li>索引：<!--[$i]-->，名称：<!--[$name]--></li>\r\n    <!--[/each]-->\r\n    </ul>\r\n\r\n[查看演示>> ](http://koen301.github.io/fxtpl/demo/syntax-each.html)\r\n\r\n### 4、include id, [data]（引入子模板）\r\n\r\n#### 引入同页面的字模板\r\n\r\n\t>> 引入id为“msgContent”的子模板，并用data渲染（可省）\r\n    <div id=\"box\">\r\n    \t<p>您好，收到新消息： </p>\r\n    \t<!--[include 'msgContent', data]-->\r\n    </div>\r\n\r\n[查看演示>> ](http://koen301.github.io/fxtpl/demo/syntax-include.html)\r\n\r\n#### 引入外部页面的子模板（同步引入）\r\n\r\n注：仅 fxtpl.plus.js 版本支持，且需依赖jQeruy或Zepto，内部用“$.ajax”实现\r\n\r\n\t>> 引入外部子模板文件“msgContent.html”，并用data渲染（可省）\r\n    <div id=\"box\">\r\n    \t<p>您好，收到新消息： </p>\r\n    \t<!--[include 'msgContent.html', data]-->\r\n    </div>\r\n\r\n[查看演示>> ](http://koen301.github.io/fxtpl/demo/syntax-includeAjax.html)\r\n\r\n同时，Plus版本的Fxtpl.render方法也支持渲染外部文件，这样可以实时加载外部的模板（例如根据用户点击后加载）\r\n\r\n\t//渲染外部文件\r\n\tvar html = Fxtpl.render('/static/msg/msgContent.html', data);\r\n\t//渲染后的html插入当前页面\r\n\t$('#box').html(html);\r\n\r\n(注：更多功能欢迎在[Issues](https://github.com/koen301/fxtpl/issues)提出建议)\r\n\r\n## Fxtpl API\r\n\r\n### 1、Fxtpl.render(id, [data], [options])\r\n\r\n渲染模板\r\n\r\n参数 | 类型 | 默认值| 说明\r\n------------ | ------------- | ------------ | ------------\r\nid | String | 无 | 模板的id，如果其为script标签，即传统前端模板渲染模式；如果为非script标签，即类Smarty直接渲染模式（[demo](http://koen301.github.io/fxtpl/demo/render-id.html)）\r\ndata | JSON | Fxtpl.data | 模板的数据，默认渲染Fxtpl.data域下的数据，即数据共享渲染模式；如果传入data即闭包数据（不共享）模式（[demo](http://koen301.github.io/fxtpl/demo/render-data.html)）\r\noptions | JSON | options | 渲染模板的额外设置，参见下面“options 设置”\r\n\r\noptions 设置（可选）\r\n\r\n字段 | 类型 | 默认值| 说明\r\n------------ | ------------- | ------------ | ------------\r\ndebug | Boolean | ``false`` | 是否开启debug模式，参见[Fxtpl 容错和调试](# Fxtpl 容错和调试)\r\nescape | Boolean | ``false`` | 是否转义输出HTML字符\r\nleftTag | String | ``\"<--[\"`` | 左语法分隔符\r\nrightTag | String | ``\"]-->\"`` | 右语法分隔符\r\n\r\nReturns: HTML（渲染后的HTML字符串）\r\n\r\n[类Smarty渲染模式需要注意的事项及建议>>](https://github.com/koen301/fxtpl/wiki/%E7%B1%BBSmarty%E6%B8%B2%E6%9F%93%E6%A8%A1%E5%BC%8F%E9%9C%80%E8%A6%81%E6%B3%A8%E6%84%8F%E7%9A%84%E4%BA%8B%E9%A1%B9%E5%8F%8A%E5%BB%BA%E8%AE%AE)\r\n\r\n### 2、Fxtpl.compile(str, [data], [options])\r\n\r\n编译字符串\r\n\r\n参数 | 类型 | 默认值| 说明\r\n------------ | ------------- | ------------ | ------------\r\nstr | String | 无 | 编译的字符串\r\ndata | JSON | 无 | 编译字符串用到的数据，如果省略，则返回渲染函数，否则返回渲染后的字符串（[demo](http://koen301.github.io/fxtpl/demo/compile.html)）\r\noptions | JSON | options | 编译字符串的额外设置，同``Fxtpl.render``方法中的“options 设置”\r\n\r\nReturns: Function | String（渲染函数或渲染后的字符串）   \r\n\r\n### 3、Fxtpl.config\r\n\r\n模板的全局设置，包含下面的字段\r\n\r\n字段 | 类型 | 默认值| 说明\r\n------------ | ------------- | ------------ | ------------\r\nescape | Boolean | ``false`` | 是否转义输出HTML字符\r\nleftTag | String | ``\"<--[\"`` | 左语法分隔符\r\nrightTag | String | ``\"]-->\"`` | 右语法分隔符\r\n\r\n除了无“debug”的全局设置，和上面方法中的“options 设置”基本相同，优先级为：方法中的“options 设置” > 全局设置\r\n\r\n下面展示如何把模板的全局左右分隔符，改为``{{``和``}}``：\r\n\r\n\tFxtpl.config.leftTag = '{{';//定义新的左分隔符\r\n\tFxtpl.config.rightTag = '}}';//定义新的右分隔符\r\n\t\r\n\tvar data = {\r\n\t  name: \"Joe\"\r\n\t};\r\n\tvar output = Fxtpl.compile(\"My name is {{$name}}\", data);//直接使用新的格式\r\n\r\n[查看演示>> ](http://koen301.github.io/fxtpl/demo/config-tag.html)\r\n\r\n### 4、Fxtpl.helpers\r\n\r\nFxtpl模板的辅助方法集合（变量调节器）\r\n\r\nFxtpl.helpers是一个对象，你可以认为它是模板辅助方法的原型``prototype``，默认只有“escape”方法   \r\n\r\n\t<div>您的留言：<!--[$notes|escape]--></div>\r\n\r\n你可以通过类似扩展原型的方式，扩展模板的辅助方法\r\n\r\n***需要注意***\r\n\r\n* 方法的第一个参数为模板传递的值/字符串\r\n* 方法必须有返回值，否则模板输出为“undefined”\r\n\r\n例如扩展一个trim方法和intercept方法\r\n\r\n\t//去除字符串前后空格\r\n\tFxtpl.helpers.trim = function(value){\r\n\t\treturn value.replace(/^\\s*|\\s*$/g,'');\r\n\t};\r\n\r\n\t//根据length截取字符串，多出的用appendStr代替\r\n\tFxtpl.helpers.intercept = function(value, length, appendStr){\r\n\t\treturn someString;\r\n\t};\r\n\r\n在模板中使用\r\n\t\r\n\t>> 使用trim辅助方法\r\n\t<!--[$title|trim]-->\r\n\r\n\t>> 使用intercept辅助方法，空格后使用参数（从方法的第二个参数开始），多个参数用“,”分隔\r\n\t<!--[$title|intercept 10,'...']-->\r\n\r\n\t>> 同时使用trim、intercept辅助方法\r\n\t<!--[$title|trim|intercept 10,'...']-->\r\n\r\n[查看演示>> ](http://koen301.github.io/fxtpl/demo/helpers.html)\r\n\r\n附：[Fxtpl常用辅助方法插件汇总>> ](https://github.com/koen301/fxtpl/blob/gh-pages/demo/helpers-plugins.md)\r\n\r\n### 5、Fxtpl.data\r\n\r\n模板数据默认存放的域，如果Fxtpl.render方法不传data参数，即从此域读取\r\n\r\n此域下所有一级变量在模板下均带“$”前缀，假如Fxtpl.data为\r\n\r\n\t{\r\n\t\tpage: 102,\r\n\t\tuser: {\r\n\t\t\tname: 'Jack'\r\n\t\t}\r\n\t}\r\n\r\n则在模板中对应为``$page``和``$user.name``\r\n\r\n### 6、Fxtpl.cache\r\n\r\n模板渲染函数缓存区，以模板id为索引\r\n\r\n只缓存Fxtpl.render生成的渲染函数，不缓存Fxtpl.compile生成的渲染函数\r\n\r\n下面演示手动缓存Fxtpl.compile生成的渲染函数\r\n\r\n\tvar renderFun = Fxtpl.compile('my name is {{$name}}');//用renderFun变量缓存渲染函数\r\n\tvar data = {\r\n\t\tlist: [\r\n\t\t\t{name: 'Jack'},\r\n\t\t\t{name: 'Lily'},\r\n\t\t\t{name: 'Koen'}\r\n\t\t]\r\n\t};\r\n\tfor(var i = 0; i < data.list.length; i++){\r\n\t\tconsole.log(renderFun(data.list[i]));//打印渲染结果\r\n\t}\r\n\r\n\t//my name is Jack\r\n\t//my name is Lily\r\n\t//my name is Koen\r\n\r\n## Fxtpl 容错和调式\r\n\r\n当模板渲染/编译发生错误时，Fxtpl会在控制台和页面同时输出错误信息和类型（Render或Compile），不影响后面代码的继续执行\r\n\r\n同时Fxtpl提供debug调试模式（在“options 设置”中打开），在控制台输出编译前的字符串/HTML和渲染函数，方便定位错误\r\n\r\n[查看演示>> ](http://koen301.github.io/fxtpl/demo/debug.html)\r\n\r\n## Fxtpl 注释\r\n\r\nFxtpl只支持HTML默认的``<!-- -->``注释格式，不创造任何注释格式。\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}