存在意义
目前大多数模版引擎都使用类似替换关键词的方式实现, 比较有名的如 smarty
这种方式不仅需要使用者学习第三种语法方式, 更重要的是编写的模版结构已是面目全非, 非常不便后期的维护
而这个模版引擎, 以浏览器可解析的规范作为语法, 以设置编辑器PHP标识符为"<!--<? ?>-->"来高亮语法, 达到高效可维护的目的
这种方式不仅需要使用者学习第三种语法方式, 更重要的是编写的模版结构已是面目全非, 非常不便后期的维护
而这个模版引擎, 以浏览器可解析的规范作为语法, 以设置编辑器PHP标识符为"<!--<? ?>-->"来高亮语法, 达到高效可维护的目的
- 该引擎是以html规范来开发视图层的方案
- 编辑器可语法高亮显示, 方便开发与维护
- 永远不删除 html 标签, 仅用 __del 属性标记
- 静态预览可以做原型使用, 动态编译不破坏html结构
- 模板默认会加载语言包等额外信息,节省开发时间
- 使用 htmlLoad 实现静态页面 include 的功能
开启引擎
- 框架配置preloaded加入"of_base_htmlTpl_engine"启动
- 模板的路径是 of_view::path() . '/html', 通过of_view::display('/html/xx.html') 或 include L::getHtmlTpl('/html/yy.html')引用模板
- 针对的模板是本地浏览无误的静态页 综合演示中有使用示例
- 通过框架配置htmlTpl修改语法标识符, 建议保持默认
- 通过 框架路径/?c=of_base_htmlTpl_tool 一键清除模版缓存, 生产模式下很有用
引擎解释
-
标签键_of.htmlTpl.tagKey紧跟html注释标签后的字符串,用来区分脚本注释与普通注释,如:<!--<? 这里写一些php脚本 ?>-->
#模版代码 <!-- html标签注释 --> <!--<? echo '执行php代码, 与结束符同行的字符串会被删除'; ?>-->abc def #解析效果 <!-- html标签注释 --> 执行php代码, 与结束符同行的字符串会被删除 def
-
属性前缀_of.htmlTpl.attrPre写在普通属性前面,用来区分脚本属性和普通属性,编译结束后会代替属性的值,如 _value="php脚本"
#模版代码 <!--<? //定义变量 $str = 'bcd'; ?>--> <input value="自动补全 echo" _value="$str"> <input value="复杂的语法方式" _value="echo $str;"> <input value="引号切换使用技巧" _value='"a{$str}e"'> <input _='"abcde=\"无属性的将会直至输出: {$str}\""'> #解析效果 <input value="bcd"> <input value="bcd"> <input value='abcde'> <input abcde='无属性的将会直至输出: bcd'> -
功能前缀_of.htmlTpl.funcPre用来影响解析行为的属性关键词,如:<input __del >这个标签标记删除(__del)
#模版代码 <!--<? //定义变量 $str = 'bcd'; ?>--> <div> <span abc="替换标签内容" __html="$str"> <span>1</span> <span>2</span> </span> <span abc="无值删除自身及子标签" __del> <span>1</span> <span>2</span> </span> <ul abc="有值删除属性" def="多属性用空格" __del="abc def"> <li>1</li> <li>2</li> </ul> <ul abc="操作 $_vis 真假动态显(true)隐(false)标签" __del="$_vis=''"> <li>1</li> <li>2</li> </ul> </div> #解析效果 <div> <span abc="替换标签内容">bcd</span> <ul> <li>1</li> <li>2</li> </ul> </div> -
脚本位置(1)写在带有标签键的注释中,如:<--<? 这里写一些php代码 ?>--> 与"-->"在同一行的文本会被删掉
(2)或写在脚本属性中,如:<input _value="echo '输出文本';" >) -
脚本写法(1)符合URL路径结构的写法 : xx/以当前文件所在位置开始寻径, /xx以网站根目录开始寻径, http://正常解析
(2)以';'或'}'结尾的脚本当逻辑程序运行, 如: _value="'abc'" 等效 _value="echo 'abc';"
(3)其它模式当运算表达式处理 -
头部特性(1)写在头部的注释脚本会优先运行
(2)涉及路径和标题的脚本写法只能使用(1)或(3)的模式
(3)title动态内容可以<title __html="time()">原标题</title>
(4)包含路径的脚本会放在body最下面执行,其它的样式和脚本会放在body最上面执行理 -
编译时触发事件of::event('of_base_htmlTpl_engine::compile', 符合回调结构);
回调函数接受参数为, 配合 getHtmlTpl 来动态加载共有头等文件 {
"tplObj" : &模板的hParse对象
"tplDir" : 模版的磁盘路径
}
语法演示
| 演示描述 | 源代码 | 演示效果 |
|---|---|---|
| 属性演示 | <input _style="'color: red;'" _="'value=_属性演示'" value="原属性" > | |
| __del 演示 | <input __del="value" value="删除以' '为分割符的属性,为空删除当前节点" > | |
| __html 演示 | <div __html="'<font color=\'red\'>这里写php</font>'" ><span>原html</span></div> | 这里写php |
| 普通注释 | <!-- echo '这是普通注释'; --> | |
| 注释脚本 | <!--<? echo '运行php脚本'; ?>-->这一行会被删除在script中不会删除这一行 上一行会被删除 | 运行php脚本上一行会被删除 |
| js 脚本 | <script type="tpl">可以将 type 设置成 tpl,这样在浏览时便不会执行 document.write("<!--<? echo '输出字符串'; ?>--> : 123"); </script> | 输出字符串 : 123 |
| 等效写法 | <img src="http://www.baidu.com/img/baidu_jgylogo3.gif?v=02045799.gif" /> <img _src="http://www.baidu.com/img/baidu_jgylogo3.gif?v=02045799.gif" /> <img _src="echo 'http://www.baidu.com/img/baidu_jgylogo3.gif?v=02045799.gif';" /> <img _src="'http://www.baidu.com/' . 'img/baidu_jgylogo3.gif?v=02045799.gif'" /> |
|
| 动态标题 | <title __html="time()">原标题</title> | 每次刷新页面会读取时间戳 |
| 路径解析 | <input _value="xx/mm.js" > | |
| for循环演示 | <!--<? for($i = 1; $i < 6; ++$i) { ?>--> <input type="text" value="1" _value="$i"> <!--<? /* 可以用"/* ... */"方式实现批量删除标签不推荐 ?>--> <input type="text" value="2"> <input type="text" value="3"> <input type="text" value="4"> <input type="text" value="5"> <!--<? */ } ?>--> |
htmlLoad
有个问题困扰着前端工程师很多年, 那便是 html 无法像其它语言那样使用 "include" 功能
现在通过这个 htmlLoad 可以解决这个问题 下载源码
现在通过这个 htmlLoad 可以解决这个问题 下载源码
/**
* 描述 : 使 js 可以实现 include 功能
* 示例 <script src="tool.js" include="head.html"></script>
* src 定位到该脚本, include 是相对该脚本路径的.html文件
* 注明 :
* 建议本脚本仅做UI开发使用
* 为了方便后端语言整合, 不要使用在js中
* chrome edge 浏览器本地调试时, 需带上 --allow-file-access-from-files 启动参数
* firefox 浏览器本地调试时, 访问"about:config" 将 security.fileuri.strict_origin_policy 改为 false
*/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>js include 演示</title>
<script src="code/load.js" include="../head.html">此处include为相对code的路径</script>
</head>
<body>
<script>alert('主体展示')</script>
主体内容
<script>L.open('tip')('静态页面调用框架集成插件演示成功', false);</script>
<script src="code/load.js" include="../foot.html"></script>
</body>
</html>
如果需要静态页面中调用 of 中封装好的js插件时, 只需要在一个共用文件中加如下代码即可
<script __del>
/**
* 描述 : 本地可调用 of 框架中的js扩展
* 注明 : 需要放在 htmlLoad 的加载文件中, 如上例中的"head.html"中
*/
+function () {
//当前文件, htmlLoad 自动填充不要修改
var src = "";
//配置系统根目录
window.ROOT_URL = src + "../..";
//配置框架根目录
window.OF_URL = ROOT_URL + "/include/of";
//配置视图根目录
window.VIEW_URL = ROOT_URL + "/view";
//加载jquery
document.write('<script src' + '="' + OF_URL + '/att/link/jquery.js"></' + 'script>');
//加载L.js addin属性以项目为根目录可指定js集成插件位置
document.write('<script src' + '="' + OF_URL + '/att/link/L.js" addin=""></' + 'script>');
}();
</script>