js-template-art【三】js api

一、js api使用

1、template(filename, data)

根据模板名渲染模板。

var html = template(‘tplScriptId‘, {
    value: ‘aui‘
});

在浏览器中,filename 请传入存放模板的元素 id

2、template(filename,source)

编译模板并缓存。

// compile && cache
template(‘tplScriptId‘, ‘hi, <%=value%>.‘);
// use
template(‘tplScriptId‘, {
    value: ‘aui‘
});

3、.compile(source, options)

编译模板并返回一个渲染函数。

var render = template.compile(‘hi, <%=value%>.‘);
var html = render({value: ‘aui‘});

4、.render(source, data, options)

编译并返回渲染结果。

var html = template.render(‘hi, <%=value%>.‘, {value: ‘aui‘});

5、.defaults

模板引擎默认配置。template.defaults

{
    // 模板名
    filename: null,

    // 模板语法规则列表
    rules: [nativeRule, artRule],

    // 是否开启对模板输出语句自动编码功能。为 false 则关闭编码输出功能
    // escape 可以防范 XSS 攻击
    escape: true,

    // 是否开启调试模式。如果为 true: {bail:false, cache:false, minimize:false, compileDebug:true}
    debug: detectNode ? process.env.NODE_ENV !== ‘production‘ : false,

    // bail 如果为 true,编译错误与运行时错误都会抛出异常
    bail: false,

    // 是否开启缓存
    cache: true,

    // 是否开启压缩。它会运行 htmlMinifier,将页面 HTML、CSS、CSS 进行压缩输出
    // 如果模板包含没有闭合的 HTML 标签,请不要打开 minimize,否则可能被 htmlMinifier 修复或过滤
    minimize: true,

    // 是否编译调试版。编译为调试版本可以在运行时进行 DEBUG
    compileDebug: false,

    // 模板路径转换器
    resolveFilename: resolveFilename,

    // HTML 压缩器。仅在 NodeJS 环境下有效
    htmlMinifier: htmlMinifier,

    // 错误事件。仅在 bail 为 false 时生效
    onerror: onerror,

    // 模板文件加载器
    loader: loader,

    // 缓存中心适配器(依赖 filename 字段)
    caches: caches,

    // 模板根目录。如果 filename 字段不是本地路径,则在 root 查找模板
    root: ‘/‘,

    // 默认后缀名。如果没有后缀名,则会自动添加 extname
    extname: ‘.art‘,

    // 导入的模板变量
    imports: {
        $each: each,
        $escape: escape,
        $include: include
    }
};
时间: 2024-10-07 05:38:50

js-template-art【三】js api的相关文章

JS调用百度 apistore 的api

第一次调用api,耗费了整个下午的时间,谨以这篇文章记录感想和教训. 效果图:    效果说明:点击按钮“新游记”,body.button 的背景颜色.字体颜色,都会改变. html部分 1 <div class="container"> 2 <div id="content"> 3 <p id="infoTime"></p> <!--游记发表时间--> 4 <h1><

Ext JS学习第三天 我们所熟悉的javascript(二)

•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式.每种方式他们都会有区别,分别为: –function语句形式 –函数直接量形式 –构造函数形式 •函数中的arguments对象 –argument的作用一:接受函数的实际参数 –argument的作用二:用于做递归操作 栗子代码 1 //Function 函数 2 //

WKWebView与JS交互实战技巧之API介绍

前言 前一章我给大家介绍了iOS与HTML5的交互,用的是UIWebView,今天给大家介绍另外一种基于 iOS 8 新推出的 WKWebView 组件,构建出自己的混合开发框架. WKWebView 简介 WKWebView 是苹果在 iOS 8 中引入的新组件,目的是给出一个新的高性能的 Web View 解决方案,摆脱过去 UIWebView 的老旧笨重特别是内存占用量巨大的问题. 苹果将 UIWebViewDelegate 与 UIWebView 重构成了 14 个类和 3 个协议,引入

JS运动基础(三) 弹性运动

加减速运动速度不断增加或减少速度减小到负值,会向反方向运动弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前值)/系数;  //6 , 7 , 8速度 *= 摩擦系数;   // 0.7 0.75终止条件距离足够近 并且 速度足够小 缓冲:var 速度 = (目标点 - 当前值)/系数;速度取整 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <me

javascript模板引擎artTemplate.js——template()方法

template(id, data)方法: id:必传,渲染模板的id. data:可选,一个Object对象. return:传data—>渲染完成html代码:不传data—>一个渲染函数. 示例一如下: <div id="content"></div> <script src="../js/template.js" type="text/javascript" charset="utf-8

ECharts.js学习(三)交互组件

ECharts.js 交互组件 ECharts.js有很多的交互组件,一般经常用到的组件有这些: title:标题组件,包含主标题和副标题. legend:图例组件,展现了不同系列的标记(symbol),颜色和名字.可以通过点击图例控制哪些系列不显示. xAxis:直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放左右两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠. yAxis:直角坐标系 grid 中的 y 轴,一般情况下

JS学习第一天----JS概述

JavaScript概述 今天开始正式学习JavaScript(以后简称JS).所谓的JS语言是面向web的编程语言,我们可能接触过面向过程和面向对象的编程语言.为什么要学习JS呢?因为绝大多数现代网站都使用了JS,并且所有的的现代web浏览器----基于桌面系统,游戏机,平板电脑和智能手机的浏览器----均包含了JS解释器,这使得JS能够称得上是史上使用最广泛的编程语言.JS也是前端开发工程师必须掌握的三种技能之一:描述网页内容的HTML,描述网页样式的CSS以及描述网页行为的JS. JS是一

1-7 basket.js localstorage.js缓存css、js

basket.js 源码分析 api 使用文档: http://t3n.de/news/basketjs-performance-localstorage-515119/ 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此可以使我们防止不必要的重新请求 js 脚本,提升网站加载速度. 可以到 basket.js 的 Github 上查看更多的相关信息. 由于之前在工作中使用过

Zepto源码分析之二~三个API

由于时间关系:本次只对这三个API($.camelCase.$.contains.$.each)方法进行分析 第一个方法变量转驼峰:$.camelCase('hello-world-welcome'); 源码: var camelize; /** * 字符串替换 * 使用replace第二个参数带回调 */ camelize = function(str) { return str.replace(/-+(.)?/g, function(match, chr) { return chr ? ch

Zepto源代码分析之二~三个API

因为时间关系:本次仅仅对这三个API($.camelCase.$.contains.$.each)方法进行分析 第一个方法变量转驼峰:$.camelCase('hello-world-welcome'); 源代码: var camelize; /** * 字符串替换 * 使用replace第二个參数带回调 */ camelize = function(str) { return str.replace(/-+(.)?/g, function(match, chr) { return chr ?