位置: 编程技术 - 正文

详解Javascript模板引擎mustache.js(js 模块 modules)

编辑:rootadmin

推荐整理分享详解Javascript模板引擎mustache.js(js 模块 modules),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript demo,javascript 模块,javascript demo,javascript modules,javascript module,js模块的使用规则,js模块的使用规则,javascript mod,内容如对您有帮助,希望把文章链接给更多的朋友!

本文总结它的使用方法和一些使用心得,内容不算很高深,纯粹是入门内容,看看即可。不过要是你还没有用过此类的javascript引擎库,那么本文还是值得你一读的,相信在你了解完它强大的功能和简单用法之后,一定会迫不及待地将之用于你的工作当中。

1. 从一个简单真实的需求讲起目前公司做了一个统一的开发平台,后台封装了MVC的接口和数据增删改查的接口,前端我自己用bootstrap+手写各类组件的方式弄了一套开发框架;集成了CAS,在CAS的基础上,首先做了一套统一权限管理系统,这个系统是我们开发平台的第一个子系统,用来管理配置所有子系统的菜单和授权以及管理整个公司的组织结构和用户,后来我们又陆陆续续地开发了业务系统A和业务系统B。由于这三个子系统对应的是三个java工程,最终部署的时候,在tomcat里部署了三个应用,现在有一个需求是:

1)在每个系统里登录之后,点击系统名称,可以展开一个下拉菜单,显示所有有权限的子系统; 2)然后用户点击其它子系统,就可以切换到所选中的系统去,到了其它系统之后,由于都做了这个下拉菜单,所以也可以再从该系统切换回来; 3)如果用户只有一个系统的权限,则不显示下拉菜单。

需求其实挺简单,原型大概是这个样子:

功能实现方法是,在每个子系统登录完成之后,调用获取系统列表的接口,用js渲染一个下拉菜单出来,该接口返回的格式为:

如果我们不采用模板引擎,那么传统的方式去解析这个数据并把它转变成html串的方法通常是:

这种拼接字符串的方式有诸多弊端:

1)麻烦,尤其是拼接逻辑复杂,拼接的串很长时; 2)不易维护,稍有不慎就会弄错标签的对应关系; 3)结构不清晰。

能够简化这个场景的工具就是模板引擎,模板引擎的技术后台最先有,如果你用过jsp,就一定知道jsp也就是一个模板,用来解析呈现数据用的,其它后台模板引擎还有velocity和freemarker等等。前端的模板引擎也有很多,mustache.js算是比较流行的一个,git上有多个赞,如果这个问题我们用mustache.js来做,就可以变成这样:

对比两个代码,会发现后面的代码,相对于前面的有以下这些优点:

1)结构清晰,所有待渲染的html都定义在一个位置,而且没有任何拼接的现象; 2)逻辑清晰,那些在模板里的标记,实际上与模板渲染时传进去的对象的属性名称都是对应的; 3)易维护,要增删标签都只用调整模板对应的数组就行了。

通过这个例子,应该能对模板引擎有了一个大概的认识,这类工具在前端开发中越来越普遍,尤其是前后端分离的应用中用的更多,已经是这类应用的基础架构的内容了。mustache.js是一个非常简单易用的引擎实现,接下来的内容将会对这个工具常用的模板配置一一介绍并配合实用的例子说明,希望能让你更喜欢这个工具:)

2. mustache的用法mustache的使用非常简单,先通过script标签引入它的js文件,然后按下面的步骤操作: 1)定义模板字符串 定义模板有2种方式,方式一就是在前面部分中看到的,直接用[...].join('')的方式在js代码中定义,方式二直接把模板内容用script定义在html中:

然后在编译模板之前,通过获取tpl的innerHTML定义原始模板串:

具体要用哪种方式来定义模板,可以参考下面的建议: 如果这个模板要用于多个页面,推荐把模板定义在js代码中;如果这个模板只用于当前页面,推荐直接定义到script标签中,管理更方便。 2)预编译模板 假设原始模板串已经定义好,并用tpl变量来引用,就可以通过下面的代码来预编译模板:

要注意的是,经过预编译之后的tpl已经不再是原来的模板串了,连数据类型都变成数组类型了,这都是预编译的结果。 3)渲染模板 渲染方式很简单:

obj引用的是一个数据源对象,mustache会把模板中那些属性标签,根据约定的规则,替换成对象的内容。htmlAfterRendered就是替换之后的字符串,你可以用它完成你需要的DOM操作。

