weui的官方范例,因为要充分地展示weui的每个方面,所以在example里面使用了自定义的jscss。在上一篇文章中,苏南大叔主要分析的是css的部分。本文中,要分析的是js模板部分。文章内容是非常水的,写作的目的就是:weui官方范例这种加载模板的方式,是非常的少见,而且又是鹅厂出品的代码。所以,苏南大叔在这里的态度,更多的是围观了。目前为止,个人还没有想出这种模版处理方式的方便之处,不过存在即为合理。学习一下思路又何妨?

苏南大叔:weui官方范例解析:特殊类型的script标签加载模版 - weui-template
weui官方范例解析:特殊类型的script标签加载模版(图4-1)

本文测试环境:mac/weui@1.1.3

定义模板

下面的代码来自weui官方网站:

对于模板的定义,它用了下面这种类似的神奇模版定义方式:

<script type="text/html" id="tpl_demo">
  <h1>hi,[UserName]</script>
  <script>alert('1');</script>
</script>

苏南大叔:weui官方范例解析:特殊类型的script标签加载模版 - weui-template-js-quote
weui官方范例解析:特殊类型的script标签加载模版(图4-2)

jstype是:text/htmlhtml代码直接写在js区域里面,而且<script>标签里面嵌套<script>标签。真心是刷新三观。这究竟是什么样的操作?

非官方模板解析方式

下面的是非官方的js解析方式,还可以传递参数:

var html = document.getElementById("tpl_demo").innerHTML;
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var source = html.replace(reg, function (node, key) { return {'UserName': 'world'}[key]; });
document.getElementById("container").innerHTML=source;

苏南大叔:weui官方范例解析:特殊类型的script标签加载模版 - weui-js-template
weui官方范例解析:特殊类型的script标签加载模版(图4-4)

总结

特殊typescript,其实也有碰到几次了。本次定义的是text/html,其实这个值是可以自己定义的,写啥奇怪的值都可以。官方可以识别的type就这么几种:

  • text/javascript
  • text/ecmascript
  • application/javascript
  • application/ecmascript

更详细的说明,可以参见下面的这个链接:

更多weui相关分析文章,欢迎参考苏南大叔的文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   weui

本站的忠实读者小伙伴,正在阅读下面这些文章: