技术标签： javascript 开发语言 ecmascript 模板方法模式
art-template可以说是模板引擎中非常重要之存在了，不仅因为它的功能强大，还因为他容易入手，新手也可以轻松的理解，并且写出自己想要的效果。接下来由我简单介绍一下art-template的用法，在文章的末尾我会用一个art-template结合ajax做一个简单的搜索功能，来帮助小伙伴们更好的理解一下它的使用方法。如果有错误的话，希望大家多多指正。
1. 如果你已经下载了nodejs，你可以通过终端输入命令npm install art-template --save 即可下载
如果你没有安装node也没有关系，可以直接下载，下方附上下载地址： https://unpkg.com/art-template/lib/template-web.js
2.通过<script src=""></script>引入art-template文件
准备工作做完了，现在来介绍一下art-template的简单语法，标准语法支持基本模板语法以及基本 JavaScript 表达式，
1.在模板语法当中 输出数据 需要使用 { {}}
<div></div>
<script id="template" type="text/html">
{
{mag}}
</script> <script>
var html = template('template', {
mag:'ddsad'
})
document.getElementsByTagName('div')[0].innerHTML = html
</script>2.其中的变量都是由外部调用template方法传递进去的，其实这点很好理解，当我们写模板的时候，需要给模板添加一个id值，在script标签中，当我们想要使用template的时候就可以直接通过template方法调用,具体的使用方法template('id的名字',{
想要传入该模板中的数据
})
<script id="template" type="text/html">
{
{data}}
</script>
<script>
var tt=template('template',{
data:6
})
</script>3.在模板引擎中的循环语句还有条件语句都需要有闭合
在art-template中的循环可以直接使用{ {each 循环对象}}
<script id="template" type="text/html">
{
{if data > 5}}
<h2>这是大于5的</h2>
{
{else}}
<h2>这是小于5的</h2>
{
{/if}}
</script> <script id="template" type="text/html">
{
{each data}}
<h2>{
{$index}}</h2>
<h3>{
{$value}}</h3>
{
{/each}}
</script>4.是我认为最重要的一点，千万不要忘记把你想要使用的模板从原html结构中抽离出来，可能很多人不理解这句话，在下面我会具体介绍。
下面就是案例时间啦。这个案例是结合ajax，通过访问后端接口来拿到数据，通过模板引擎显示在页面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<!-- 模板位置 -->
<div class="content"></div>
</div>
<script src="./template-web.js"></script>
<script id="temp" type='text/template'>
<input type="text" placeholder="按下回车查询英雄">
<h2>{
{name}}</h2>
<span>名称</span><span class="name">{
{title}}</span><br>
<span>外号</span><span class="wname">{
{name}}</span><br>
<span>介绍</span><span class="jianjie">{
{story}}</span>
<img src={
{bg}} alt="">
</script>
<script>
/*
英雄信息
请求地址：https://autumnfish.cn/api/hero/info
请求方法：get
请求参数：name
*/
document.querySelector('input').onkeydown = function (e) {
//按下的按键如果是回车，就进行搜索功能
if (e.keyCode == 13) {
var xhr = new XMLHttpRequest()
xhr.open('get', 'https://autumnfish.cn/api/hero/info?name=' + this.value)
xhr.send()
xhr.onload = function () {
//转化成对象模式
var str=JSON.parse(xhr.response)
console.log(str);
var tt=template('temp',str)
//tt就是已经被转化成对象模式的数据
// console.log(tt);
document.querySelector('.content').innerHTML=tt
}
}
}
</script>
</body>
</html>当然啦，这是一个比较简单的案例，里面并没有用到循环还有条件语句，剩下的就靠小伙伴自己探索啦
文章浏览阅读10w+次，点赞762次，收藏4.7k次。到微软官网下载SQL Server Developer版本，现在的最新版本是SQL Server 2019 Developer。微软官网传送门：点击此处直达下载完成之后，在文件夹中找到刚才下载的文件，双击打开，打开之后的界面如下图所示。我们选择自定义安装，之后再选择要安装的位置，再点击安装，如下图所示点了安装之后会出现如下图所示的界面，我们需要等待它下载安装包，此过程等待的时间可能较长..._sqlserver在哪里写sql语句
文章浏览阅读1k次。var appName = navigator.appName; //浏览器的正式名称 var appVersion = navigator.appVersion; //浏览器的版本号 var cookieEnabled = navigator.cookieEnabled; // 返回用户浏览器是否启用了..._浏览器获取客户端基本信息
文章浏览阅读1k次。1、 为什么要记录笔记这个问题我印象中探讨过很多次，但是简单来讲就是方便日后在遇到相似问题时查询解决方式，并在记录笔记的过程汇总中对知识进行一轮新的复习。这样一生，如果作为一个技术人员来讲的话，我不可能只学习一门技能，需要学习的东西很多。当只会一门技能时，做不做笔记其实无所谓，但是当你学会多种技能时，你需要笔记这样一个第二大脑来帮助存储那些琐碎并不通用的知识，你自己的大脑来记忆通用性的知识，可以迁移的方法。在遇到问题时，知道做什么永远比怎么做更重要。1.1 知识的分类1.1.1 元认知解释：能指导_印象笔记建立个人知识体系
文章浏览阅读2.7k次，点赞13次，收藏96次。随着硬盘/flash容量不断增大，存储的数据也越来越多，早期单一的对应地址存放对应数据的方案已经无法满足我们的需求，因此一群大佬们便开始设计文件系统这样一个东西，用来管理硬盘/flash上的数据信息。本文主要分享关于FAT文件系统的详细设计。通过对FAT文件系统组成介绍，字段分析并采用新增文件实践分析的方式，详细阐述FAT文件系统的工作原理！_fatfs
文章浏览阅读3k次，点赞2次，收藏7次。企业架构师是使 IT 战略与业务目标保持一致的重要且不断增长的角色。无论您对云、应用程序、软件还是系统感兴趣，企业架构认证都可以提升您的职业生涯。如果您计划从事企业架构师 (EA) 的职业，那么认证是验证您的 EA 技能的好方法。作为 EA，您将负责为企业制定 IT 战略，以使业务目标与 IT 目标保持一致。公司严重依赖技术，因此 IT 现在是任何强大业务战略的基础部分。..._企业架构师认证
文章浏览阅读5.9k次，点赞2次，收藏29次。相比前两种搭建IP池的方法来说，付费代理IP更能满足用户的需求，但对于有些特殊要求的朋友来说，他们想一次提取很多个或者多次提取很多个，存放在本地建立的IP池里，这种方法在一定的程度上优化了方案。只不过长期下来的话，服务器的维护成本较高，并且需要定时的维护，消耗大量的时间，如果是个人的话，搭建起来后期维护的成本太高了，如果您不是高端玩家的话，不建议使用这种方式搭建IP池。相对于免费的代理IP来说，收费代理IP虽然需要付出一定的成本，但是IP资源都是真实IP，并且高匿性，稳定性也好。一、默认自动切换IP。..._如果制作代理ip池
文章浏览阅读1.6w次。An unknown error occurred during solution. Check the Solver Output on the Solution Information object for possible causes._an unknown error occurred during solution. check the solver output on the so
文章浏览阅读1.8k次。VUE项目里配置eslint lessless安装 less 和less-loader ，npm install less less-loader --save**修改webpack.base.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加 // 此种方法在控制台中标签样式显示的是style标签样式{ test: /\.less$/, loader: "style-loader!css-loader!less-loader",}_eslint less
文章浏览阅读1.4w次，点赞27次，收藏21次。大家好，我是Leo哥，上一节我们通过源码剖析以及图文分析，了解了关于委派筛选器代理和过滤器链代理的原理和作用。这节课我们接着学习SpringSecurity的过滤器，了解SpringSecurity中都有哪些核心过滤器。好了，话不多说让我们开始吧。以上便是本文的全部内容，本人才疏学浅，文章有什么错误的地方，欢迎大佬们批评指正！我是Leo，一个在互联网行业的小白，立志成为更好的自己。如果你想了解更多关于Leo，可以关注公众号-程序员Leo，后面文章会首先同步至公众号。
文章浏览阅读128次。面试 一般会叫你填两个表 1个是你的详细信息表 1个是面试题答卷 两个都要注意反正面是否都有内容不要遗漏，如果考你机试一般也有两种，就是程序连接数据库或一些基本的算法（二分查找，递归等），公司一般都是测试你的基本功是否扎实，如果你基本功好就游刃有余不必紧张！ asp.net面试题 1.new有几种用法 第一种:new Class(); 第二种:覆盖方法 public new XXXX()..._.net面试机试题
文章浏览阅读405次。1、官网的文档无论是学习Hadoop的hdfs、hive，还是hbase等，都要非常看重官网的文档。大数据的很多框架，都是Apache的顶级项目，各个组件框架的官网链接都可以从下面的链接进入：Hadoop：http://hadoop.apache.org/Avro: 序列化系统HBase: 分布式数据库Hive: 数据仓库Mahout: 机器学习与数据挖掘库Pig: 并行计算的高级数据..._方法论semma
文章浏览阅读411次，点赞8次，收藏21次。主题模型是自然语言处理和文本挖掘领域的一个重要研究方向,它可以自动发现文档集合中潜在的主题结构。其中,潜在狄利克雷分配(Latent Dirichlet Allocation, LDA)是最常用和最成功的主题模型之一。LDA是一种无监督的贝叶斯概率模型,能够有效地发现文档集合中隐藏的主题结构。LDA模型的核心思想是:每个文档可以表示为多个主题的概率分布,每个主题又可以表示为词语的概率分布。通过学习这些潜在的主题分布和词语分布,LDA模型可以发现文档集合中蕴含的语义主题信息。