3. mustache的思想mustache的核心是标签和logic-less。从前面的代码中可以看到定义模板时,使用了{{name}}这样的标记,还有{{#systems}}{{/systems}},这就是mustache的标签,只不过它用{{}}替代了<>,以免跟html标签的<>混淆。logic-less,可以翻译为轻逻辑,因为在定义模板的时候不会用到if-else,不会有循环式的编码,一切都用标签来解决,它的标签非常简单,但是能应付所有场景,阅读完本文之后,你会惊讶地发现,只要用以下几个标签几乎就能解决所有的问题: {{prop}} {{{prop}}} {{#prop}}{{/prop}} {{^prop}}{{/prop}}

4. {{prop}}标签这个标签是mustache模板里用的最多的,可以将数据源对象上prop属性对应的值,转换成字符串进行输出,以下是同一个属性,对应不同类型的值,在经过mustache渲染之后输出结果的测试(前后那根短横线的作用是为了让这个标签的渲染结果看起来更清楚):

详解Javascript模板引擎mustache.js(js 模块 modules)

mustache渲染{{prop}}标签的逻辑是:

1)如果prop引用的值是null或undefined,则渲染成空串; 2)如果prop引用的是一个函数,则在渲染时自动执行这个函数,并把这个函数的返回值作为渲染结果,假如这个返回值为null或者undefined,那么渲染结果仍然为空串,否则把返回值转成字符串作为渲染结果(注意最后一个用例,直接把函数代码渲染出来了); 3)其它场景,直接把prop引用的值转成字符串作为渲染结果。

由于默认情况下,mustache在渲染prop时,都是对prop的原始值进行url编码或者html编码之后再输出的,所以有一个用例的渲染结果,把英文的单引号,转成了html实体符:

如果要阻止这种编码行为,只要把标签形式改成{{{prop}}}就可以了:

