实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE HTML>
<html>
<head>
<title>index</title>
<meta charset="utf-8">
<meta name="Author" content="海牙">
<link rel="stylesheet" href="css/AjaxPaging.css">
</head>
<body>
<div class="wrap flex_column">
<div class="content flex_column">
<!-- <a href="http://mp.weixin.qq.com/s/hSI0RNGR23KetTFLoYP7dQ" class="items flex_row">
<div class="img"><img src="http://www.tanzhouphp.com/tanzhoue/images/newsList/1.jpg" alt=""></div>
<div class="bd">
<p class="label">说来也是惨，古生物学家好像特别容易被假化石坑到呢……</p>
</div>
<div class="ft">></div>
</a>-->
</div>
<div class="page">
<ul class="flex_row">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
<script>
/*
javaScript java
ECMAScript DOM BOM
基于原型的动态解释性脚本语言
原型 词法作用域 上下文
前端
1. 响应用户的操作 事件对象 点击事件 键盘事件
2. 操作DOM元素 增删改查 style属性 改变了样式
3. 数据 数据交互 AJAX json jsonp 正则表达式
4. 造轮子 jquery angular vue react
原生js实现ajax 缓存代理
https://route.showapi.com/181-1?showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&page=1&num=8
需求分析
1. 数据获取组件
2. 数据渲染DOM组件
jsonDOM解析
json格式的数据 渲染到DOM元素上
1. 模板
2. 数据绑定
3. 替换content内容
3. 分页业务实现
1. 事件代理 != 事件绑定
2. 改变page
3. 拉取数据 - >渲染数据
4. 缓存代理业务实现
1. 渲染过的数据要存储
*/
const url = 'https://route.showapi.com/181-1?'; //常量
var oCon = document.querySelector('.content');//获取content
var oUl = document.querySelector('.flex_row');
var page = 1; //初始化页码
var cache = {}; //缓存池 没有length属性
oUl.addEventListener('click',pageList,false);
function pageList(e){
if(e.target.tagName.toLowerCase() === 'li'){
page = e.target.innerHTML *1; //点击获取对应的源码
if(page in cache){ //判断json中是否有什么
console.log('数据已经缓存,页码:' page);
showPage(cache[page])
}else{
getJson(); //获取数据
}
}
}
//获取数据 getJson
getJson();
function getJson(){ //获取数据
console.time('正在拉取数据');
var xmlHttp = new XMLHttpRequest();//创建ajax对象
var params = []; //数据中转数组
var sendData = { //json数据容器
'showapi_appid':'30603', //账号
'showapi_sign' : '98960666afeb4992ae91971d13494090',//密码
'page':page, //第几页数据
'num':8 //几条数据
}
for(var key in sendData){
// key对应每一位的键 sendData[key]是对应的value
params.push(key '=' sendData[key]);
}
var postData = params.join('&');//以 & 为拼接符号 拼接数组内容
// key = value & key = value
//开启数据通道
xmlHttp.open('GET',url postData,true);
//提交请求
xmlHttp.send(null);
//监听数据通道变化
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){//状态一切良好的情况下
var dataList= JSON.parse(xmlHttp.response).showapi_res_body.newslist;//格式化数据 数组
cache[page] = dataList; //缓存数据
showPage(dataList); //调用渲染数据
}
}
}
//数据渲染组件
function showPage(data){
var len = data.length; //长度预存
var str = ''; //初始化模板
for(var i=0;i<len;i ){
str =
`
<a href="${data[i].url}" class="items flex_row load">
<div class="img"><img src="${data[i].picUrl}" alt=""></div>
<div class="bd">
<p class="label">${data[i].title}</p>
</div>
<div class="ft">></div>
</a>
`
}
oCon.innerHTML = str; //更改oCon的内容为str
console.timeEnd('正在拉取数据');
}
var aLi = document.querySelectorAll('li')
function forEach(eles,cb){// each 发生闭包
for(var i=0,len=eles.length;i<len;i ){
cb&&cb(eles[i],i);
}
}
forEach(aLi,function(obj,idx){
obj.style.border = idx 'px solid red';
})
//无序数据存储结构
</script>
</body>
</html>
<!--
网购流程
商家店铺地址
提交所购买物品清单
付款 审核 商家确认收货
通过快递的形式发货
检查物流状态
签收
ajax 数据交互
数据接口地址 网址 https://route.showapi.com/181-1
设置参数
showapi_appid=30603 账号
showapi_sign=98960666afeb4992ae91971d13494090 密码
page=1 请求的页数
num=8 请求数据的数量
数据交互模式 GET POST async
检测数据通道状态
获取数据
检测数据通道状态
0 未初始化
1 调用了send() 正在发送请求
2 send载入完成
3 解析响应内容
4 响应内容解析完成 数据开始回调 客户端可以调用数据
getElementById
getElementsBytagName
h5 api ie8
querySelector $ css选择器 单一
querySelectorAll 元素集合
/*
title: "胡彦斌回应郑爽出书 ：只为支持你 |今日热点",
picUrl:"https://zxpic.gtimg.com/infonew/0/wechat_pics_-35654042.jpg/640", description: "盖饭GetFun",
ctime: "2017-08-16",
url:"https://mp.weixin.qq.com/s?src=16&ver=308×tam…*6dauVz0y4doeQxc2e7Diy6V2IByC4XcAFaGomVp974HcTw8=
*/
var json = {
name:'海牙',
age:13,
job:'前端开发工程师'
};
json['长得帅不帅'] = true;
json.长得帅不帅 = true;
console.log(json)
json
开发规范
命名 格式 命名空间 缩进换行 注释
业务逻辑规范
健壮性 高内聚 低耦合 组件 模块
js初级阶段[事件,方法,对象,控制流程,数组,工具[定时器 Math]]
js进阶阶段[迭代,递归,词法作用域,js解析原理,数组高级操作,event对象高级应用,数组映射,封装,继承,多态,基于原型的OOP,面向对象,对象,json,ajax,闭包,跨域,矩阵,包装对象,降频操作,touch模组,this,call,apply,bind,上下文,词法作用域,作用域链,原型,原型链,解构,高级函数,arguments高级应用,cookie封装,前端数据库,正则表达式]
编程思维 数组 眼界
写一个函数 输出所有的 参数累加和
应届毕业生 211 985 5000
速成出来的
基本功
作用域 原型 http 前端高并发 兼容性
思维能力
开发规范
diff
[1] [2,3,4,5,6,7]
[1,2,3]
arr.concat(arr2.slice(0,diff))
技术栈不健壮
map
slice
split
concat
眼高手低
学会提出问题
学会思考问题 逻辑思维 分析
-->
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论