fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

Juicer
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://juicer.name
GitHub:https://github.com/PaulGuo/Juicer
网站描述:一个高效、轻量的前端Js模板引擎

Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。除此之外,它还可以在 Node.js 环境中运行。  

名字的由来

倘若我们把数据比作新鲜可口的水果,把模板看做是水,Juicer 就是把水果和水榨出我们需要的html代码片段的榨汁机。

Juicer 的引入

<script type="text/javascript" src="juicer-min.js></script>


使用方法

> 编译模板并根据所给的数据立即渲染出结果.

juicer(tpl, data);

> 仅编译模版暂不渲染,它会返回一个可重用的编译后的函数.

var compiled_tpl = juicer(tpl);

> 根据给定的数据,对之前编译好的模板进行数据渲染.

var compiled_tpl = juicer(tpl);
var html = compiled_tpl.render(data);

> 注册/注销自定义函数(对象),在下边 ${变量} 中会有实例.

juicer.register('function_name', function);
juicer.unregister('function_name');

> 自定义模板语法边界符,下边是 Juicer 默认的边界符。你可以借此解决 Juicer 模板语法同某些后端语言模板语法冲突的情况.

juicer.set({
	'tag::operationOpen': '{@',
	'tag::operationClose': '}',
	'tag::interpolateOpen': '${',
	'tag::interpolateClose': '}',
	'tag::noneencodeOpen': '$${',
	'tag::noneencodeClose': '}',
	'tag::commentOpen': '{#',
	'tag::commentClose': '}'
});

默认参数配置

{
	cache:          true [false],
	strip:          true [false],
	errorhandling:  true [false],
	detection:      true [false]
}

默认配置是 Juicer 推荐的使用方式,如果你使用过程中的确需要更改这些参数,可以这么做:

逐条参数更改:

juicer.set('strip',false);
juicer.set('cache',false);

批量参数更改:

juicer.set({
	'strip': false,
	'cache': false
};

Juicer 默认会对编译后的模板进行缓存,从而避免同一模板多次数据渲染时候重复编译所耗的时间,如无特殊需要,强烈不建议关闭默认参数中的 cache,这么做将会令 Juicer 缓存失效从而降低性能.


链接: https://fly63.com/nav/2946

more>>
相关栏目
webpack
webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起
官网GitHub
npm
javascript 最流行的包管理器
官网GitHub
yarn
可替代NPM的快速、可靠、安全的可信赖包管理工具Yarn
官网GitHub
bower
解决js的依赖管理
官网GitHub
grunt
基于Node.js的项目构建工具。它可以自动运行你所设定的任务
官网GitHub
Parcel
快速,零配置的 Web 应用程序打包器
官网GitHub
babel
Babel 是一个 JavaScript 编译器,可用下一代JavaScript 语法写代码
官网GitHub
browserify
一个浏览器端代码模块化工具,require和module.exports来导入和导出.Browserify的原理:部署时处理代码依赖,将模块打包为一个文件。
官网GitHub
HEAD
一份你可以在 &lt;head&gt; 里设置的列表
官网GitHub
Snibox
一个可自建托管的代码片段管理器
官网GitHub
Flow
Facebook 推出一个静态类型检测工具
官网GitHub
WeFlow
一个高效、强大、跨平台的前端开发工作流工具
官网GitHub
Athena
前端自动化流程构建工具
官网GitHub
Cooking
更易上手的前端构建工具
官网GitHub
vue-cli
一个基于 Vue.js 进行快速开发的完整系统
官网GitHub
Turborepo
一个用于 JavaScript 和 TypeScript monorepos 的高性能构建系统
官网GitHub

手机预览