blue-tmpl 可以使用在浏览器以及nodejs环境，可以作为nodejs框架express 或 koa2 的view engine使用；在浏览器中可以作为解析模板使用；
在koa2和express使用参考blue-tmpl-views的npm包的使用 https://www.npmjs.com/package/blue-tmpl-views
global
new BlueTmpl(opts)demand module , _require module:
_require('blue-tmpl')
demand('blue-tmpl');CommonJS module:
require('blue-tmpl')支持IE8-EDGE , chrome , firefox
BlueTmpl.install(constructor): install plugin
BlueTmpl.setAlias({Object}): set alias constant , replace in template alias constant value , key:constant name, value:constant value , set alias add in BlueTmpl.alias ，多层的对象将会解析成 用 '.' 链接的key；
在模板用可以使用
<script type="text/template" id="tmpl">
<tmpl name="tmpl1"></tmpl>
</script>
<script type="text/template" id="tmpl1">
<div>
123
<tmpl name="tmpl2"></tmpl>
</div>
</script>
<script type="text/template" id="tmpl2">
<div>456</div>
</script>來嵌入模板，name指向引入模板的id，如果id不存在则无视引入（可以在引入模块中引入别的模块，但是有一点需要注意，可能存在循环引入，tm1引入tm2,tm2引入tm1，这样会出现死循环，需要注意）；
生成为：
<script type="text/template" id="tmpl">
<div>
123
<div>456</div>
</div>
</script>动态模板：
默认模板中的<tmpl-include name="tmplId"></tmpl-include>
中引入是不存在的，会被忽略掉，可以动态添加原来插入不存在的模板，
使用实例方法update更新模板即可，更新后的是存在
<tmpl-include name="tmplId"></tmpl-include>中找到的动态模块。
只能作为解析模板内容，对应的BlueTmpl中有关dom的方法无法使用：
（nodejs环境中的tmpl-include是使用file来索引文件的地址，
在nodejs环境中使用了tmpl-include[name]来索引文件地址是不不做任何的处理的，
同理在浏览器环境中，tmpl-include[file] 也是不做任何处理的，
需要区分两个环境的使用）；
在nodejs环境中使用，<tmpl-include file="path"></tmpl-include>，
name指向模板的路径。也可以使用来包含一个extend的文件，
<tmpl-extend file="extend.tmpl" />。
如果索引的block是不存在的，会使用base中的block块默认的内容。
也可使用append:加到block的name中，这样设置的节点为在默认内容后插入。
<!--extend.tmpl-->
<html>
<body>
<header>
<tmpl-block name="header">
<div>假设这个block是不存在的，这里就会显示出来</div>
</tmpl-block>
</header>
<main>
<tmpl-block name="main">
<div>假设这个block是不存在的，这里就会显示出来</div>
</tmpl-block>
</main>
</body>
</html><!--include.tmpl-->
<div>
include content
</div><!--index.tmpl-->
<tmpl-extends file="extends.tmpl"></tmpl-extends> <!--设置包含当前tmpl的文件-->
<tmpl-block name="header">
<div>
我是header的内容
</div>
</tmpl-block>
<tmpl-block name="main">
<div>
我是main的内容
</div>
<tmpl-include file="include.tmpl"/>
</tmpl-block><!--这是解析的内容-->
<html>
<body>
<header>
<div>
我是header的内容
</div>
</header>
<main>
<div>
我是main的内容
</div>
<div>
include content
</div>
</main>
</body>
</html><script id="temp" type="text/template"></script>下列事例为设置新的开闭合标签（没有什么特殊情况，不推荐更换这个， 会出现一些意想不到的错误， 主要是有些标签需要通过转义的正则才能使用）；
<script id="temp" type="text/template">
...
{
open_tag:"{{",
close_tag:'}}'
}
</script>有关模板的使用open_tag和close_tag内写js代码 <% js 代码 %> ，<%= jscode %>为输出的js代码，<%- js代码 %> 转义的代码（如html的转义）内部可以写js表达式，只能是表达式（自执行函数需要分多行编写，建议不写在一行内，会出现预测不到的结果）；
new BlueTmpl({
data:{
a:1,
b:2
}
})
app.a // 1
app.b // 2<script type="text/template">
<div><%= _this_.a %></div>
<div><%= _this_.b %></div>
<div><%= _this_.c %></div>
<div><%= _this_.d %></div>
</script>
<script>
new BlueTmpl({
data:{
a:1,
b:2,
c:3,
d:4
}
}).render(null).appendTo('app');
</script>渲染后的结果
<div id="app">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div><div id="app"></div>
<script type="text/template" id="tmpl">
<div><%= title %></div>
<div><%= content %></div>
</script>
<script>
new BlueTmpl({template:"tmpl"}).render({title:'我是标题'，content:"我是内容"}).appendTo('app');
</script>渲染后的结果
<div id="app">
<div>我是标题</div>
<div>我是内容</div>
</div>async：模板的状态，设置为false为非异步模块，针对动态模板使用，在使用tmpl-router的时候为（必填）
<script>
...
{
methods:{
add:function(event,el){
this.render(arr).appendTo("#app",function(){
console.log('success');
});
}
}
}
</script><script id="temp" type="text/template">
...
{
events:function(){
this.on('on-add','click',this.add);
this.on('on-add','click',this.add);
this.on('on-add1','click',this.add);
}
}
</script><script id="temp" type="text/template">
...
{
mounted:function(){
console.log('success!');
}
}
</script>render({data}):绑定数据到当前模板实例上，返回一个Render类的实例对象，对象上有两个方法，appendTo和inserBefore,用来添加当前的数据模板到指定位置：appendTo(el,cb):把绑定的数据模板添加到指定的el的子节点上,cb为回调；inserBefore(el,ex,cb):把绑定的数据模板添加到指定的el的ex子节点前,cb为回调；
属性：template为解析完毕的dom string
on(bindEl[,bindClassName],eventType,fn): 事件绑定为事件委托绑定，事件的绑定都绑定到className上，即className对应你绑定的事件方法，建议绑定的className前带上on-好区分为模板事件， on中的fn默认带回两个参数(event,el);
app.on('on-add','click',this.add);off(bindEl[,bindClassName],eventType,fn): 移除事件，参数配置和on方法一样；对当前绑定委托事件移除对应的处理绑定
app.off('on-add','click',this.add);bind(el,bindClassName): 某个元素的事件中的绑定
app.bind(buttonEl,'on-add');unbind(el,bindClassName): 某个元素的事件中的绑定
app.unbind(buttonEl,'on-add');replaceBind(el,bindClassName): 某个元素的事件中的绑定,第二个参数为对象，key为需要修改的key，value为替换的值
app.replaceBind(buttonEl,{'on-add':'on-replaceAdd'}); // class="on-replaceAdd"addClass(el,bindClassName): 某个元素的事件中的绑定
app.addClass(buttonEl,'className className');removeClass(el,bindClassName): 某个元素的事件中的绑定
app.removeClass(buttonEl,'className className');replaceClass(el,bindClassName): 某个元素的事件中的绑定,第二个参数为对象，key为需要修改的key，value为替换的值
app.replaceClass(buttonEl,{'className':'newClassName'}); // class="on-replaceAdd"hasClass(el,className)：el元素中是否存在对应的className。返回true || false;
attr(el,attrName): 获取元素中对应的属性值，如果属性值前加上 bind- ，则属性内部绑定的为js表达式,当前属性内的this指向当前调用的BlueTmpl实例对象：
<div bind-id="123 + 456"> 元素 </div>app.attr(div,'bind-id'); //返回 579如果没有不添加绑定，则返回原来属性上的attrValue,都是字符串类型
<div id="123 + 456"> 元素 </div>app.attr(div,'id'); //返回 "123 + 456"<div bind-is-true="this.method()" id="el"> 元素 </div>new BlueTmpl({
methods:{
method:function(){
console.log(true);
}
}
});
app.attr(div,'bind-is-true'); // "true"也可以一次获取多个属性的值 attr方法中传入一个数字，每个项对应的是el中的id
app.attr(div,['bind-is-true','id']); // 返回 [true,"el"]attr方法中的attr参数如果为Object，则为设置的当前el中的attr
app.attr(div,{id:"prop",class:"name"}); // 设置div中的id="prop",class="name"prop方法，用于节点属性，即是绑定到el[prop]的属性；
prop(el,prop):如果第二个参数为Object则为设置属性，如果第二个参数为字符串时，则为获取属性；和attr方法类似，使用bind-开头的属性，该属性内为js的表达式；
app.prop(div,{id:"prop",class:"name",'bind-id':"'123'+1"});
// div['id'] =>'prop'
// div['class']=>"name"
// div['bind-id'] => 1231html(el,string):设置el中的innerHTML，如果不传参数，为获取innerHTML；
app.html(el,'123'); // 设置innerHTML <div>123</div>
app.html(el); // 123val(el,string):设置el中的value，如果不传参数，为获取value；
app.val(el,'123'); // 设置value el.value === '123' //true
app.val(el); // 返回 123text(el,text):设置el中的textContent，如果不传参数，为获取textContent；
app.text(el,'123'); // 设置value el.textContent === '123' //true
app.text(el); // 返回 123parent(el,hasClassName):获取父节点，如果第二参数为className，则查询第一个找到匹配的父类的节点；
<div class="parentClass">
<div class="parent">
<div>el</div>
</div>
</div>app.parent(el,'parentClass'); //返回查找到parentClass的父级节点
app.parent(el); //返回el的父级节点parents(el,hasClassName):获取父节点，如果第二参数为className，则查询找到匹配的所有父类的节点；
<div class="parentClass">
<div class="parentClass">
<div>el</div>
</div>
</div>app.parents(el,'parentClass'); //返回查找到所有存在parentClass的父级节点children(el):获取el的子节点
<div class="el">
<div>el1</div>
<div>el2</div>
<div>el3</div>
</div>app.children(el); //返回[el1,el2,el3]childrens(el,className):获取el的后代符合存在className节点
<div class="el">
<div class="child">
<div class="child">
<div class="child">
<div class="child"></div>
</div>
</div>
</div>
</div>app.children(el,'child');
//返回[div.child,div.child,div.child]next(el):获取el的子节点
<div class="el">
<div>el1</div>
<div>el2</div>
<div>el3</div>
</div>app.next(el1); //返回 el2nextAll(el):获取el的子节点
<div class="el">
<div>el1</div>
<div>el2</div>
<div>el3</div>
</div>app.nextAll(el1); //返回 [el2,el3]prev(el):获取el的子节点
<div class="el">
<div>el1</div>
<div>el2</div>
<div>el3</div>
</div>app.prev(el2); //返回 el1prevAll(el):获取el的子节点
<div class="el">
<div>el1</div>
<div>el2</div>
<div>el3</div>
</div>app.prevAll(el3); //返回 [el1,el2]siblings(el):获取el的子节点
<div class="el">
<div>el1</div>
<div>el2</div>
<div>el3</div>
<div>el4</div>
<div>el5</div>
<div>el6</div>
</div>app.siblings(el3); //返回 [el1,el2,el4,el5,el6]append(el,child)：给节点插入子节点
show(el)：显示el，设置display为初始值
hide(el)：隐藏el，设置display为'none'
toggle(el)：切换el状态
remove(el)：删除节点
create(elString)：创建一个新的节点，参数为一个节点字符串，返回一个节点文档对象,最外层的script的会被重新包装好，可允许的script；
update()：更新模板，主要是使用在动态模板中使用；具体查看的用法
cb(fn)：设置回调函数执行；
preventDefault(fn)：取消冒泡事件
offset(el)：获取当前元素对应到页面顶部的高度
setScrollTop(topNumber)：设置scroll的位置
htmlEncode(htmlString): 转义html标签
在tmpl的实例中，可以使用.fn中的方法（Fn类）；
.getEl(exp):返回获取到的节点
.getEls(exp):返回获取到的节点数组
.isArr(array):检测是否为数组，返回true/false;
.isObj(object):检测是否为对象，返回true/false;
.isFn(fn):检测是否为函数，返回true/false;
.isStr(string):检测是否为字符串，返回true/false;
.isNum(number|string):检测是否为数字，返回true/false;
.each(eachObj,handler):遍历器，handler中两个参数，第一个为获取到遍历的值，第二个为index/key;
.extend(obj1,obj2):合并两个obj对象，返回一下合并的对象;
.unique(arr):数组去重;
.clearNull(arr):清除数组中的空白值，返回清除完的数组;
.run(fn,context,args):在指定作用域内运行fn;
.cb(fn,context,args):在指定作用域内运行fn;
.unique(arr):数组中去重
.trimArr(arr):清空空值的数组
.copy(obj):深拷贝
.serialize(obj):序列化表单内容
###实例属性：
template：解析前的源码，建议不修改
vTmpl：解析后js的dom代码，建议不修改
config：最初配置的文件，建议不修改
methods：设置的methods的方法都会挂在实例属性上
data：设置的data值都会挂在这个实例属性上
注：如果data和methods存在同名，data的优先级比methods的高；