华侨大学英文网站建设,南昌网站建设专业公司,武进网站建设,windows7优化大师官方下载使用场景
在实际开发中#xff0c;一般都是使用动态请求数据来更新页面#xff0c;服务器端通常返回json格式的数据#xff0c;正常操作是我们手动的去拼装HTML#xff0c;但麻烦且容易出错#xff0c;因此出现了一些用模版生成HTML的的框架叫js模板引擎如#xff1a;jq…使用场景
在实际开发中一般都是使用动态请求数据来更新页面服务器端通常返回json格式的数据正常操作是我们手动的去拼装HTML但麻烦且容易出错因此出现了一些用模版生成HTML的的框架叫js模板引擎如jquery-tmpl,artTemplate等它们能够实现动态的修改DOM数据使用简单易懂的语法结构通过JSON的格式传递和绑定数据。 模板引擎好处
1、实现动态修改DOM数据
2、实现模板的复用 服务端返回数据格式常见的格式JSON
{name:zhang,age:18,address:山西省
}
{code:0,list:[{name:zhang,age:18,address:山西省},{name:wang,age:10,address:河北省},{name:li,age:45,address:北京省}]
}
jquery-tmpl template
介绍
jquery-tmpl 是基于JavaScript框架的jquery 插件用来快速渲染数据。
下载地址
GitHub - BorisMoore/jquery-tmpl: The original official jQuery Templates plugin. This project was maintained by the jQuery team as an official jQuery plugin. It is no longer in active development, and has been superseded by JsRender.
说明
GitHub是一个开源的图外代码托管服务平台。它以各种不同的编程语言托管您的源代码项目并跟踪每次迭代所做的各种更改。该服务可以通过使用git一种在命令行界面中运行的修订控制系统来完成此操作。
cdn 地址 http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js
快速体验
1、引入相关文件准备数据
注意该模板引擎基于jquery,所以文件顺序为1- jquery 2-jquery-tmpl
示范
!-- 相关文件注意版本和数据以下版本为示例 --
script srcjs/jquery1.42.min.js/script
script srcjs/jquery-tmpl.js/script
!-- 数据 --
scriptvar info {name:zhang,age:18,address:山西省}
/script
2、准备DOM
div classmineh2个人信息/h2div classinfo idinfo/div
/div
3、准备tmpl模板
注意type类型默认为text/javascript。此处需要更改为text/x-jquery-tmpl。
script typetext/x-jquery-tmpl idinfo_tmplp姓名${name}/pp年龄${age}/pp地址${address}/p
/script
4、渲染模板
// 方式一
var infoTmpl $(#info_tmpl).tmpl(info);
$(#info).html(infoTmpl) // DOM的html为模板
// 方式二
var infoTmpl $(#info_tmpl).tmpl(info);
infoTmpl.appendTo($(#info)) // 模板追加加到DOM 常用语法 ${} 或者 {{ }} 输出变量 可以使用表达式 span${name}/span // ${具体key值} 该写法必须是数组对象里的key或者each的别名 纯对象 该写法不生效
span{{ Number(age)1}}/span {{each}} 循环$value $index访问迭代变量 也可以自定义迭代变量 {{each departs}}div{{ $value}}/div
{{/each}} {{each(i,user) users}}div${i1}:{{ user.name}}/divdiv${i1}:{{ user.age}}/divdiv${user.name}/div{{/each}} {{if}} {{else}} {{if Status}}spanStatus${Status}/span
{{else App}}spanApp${App}/span
{{else}}spanNone/span
{{/if}} {{if hasMoney age20}}h3有钱/h3
{{/if}}{{if hasMoney age20 namezhao}}h3有钱/h3
{{/if}} 注意不支持复杂的if条件可以使用函数来判断
// 条件是函数
{{if isMoney(hasMoney) age20}}h3有钱/h3{{/if}} function isMoney(hasMoney){ // 实参必须存在return hasMoney? true:false
} // 函数多个传参
{{if isMoney(hasMoney,age) namezhao}}h3有钱/h3
{{/if}} function isMoney(hasMoney,age){if(hasMoney age1){return true}else{return false}
} tmpl() 准备DOM div classuser-list iduser_list/div 准备模板 script typetext/x-jquery-tmpl iduser_list_tmpl{{each list}}li{{ $value}}/li{{/each}}/script 渲染模板 内部js 注意以下代码需要添加到 jquery-tmpl 模板下面 外部js 注意 js 文件位置要放在jquery-tmpl 模板下面 var arr [1,2,3,4]
$(模板).tmpl(data)
// 将数据渲染到模板里
var listTmpl $(#user_list_tmpl).tmpl({list:arr});// 将模板添加到DOM里
listTmpl.appendTo(#user_list);
// $(#user_list).html(listTmpl)
使用场景 渲染简单数组和简单对象 ul iddata_arr/ul script typetext/x-jquery-tmpl iddata_arr_tmpl{{each data}}li{{ $value}}/li!-- li{{ $index}}:{{ $value}}/li --{{/each}}
/script script// 对于简单数组而言必须使用each循环var dataArr [公章,财务章,合同章,法人章]// 对于简单对象而言可直接将对象放入模板根据key值渲染若使用each做循环时需自定义key,形式如{data:dataArr}var dataArr {name:zhang,age:20}// 渲染DOMvar arrTmpl $(#data_arr_tmpl).tmpl({data:dataArr})$(#data_arr).html(arrTmpl)
/script 渲染数组对象 ul iddata_arr_obj/ul script typetext/x-jquery-tmpl iddata_arr_obj_tmpl{{each data}}li${name}的年龄是${age}/li !-- {{ $value.name}} --{{/each}}
/script scriptvar dataArray [{name:zhang,age:18},{name:wang,age:22},{name:ding,age:8},{name:zhao,age:40}]var listTmpl $(#data_arr_obj_tmpl).tmpl({data:dataArray})$(#data_arr_obj).html(listTmpl)
/script 渲染复杂对象 ul iddata_obj/ul script typetext/x-jquery-tmpl iddata_obj_tmpl{{each data}}li{{ $index}}——${name}的年龄是${age}/li{{/each}}
/script scriptvar dataArray {A:{name:对象A,age:18}, B:{name:对象B,age:18},}var listTmpl $(#data_obj_tmpl).tmpl({data:dataArray})$(#data_obj).html(listTmpl)
/script artTemplate
官网文档
介绍 - art-template
快速上手
1、引入相关文件并引用
访问以下地址复制文件内容保存至template-web.js
https://unpkg.com/art-template4.13.2/lib/template-web.js
script srcjs/template-web.js/script
scriptvar infoData {name:zhang,age:18,address:山西省}
/script
2、准备DOM
div classmineh2个人信息/h2 div classinfo idinfo/div
/div
3、准备模板
注意type类型 text/html
script idtpl-user typetext/htmlh2{{name}}的年龄是{{age}}住在{{address}}/h2
/script
4、渲染模板
var tem template(tpl-user,infoData)
template(模板id,数据)
document.getElementById(info).innerHTML tem
常用语法
输出变量 或者使用表达式
{{value}}
{{data.key}}
{{data[key]}}
{{a ? b : c}}
{{a || b}}
{{a b}}
示例
script idtpl-user typetext/htmlh2{{render[name]}}的年龄是{{render.age15?render.age1:20}}住在{{render.address}}/h2
/script
scriptvar infoData {name:zhang,age:18,address:山西省} var tem template(tpl-user,{render:infoData}) //render 渲染的意思info.innerHTML tem
/script
遍历
$index 和 $value 迭代索引
{{each target}}{{$index}} {{$value}}
{{/each}}
遍历指定变量名称
语法 each 数组 值 索引
script idtest typetext/htmlh1{{title}}/h1ul{{each list val i}}li索引 {{i 1}} {{val}}/li{{/each}}/ul
/script
条件判断
{{if age 21}}span21/span
{{else if age 23}}span23/span
{{else}}span20/span
{{/if}}
渲染模板
template(模板id名, 数据)
ul iduser_list/ul
script typetext/html iduser_list_art{{each list val i}}li{{val.name}}/li{{/each}}
/script
var dataArray [{name:zhang,age:18},{name:wang,age:22},{name:ding,age:8},{name:zhao,age:40}
]
// 将数据渲染到模板里
var listArt template(user_list_art,{list:dataArray})
// 将模板渲染添加到DOM里
document.getElementById(user_list).innerHTML listArt
使用场景
渲染数组对象
ul iduser_list/ul
script typetext/html iduser_list_art{{each list}}li {{$index}} {{$value.name}} {{$value.age}}/li{{/each}}
/script
script typetext/html iduser_list_art{{each list val i}}li{{i}} {{val.name}} {{val.age}}/li
/script
var dataArray [{name:zhang,age:18},{name:wang,age:22},{name:ding,age:8},{name:zhao,age:40}
]
var listArt template(user_list_art,{list:dataArray})
document.getElementById(user_list).innerHTML listArt 模板引擎案例
1、后台管理系统操作
2、答题小程序 JSON
JSON中国 | JSON中文网
什么是JSON
1、JSON 是 JavaScript Object Notation 的缩写是一种轻量级的数据交换格式。
2、它是一种数据格式且是通用的数据格式它不属于任何编程语言但可以在不同编程语言jsphp , c , python等中进行解析和生成。即是一种通用的数据格式。
3、它是随ajax 诞生的一种数据交换格式。早期的ajax 传递数据是建立在XML数据之上但由于XML数据结构烦琐冗长且数据访问过程复杂浏览器兼容问题严重导致后续被json 代替。 JSON使用场景
1、与服务器数据交互给服务器发送数据获取服务器数据ajax
2、存储应用程序配置如本地存储localStroge
JSON基本语法
它和 js 中表示数据的某些语法相同但有区别json 不支持变量。函数对象实例。
它支持三种类型的值 简单值数字Number、字符串String双引号中不支持单引号、布尔类型Boolean、null类型 “hello” // json字符串表示方式必须是双引号单引号报语法错误 对象值用大括号(“{}”)表示由key、value组成key是字符串类型并且必须添加双引号值可以是简单值、对象值、数组值 {name:lihuawei} 数组值用方括号(“[]”)表示数组的值可以是简单值、对象值、数组值 [{Name : Jim, Age : 22} , {Name : Jerry, Age : 23}]
JSON解析
不同的编程语言都有针对json的解析器和序列化器。
在 js 中 提供了一个JSON对象它有两个方法 stringify 和 parse 。用来转换 js 对象和 json 字符串。 JSON.stringify() 序列化操作将 JavaScript对象转换成 JSON字符串。 JSON.prase()反序列化操作将 JSON字符串解析成 JavaScript值。
为什么要序列化
涉及到知识点
1、序列化和反序列化概念
2、数据结构中栈和堆的概念
3、数据类型的存储方式重点引用类型数据的存储方式
4、垃圾回收机制
序列化和反序列化概念
序列化将一个在内存中的变量转换为可保存或者可传输的字符串的过程
反序列化在适当时候将字符串再转化成原来的变量使用
栈和堆的概念
数据结构是计算机存储、组织数据的方式。常用的数据结构有数组、栈、堆、列表、链表、树、图、散列表。
栈相当于电脑内存运行速度快但存放内容少。由操作系统自动分配释放 存放函数的参数值局部变量的值等。
堆相当于电脑硬盘读写速度慢但存放内容多。一般由程序员分配释放。堆中存放的数据对应栈中的地址。
数据类型的存储方式
对于基本数据类型Number,Boolean,String,undefined,nullsymbol存在栈内存中
对于引用数据类型object , arrayfunction等存在堆内存中。
在栈中一旦变量不再使用就会被自动清除掉但堆中有对象时会相应的在栈中存放一个堆的地址当调用数据时去堆中调取对应的数据。
如果栈中的地址丢失导致找不到堆中的数据称为内存泄漏。 如果p1 修改 p 也会随之变化因为两个地址变量同时指向一个内存数据 垃圾回收机制GC garbage collecation
即执行环境会负责管理代码执行过程中使用的内存。
JavaScript中的垃圾回收机制是自动的它的主要目的是为了释放不再使用的变量和对象的内存空间从而避免内存泄漏和浪费。
原理垃圾收集器按照固定的时间间隔周期性寻找那些不再使用的变量将其清除或者释放内存。 常用的垃圾回收机制标记清除和引用计数。
标记清除
当一个变量不再被使用时JavaScript引擎会将其标记为“待回收”。当垃圾回收器开始运行时它会遍历所有的变量将那些被标记为“待回收”的变量清除掉。这个过程被称为“标记清除”。
引用计数
即记录每个值的引用次数如果一个值的引用次数为0null表示可以将这块内存释放
const arr [1,2] // arr 变量引用次数为1占内存
arr null // 引用为0,释放内存 对象的深拷贝和浅拷贝 深拷贝在堆内存中重新开辟一个存储空间完全克隆一个一模一样的对象不会影响到源对象 浅拷贝不在堆内存中重新开辟空间只复制栈内存中的引用地址会影响到源对象。
浅拷贝
let a {name:z,adress:sx
};
let b a;
a.name zm
console.log(a) // name:zm
console.log(b) // name:zm
深拷贝
1、es6 展开运算符
let a {name:z,adress:sx
};
let b {...a};
a.name zm
console.log(a) // name:zm
console.log(b) // name:z
2、JSON.parse( JSON.stringify() )
注意不能拷贝对象内的函数
let a {name:z,adress:sx,do(){console.log(this.name)}
};
let b JSON.parse( JSON.stringify(a) );
a.name zm
console.log(a) // name:zm 有do
console.log(b) // name:z 没do
3、数组的深拷贝 slice 和 concat 方法 js对象 json对象 json字符串 区别
js 对象 普通对象键值对方式属性不加引号
json 对象 键值对方式属性加双引号 后端语言可以支持的即把json 内容转化为自己能处理的数据存储格式不再担心不同语言有不同的语法和数据存储方式了以前传输用XML但它规范比较复杂。
json 字符串 单引号或者双引号引起来的 后端语言可以支持的 AJAX
简介
ajax 全名 async javascript and XML
ajax 是一种技术通过ajax 可以在浏览器中向服务器发送http请求完成交互
优势无刷新页面获取数据
缺点存在跨域问题 网络相关概念
IP 地址
通过ip 地址找到特定的服务器使用该服务器提供的服务
域名
由于ip地址是一串数字难记忆所以有了域名即给ip地址起了地名方便查找服务器。
查看本机ip地址 自己的电脑就是一个服务器 , 搜cmd 进入命令行工具
ipconfig
查看百度ip 地址域名的背后是ip地址
ping www.baidu.com // http://110.242.68.3/
DNS 域名解析服务器
它提供了域名和ip地址的映射关系
访问服务器的流程浏览器输入地址先找本机Hosts 文件C:\Windows\System32\drivers\etc 再找DNS , 再找到对应服务器
端口
用来区分一台服务器上提供的不同服务。
即服务器不止提供一个服务不同的服务对应不同的端口。
实际开发中当一次运行多个项目时需要通过指定不同端口来运行对应的项目
比如https://www.baidu.com:80 需要使用该百度域名映射的IP地址对应的服务器的80端口所提供的服务
总结
ip 用来查找服务器
域名方便记忆
DNS维护域名和ip地址的映射关系
端口区分一台服务器上的不同服务 通信协议
客户端访问服务器通过ip地址和端口找到服务器了即交互具体怎么交互规则是什么就是这里所说的协议
常见的协议
1、HTTP , HTTPS 超文本传输协议
2、FTP 文件传输协议
3、SMTP 简单邮件传输协议 HTTP 协议
计算机网络 —— 应用层详解_code配上格子衫的博客-CSDN博客
简介
超文本传输协议英文HyperText Transfer Protocol缩写HTTP。
该协议详细规定了浏览器和万维网服务器之间相互通信的规则。比如charsetutf-8
HTTP默认的端口号为80HTTPS的端口号为443。
HTTP协议通常承载于TCP协议之上有时也承载于TLS或SSL协议层之上。是一种应用层协议由请求和响应构成 协议特点 通信规则内容
1、请求
请求行 请求类型get/post/put等/ url / http 版本
请求头: Host Cookie Content-Type User-Agent
请求体
2、响应
请求行 协议版本 / 状态码 / 状态字符串 ok
请求头: Content-Type Content-length Content-encoding
请求体 搭建web本地测试服务器
json-server 是一款基于Node.js的服务器一般用在前后端分离的项目中即一个在前端本地运行可以存储json数据的server。为前端开发人员提供了一个高仿真的RESTFul后台服务。
通俗来说就是模拟服务端接口数据前端人员可以不依赖API开发而在本地搭建一个JSON服务自己产生测试数据。
RESTFul是一种API的风格基于REST构建的API就是Restful风格大白话后台接口的一种规则
安装nodejs
Node.js官网https://nodejs.org
node -v // 检测node版本 开始搜索cmd 打开命令行工具
下载安装json-server
使用npm全局安装json-server
npm install json-server -g
检测是否安装成功
json-server -v
创建数据库 新建文件夹位置不限建议是和项目同级目录下新建数据库文件夹一般命名为db (data base 即数据库) 在db 文件夹中新建json 文件文件命名可自定义一般命名为db/ mock.json 注意数据格式 {newsList:[], // 新闻列表接口bannerList:[], // 广告接口userInfor:[] // 用户信息接口
} 例子 {userList: [{id: 1,telephone: 13800000000,userName: 张三,idCard: 443426189012211141,vipRank: ,roleName: ,projectName: 项目名,accountStatus: ,createTime: 2018-12-12 1500}]
}
启动数据库
进入json 文件所在的目录 db,执行以下命令
json-server --watch db.json // 不指定端口 注意你的json文件的名称是否是db,换自己的
json-server --watch db.json [--port 5001] // 运行对应的json文件注意此处json文件名称是自定义的,[] 表示可选可指定端口
在浏览器中输入地址http://localhost:5001/userList就能看到输出db.json中的接口数据
优化启动脚本
如果觉得启动服务的代码长可在该数据库文件夹中生成package.json 文件中设置别名
执行以下命令可自动生成package.jsonnpm 包管理配置文件
npm init -y
在package.json 中设置别名 ,即修改 scripts 选项
{name: db,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1,mock:json-server --watch db.json },keywords: [],author: ,license: ISC
}
运行以下命令即可
npm run mock
