支付网站服务费怎么做分录,wordpress yum,上海网站快速排名,网站建设 百度文库为什么需要使用模板引擎#xff1f; 关于为什么要使用模板引擎#xff0c;按照我常说的一句话就是#xff1a;不用重复造轮子了。 简单来说#xff0c;模板最本质的作用是“变静为动”#xff0c;一切利于这方面的都是优势#xff0c;不利于的都是劣势。要想很好地实现“… 为什么需要使用模板引擎 关于为什么要使用模板引擎按照我常说的一句话就是不用重复造轮子了。 简单来说模板最本质的作用是“变静为动”一切利于这方面的都是优势不利于的都是劣势。要想很好地实现“变静为动”的目的有这么几点1. 可维护性后期改起来方便2. 可扩展性想要增加功能增加需求方便3.开发效率提高程序逻辑组织更好调试方便4.看起来舒服不容易写错从以上四点来看前端模板引擎体现的优势都不是一点两点的。其实最重要的一点就是视图包括展示渲染逻辑与程序逻辑的分离分离的好处太多了比如说后期的维护修改代码增加代码调试代码和应用开发模式MVC、MVVM都方便很多。 二. 选择Handlebars的原因 1. 全球最受欢迎的模板引擎Handlebars是全球使用率最高的模板引擎所以当之无愧是全球最受欢迎的模板引擎。Handlebars在许多前端框架中都被引入比如在MUI和AmazeUI等框架都推荐使用Handlebars。以AmazeUI为例,AmazeUI的文档中专门为Web组件提供了其Handlebars的编译模板2. 语法简单Handlebars的基本语法极其简单,使用{{value}}将数据包装起来即可,Handlebars会自动匹配响应的数值和对象.以下是一个最简单的模板: 三.使用Handlebars介绍 1. 下载Handlebars通过Handlebars官网下载: http://handlebarsjs.com./inst...通过npm下载: npm install --save handlebars通过bower下载: bower install --save handlebars通过Github下载: https://github.com/daaain/Han...通过CDN引入:https://cdnjs.com/libraries/h...2. 引入Handlebars通过script标签引入即可,和引入jQuery库类似:3. 创建模板步骤一: 通过一个script将需要的模板包裹起来步骤二: 在script标签中填入type和idtype类型可以是除text/javascript以外的任何MIME类型,但推荐使用typetext/template,更加语义化id是在后面进行编译的时候所使用,让其编译的代码找到该模板.步骤三: 在script标签中插入我们需要的html代码,根据后台给我们的接口文档,修改其需要动态获取的内 4. 在JS代码中编译模板以上述代码为例进行解释:步骤一: 获取模板的内容放入到tpl中,这里$(#myTemplate)中填入的内容为你在上一步创建模板中所用的id.提醒: 这里我使用的jQuery的选择器获取,当然,你可以使用原生javascript的DOM选择器获取,例如:docuemnt.getElementById(myTemplate)和document.querySelector(#myTemplate)步骤二: 使用Handlebars.compile()方法进行预编译,该方法传入的参数即为获取到的模板步骤三: 使用template()方法进行编译后得到拼接好的字符串,该方法传入的参数即为上一步预编译的模板步骤四: 将编译好的字符串插入到你所希望插入到的html文档中的位置,这里使用的是jQuery给我们提供的html()方法.同样,你也可以使用原生的innerHTML 四.实际运用中5个常用功能 1.Templates当您引入库之后我们可以愉快的书写模板了推荐的方式是通过特殊type的script标签来添加模板type属性是非常重要的否则浏览器会将它们看做javascrip解析。 模板具有一个很容易理解的语法可以使用html、普通文本和表达式表达式通常被包含在两对或三对花括号里可以包含变量或功能函数。模板需要编译之后才能使用如下面代码所示注意一点我们使用了jquery仅仅为了方便dom操作handlebars可以脱离jquery良好工作。 2. Expressions上面所示的例子表达式中的任何html代码将会被自动忽略这是一个非常实用的性能但是有的时候我们需要解析html那么就要用三个花括号{{{ }}}如下面代码所示。另外handlebars表达式允许嵌套值可以方便我们访问javascript对象的任何值。 3. ContextHandlebars利用了Mustache的强大特性context就是其中之一。我们可以把需要传递的数据放在这个javascript对象中使用#each、#with等方法可以方便的使用该对象的数据。看了下面这个案例那就明白了 4. HelpersHandlebars不允许在模板中使用javascript而是提供了一些列的功能函数(helpers)可以在模板中调用方便代码重用和创造复杂模板。使用表达式调用helpers的格式类似如此{{helpername}}同时也可以传递参数{{helpname 12345}}。开发新的helper使用registerHelper function下面代码演示了如何创建新的功能函数如何使用内置的功能函数 5. Block helpersBlock helpers像普通的功能函数一样但是有开始和结束标签(类似于内置的#if、#each等)可以修改包含的html的内容。创建更为复杂一些当时功能更加强大。经常使用它们重复使用功能、创建一大段可重用的html等。同样使用Handlebars.registerHelper()创建block helper不同的是我们需要使用第二参数回调函数。看看下面的代码 现在你基本上了解了handlebars的常用功能同样您可以通过Handlebars.js-官方网站可以获取更多案例、官方文档地址http://handlebarsjs.com/ 最后 模板引擎是我们做前端开发必备的一个知识对于我们快速开发和做出更加健全的优秀代码都是有帮助的。我在《8个要点教你轻松写出优秀Javascript代码》里面有讲过怎么写好我们的JavaScript代码大家可以去看一下。