5. {{#prop}}{{/prop}}标签这对标签的作用非常强大,可以同时完成if-else和for-each以及动态渲染的模板功能。在这对标签之间,可以定义其它模板内容,嵌套所有标签。接下来看看mustache如何利用这个对标签完成这三个模板功能。

1) if-else渲染

只有prop属性在数据源对象上存在,并且不为falsy值(javascript 6个falsy值:null,undefined,NaN,0,false,空字符串),并且不为空数组的情况下,标签之间的内容才会被渲染,否则都不会被渲染:

以上用例中特殊点的就是prop属性引用的是一个函数的时候,{{#prop}}会自动调用这个函数,并把函数的返回值作为if-else渲染逻辑的判断依据,也就是说如果这个函数返回的是falsy值或者是空数组的时候,那么这对标签之间的内容还是不会显示。

2)for-each渲染

当prop属性所引用的是一个非空数组时,这对标签之间的内容将会根据数组大小进行迭代,并且当数组元素为对象时,还会把该对象作为每一次迭代的上下文,以便迭代时的标签可以直接引用数组元素上的属性:

从这个测试结果中可以看到,{{#prop}}{{/prop}}之间的模板内容根据prop所引用的数组迭代了两次,并且在这对标签内部直接通过{{name}}标签,输出了数组元素对象上的name属性对应的值。

如果prop属性所引用的是一个函数,但是这个函数返回值是一个数组类型,那么仍然会进行for-each渲染:

3) 动态渲染

当prop属性所引用的是一个函数,并且这个函数的返回值还是一个函数的话,mustache会再次调用这个返回的函数,并给它传递2个参数:text表示原来的模板内容,render表示mustache内部的执行渲染的对象,以便在这个函数内部可以通过这render对象,结合原来的模板内容,自定义渲染的逻辑,并把函数的返回值作为渲染结果(这个返回值渲染的逻辑跟{{prop}}标签完全一样):

6. {{^prop}}{{/prop}}标签这对标签,与{{#prop}}{{/prop}}的if-else渲染执行相反逻辑,即只有在prop属性不存在,或者引用的是一个falsy值,或者是一个空数组的时候才会显示标签之间的内容,否则不会显示:

7. 渲染上下文mustache有一个渲染上下文栈的概念,在模板渲染的开始的时候,把数据源对象作为当前的渲染上下文 ,并压入上下文栈。在遇到{{#prop}}标签的时候,如果prop引用的是一个对象或者是一个非空的对象数组,或者prop引用的是一个函数,并且这个函数返回的是一个对象或者是一个非空的对象数组,就会把这个对象或者数组的元素作为当前渲染上下文,并压入上下文栈,当这个标签渲染完毕的时候,才会把该上下文弹出,恢复上一层标签所使用的上下文。由于{{#prop}}标签可以多层嵌套,所以在有的模板渲染的时候,会有多层上下文存在。mustache在解析标签时,根据标签名称查找当前上下文对象是否存在该属性,如果不存在就会到上层上下文对象中查找,只要在某一层找到,就会用该层上下文对象的值来渲染。

上面这个例子中,在渲染{{#address}}{{/address}}时,上下文对象已经变成了obj2.person.student.address所引用的对象,所以{{home}}渲染时用到的就是obj2.person.student.address.home属性,而{{age}}渲染时,由于obj2.person.student.address不存在age属性,所以就会到上层上下文中查找,一直到obj2对象才找到,于是就把obj2.age当成了渲染结果。

还有一种方法,不用通过{{#prop}}创建新的上下文,也可以做到递归渲染属性的属性:

这种方法其实很好理解,只要知道当前的上下文对象,再根据属性操作串person.student.address.home,当然就能找到需要的值了。

本文介绍了一个非常好用的前端模板引擎,涵盖的内容包含了在日常工作肯定会用到的知识点,希望大家喜欢。

高性能JavaScript循环语句和条件语句 一、循环语句众所周知,常用的循环语句有for、while、do-while以及for-in,forEach。除了for-in和forEach性能略低外,平时我们对前三者的选择更多的是基于需

学习JavaScript设计模式之模板方法模式 一、定义模板方法是基于继承的设计模式,可以很好的提高系统的扩展性。java中的抽象父类、子类模板方法有两部分结构组成,第一部分是抽象父类,

属于你的jQuery提示框(Tip)插件 插件可以满足常用的提示显示,支持个方向,支持边框、背景色、文本颜色自定义,支持位置微调、层级微调、宽度间距等参数调整。先看看效果:tip

标签: js 模块 modules

本文链接地址:https://www.jiuchutong.com/biancheng/383745.html 转载请保留说明!

上一篇:JavaScript优化专题之Loading and Execution加载和运行(js优化108条建议)

下一篇:高性能JavaScript循环语句和条件语句(高性能javascript的内容简介)

  • 公司从业人员包括老板吗
  • 利润表中其他业务利润是什么
  • 现金流量表现金指的什么
  • 发票认证当月必须抵扣吗
  • 一般纳税人增值税申报操作流程
  • 兼职业务拿提成合法吗
  • 股权评估与资产评估的关系
  • 商誉转销会计分录
  • 公司拓展训练入什么会计科目核算做分录?
  • 稽查查补税款企业所得税
  • 公司换法人公司账户怎么办
  • 国税注销地税没注销怎么办
  • 调整交易性金融资产
  • 小规模没有进项票可以开销项票吗
  • 普通发票开票步骤
  • 无形资产摊销年限平均法怎么算
  • 财务费用利息收入在损益表中怎么填
  • 公司账户电子承兑
  • 定金转为货款如何表述
  • 合伙企业收到对公转账
  • 申请办理银行承兑流程
  • 固定资产销售账务处理的例题
  • 企业有哪些项目名称
  • microsoft edge怎么设置关闭所有网页
  • biospwds最新版
  • 小规模纳税人销售额超过500万
  • 此应用无法在你的电脑上运行w11
  • psdrvcheck.exe - psdrvcheck是什么进程 有什么用
  • 微信企业公众号开发平台
  • 初识年岁尚温柔 小说 免费
  • 电脑桌面调出键盘
  • 高德地图api获取当前经纬度的城市地图
  • 君子兰的养殖方法
  • AI:ModelScope(一站式开源的模型即服务共享平台)的简介、安装、使用方法之详细攻略
  • php -r
  • thinkphp+vue
  • java使用循环结构输出九九乘法表
  • macps字体怎么导入
  • 小规模纳税人应交税费科目设置
  • 开发日志模板
  • 账龄划分中有借有贷怎么分析
  • 个体户季报网上申报怎么填写
  • 年底做账流程
  • 更衣柜属于什么费用
  • 无发票材料可以入材料账吗
  • 发行优先股的发行费用
  • 跨年度冲红字发票怎么冲
  • 城镇土地税需要计税吗
  • 技术合同免税备案流程
  • 应收帐款坏账处理
  • mysql开发教程
  • SQLserver导入Excel文件到表
  • sqlserver数据库恢复挂起状态
  • mac安装mysql没看见初期密码
  • windowspe安装win7
  • linux计划任务怎么写
  • windows xp sp3 vl
  • linux块设备读写和回写
  • win8开机进入开始界面
  • ubuntu 软件删除
  • windows右键不能用了
  • js获取中文拼音
  • nodejs入门教程
  • 详细的收藏
  • android:ellipsize="marquee"
  • 安卓图片缓存太占空间
  • unity给物体添加重力
  • jquery页面
  • jQuery简单实现tab选项卡切换效果
  • android获取屏幕大小
  • pycharm flask框架
  • 小规模现代服务的税率是多少啊怎么算
  • 电子税务局实名认证
  • 车险专票怎么做账
  • 北京税务分所怎么样啊
  • 开票风险预警机制蓝色预警怎么办
  • 保险公司优惠的款项什么时候退款
  • 哪些情况要交房租
  • 江西省国家税务局网站
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设