网站模板套用教程 js网站模板素材

文章插图
端模板是什么？前端模板该如何实现？很多朋友可能对这个不太了解，那么，下面这篇文章将给大家介绍一下关于前端模板的原理以及简单的实现代码。
前端模板的发展模板可以说是前端开发最常接触的工具之一。将页面固定不变的内容抽出成模板，服务端返回的动态数据装填到模板中预留的坑位，最后组装成完整的页面html字符串交给浏览器去解析。
模板可以大大提升开发效率，如果没有模板开发人员怕是要手动拼写字符串。
var tpl = ‘’ + user.name + ‘’;
$(‘body’).append(tpl);
在近些年前端发展过程中，模板也跟着变化：
1. php模板 JSP模板
早期还没有前后端分离时代，前端只是后端项目中的一个文件夹，这时期的php和java都提供了各自的模板引擎。以JSP为例：java web应用的页面通常是一个个.jsp的文件，这个文件内容是大部分的html以及一些模板自带语法，本质上是纯文本，但是既不是html也不是java 。
JSP语法：index.jsp
<html>
<head><title>Hello World</title></head>
<body>
Hello World! 
<%
out.println(“Your IP address is ” + request.getRemoteAddr());
%>
</body>
</html>
这个时期的模板引擎，往往是服务端来编译模板字符串，生成html字符串给客户端。
2. handlebar mustache通用模板
09年node发布，JavaScript也可以来实现服务端的功能，这也大大的方便了开发人员。mustache和handlebar模板的诞生方便了前端开发人员，这两个模板均使用JavaScript来实现，从此前端模板既可以在服务端运行，也可以在客户端运行，但是大多数使用场景都是js根据服务端异步获取的数据套入模板，生成新的dom插入页码。对前端后端开发都非常有利。
mustache语法：index.mustache
Username: {{user.name}}
{{#if (user.gender === 2)}}
女
{{/if}}
3. vue中的模板 React中的JSX
接下来到了新生代，vue中的模板写法跟之前的模板有所不同，而且功能更加强大。既可以在客户端使用也可以在服务端使用，但是使用场景上差距非常大：页面往往根据数据变化，模板生成的dom发生变化，这对于模板的性能要求很高。
vue语法：index.vue
Username: {{user.name}}
<template v-if=”user.gender === 2″>
女
</div>
模板实现的功能无论是从JSP到vue的模板，模板在语法上越来越简便，功能越来越丰富，但是基本功能是不能少的：
变量输出（转义/不转义）:出于安全考虑，模板基本默认都会将变量的字符串转义输出，当然也实现了不转义输出的功能，慎重使用。条件判断（if else）：开发中经常需要的功能。循环变量：循环数组，生成很多重复的代码片段。模板嵌套：有了模板嵌套，可以减少很多重复代码，并且嵌套模板集成作用域。以上功能基本涵盖了大多数模板的基础功能，针对这些基础功能就可以探究模板如何实现的。
模板实现原理正如标题所说的，模板本质上都是纯文本的字符串，字符串是如何操作js程序的呢？
模板用法上：
var domString = template(templateString, data);
模板引擎获得到模板字符串和模板的作用域，经过编译之后生成完整的DOM字符串。
大多数模板实现原理基本一致：
模板字符串首先通过各种手段剥离出普通字符串和模板语法字符串生成抽象语法树AST；然后针对模板语法片段进行编译，期间模板变量均去引擎输入的变量中查找；模板语法片段生成出普通html片段，与原始普通字符串进行拼接输出。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：