gettingStarted htmlTpl

模板引擎

存在意义

目前大多数模版引擎都使用类似替换关键词的方式实现, 比较有名的如 smarty
这种方式不仅需要使用者学习第三种语法方式, 更重要的是编写的模版结构已是面目全非, 非常不便后期的维护
而这个模版引擎, 以浏览器可解析的规范作为语法, 以设置编辑器PHP标识符为"<!--<? ?>-->"来高亮语法, 达到高效可维护的目的

1. 该引擎是以html规范来开发视图层的方案

2. 编辑器可语法高亮显示, 方便开发与维护
3. 永远不删除 html 标签, 仅用 __del 属性标记
4. 静态预览可以做原型使用, 动态编译不破坏html结构
5. 模板默认会加载语言包等额外信息,节省开发时间
6. 使用 htmlLoad 实现静态页面 include 的功能

开启引擎

1. 框架配置preloaded加入"of_base_htmlTpl_engine"启动
2. 模板的路径是 of_view::path() . '/html', 通过of_view::display('/html/xx.html') 或 include L::getHtmlTpl('/html/yy.html')引用模板
3. 针对的模板是本地浏览无误的静态页 综合演示中有使用示例
4. 通过框架配置htmlTpl修改语法标识符, 建议保持默认
5. 通过 框架路径/?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=&quot;无属性的将会直至输出: {$str}&quot;"'>
  #解析效果
  <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 可以解决这个问题 下载源码

/**
 * 描述 : 使 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>