JS原生项目
- 知识点-思维导图
JS作用
- 实际项目里js的应用点
1.获取数据渲染页面
2.页面上数据的处理
3.页面跳转时数据的传输 - 可见，JS的真正作用是处理数据
下面是我根据导图，结合项目代码进行的一些总结
项目总结
基本知识点
一、面向对象编程方式
- 我们把要处理的页面当一个对象比如对影片列表处理的时候
var pian = {
// 对影片页面处理，我们创建一个对应的对象pian（直接用拼音哈哈）
start: function () {
// 开始就执行函数的我们用一个函数来装
var str = location.href;
var index = str.indexOf('=') + 1;
var filmId = str.slice(index);
var url = 'http://132.232.87.95:3000/api/film/getDetail?filmId='+filmId
axios.get(url).then(function (res) {
if (res.data.status == 0) {
pian.renderList(res.data.film);
}
}).catch(function () {
})
},
renderList: function (film) {
// 渲染的我们也用一个函数来表示
document.querySelector('#img').src = film.poster;
document.querySelector('#name').innerText = film.name;
document.querySelector('#grade').innerText = film.grade;
document.querySelector('#category').innerText = film.category;
}
}
pian.start();
// 一开始就运行这个开头执行的函数
- 面向对象编程，把编辑的页面当成对象，然后分几个功能层，开始执行和待执行以及触发执行的代码，作用是让代码更有条理不至于乱七八糟的
二、获取dom节点
- 我们要对页面进行操作，第一步肯定是找到对应的标签，然后对这个标签进行编辑
- 常用的都会说是document.getElementById和document.getElementsByClassName
document.getElementById // 根据ID获取节点
document.getElementsByClassName // 根据class获取节点
- 但是最推荐的还是document.querySelector
因为document.querySelector有这个两个的功能
document.querySelector('#') // 根据ID获取的时候用 #
document.querySelector('.') // 根据class获取的时候用 .
作用总结
一、for循环
项目里我们渲染页面大部分依靠的都是for循环，这里依靠的是for循环可以遍历数组的特性
- for循环遍历 for(i=0;i<arr.length;i++){arr[i]} 这个时候arr[i]代表数组arr里的每一个元素，
- 这便是 遍历
for (var j = 0;j < films.length;j++) {
var film = films[j]
var filmId = film.filmId;
var actorsStr = home.actorsToString(film.actors)
var str = ` <div class="flex-sb mg-t-8 bd-gray pd-b-15 mg-l-17 rel">
<a class="flex-sb w100pc" href="pian.html?filmId=${filmId}">
<img class="h70 w50" src="${film.poster}" alt="">
<!-- 电影文字介绍 -->
<div class="lh20 fg1 mg-l-15">
<div class="flex ai-center">
<p class="f14">${film.name}</p>
<span class="lable2D f10" style="">2D</span>
</div>
<div class="f12 gray mg-t-5">
<p>观众评分 <span style="color:#fed177;">${film.grade}</span> </p>
<p class="display w160">主演: ${film.director}</p>
<p><span style="color: orange">${film.nation}</span> | ${film.runtime} 分钟</p>
</div>
</div>
<a class="abs" style="right:0" href=" ">
<button class="bg-fff h20 w50 orangr mg-r-18"
style="height:24px; border: 1px solid#ef7131; border-radius: 3px;">购票</button>
</a>
</a>
</div>`
htmlStr += str
}
var $list = document.querySelector('.list')
$list.innerHTML = htmlStr
},
- `` 模板字符串 里面可以存放html代码和变量，经常用于渲染页面
- 在模板字符串里，我们用后台的数据放到对应内容标签里用 ${变量}
- ${xx}在模板字符串``下才有用所以搭配使用
二、if分支语句
- 在项目里我们经常用到if语句，当用户登录怎样，没登录又怎样，很方便
这是获取后台数据部分的代码 - 在渲染列表里我们经常用${xx}来填充节点，达到渲染的效果
getFilmList: function () {
var url = 'http://132.232.87.95:3000/api/film/getList?page=1'
axios(url).then(function (res) {
if (res.data.status == 0) {
home.renderList(res.data.films)
} else {
alert(res.data.msg)
}
// 请求成功之后,执行这个函数
}).catch(function (error) {
alert(error)
// 请求失败之后,执行这个函数
})
}
- axios：这里我们用到了axios来获取后台接口的数据
需要注意的是，先了解接口结构以及里面的数据层，否者即使获取到了也用不了 - 然后在这里我们就使用了if分支语句进行了一些判断，因为先了解到数据接口里的结构层次，然后我们做一个判断，如果成功就执行我们的渲染函数，并把数据传给函数
- 获得数据后有些需要特殊处理的，单独建立一个函数来处理，而if语句最常用
// 拼接演员列表字符串
actorsToString: function (actors) {
if (!actors) {
return ''
} else {
var str = ''
for (var i = 0;i < actors.length;i++) {
var actor = actors[i]
str += actor.name + ' '
}
return str
}
- 上面这个拼接演员列表字符串的函数，我们可以把它当成一个封装好的函数，需要拼接演员列表字符串的时候直接拿来用就可以了
三、日期函数的使用
- 日期函数 new Date()
格式化日期 time为毫秒数
formatDate: function(time) {
var date = new Date(time);
var Y = date.getFullYear();
var M = orderDetails.addZero(date.getMonth() + 1);
var D = orderDetails.addZero(date.getDate());
var h = orderDetails.addZero(date.getHours());
var m = orderDetails.addZero(date.getMinutes());
var s = orderDetails.addZero(date.getSeconds());
// var dayStr = `${Y}-${M}-${D} ${h}:${m}:${s}`
var dayStr = `${Y}-${M}-${D} ${h}:${m}:${s}`;
return dayStr;
},
- 根据毫秒数返回星期
getWeekDay: function(time) {
var date = new Date(time);
var day = date.getDay();
var week = {
"0": "星期日",
"1": "星期一",
"2": "星期二",
"3": "星期三",
"4": "星期四",
"5": "星期五",
"6": "星期六"
};
return week[day];
},
四、页面跳转传参
`<a href="orderDetails.html?oderId=${orderId}">`
模板字符串中通过在路径后面加?参数名=${参数}实现跳转传参
- 接收：在一开始的时候在开头函数里通过location.href获取网址然后截取字符串
// 使用location.href 获取当前网址
var url = location.href;
// 从字符串url里提取(截取)orderId
// 使用indexOf找到=的位置(下标) 的后一位
var index = url.indexOf('=') + 1;
// 使用slice截取从=后的一位开始后面全部的字符串
var orderId = url.slice(index);
orderDetails.getDetails(orderId);
将截取的参数给获取后台数据的函数
五、正则表达式在项目里的应用
- 通过正则表达式可以验证电话号码格式以及其他的格式然后结合if分支语句进行判断然后执行对应的函数
// 设置电话号码输入格式
isKo: function() {
var phone = document.querySelector("#phone").value;
if (0 <= phone.length <= 11) {
if (phone.length == 11) {
if (/^1[34578]\d{9}$/.test(phone) == false) {
alert("输出格式错误,请输入正确的电话号码");
} else {
login.getCode();
}
} else {
alert("电话号码是11位数");
}
} else {
alert("电话号码是11位数");
}
},
- 正则表达式结合函数replace实现字符串替换的功能
需求：根据接口判断是否登录，然后把接口里的号码赋给phone然后以123*****1234的形式显示
goLogin: function () {
// document.querySelector('#name').innerText=phone;
var url = 'http://132.232.87.95:3000/api/user/getUserInfo';
// 登入接口
axios.get(url).then(function (res) {
if (res.data.status === 0) {
// 判断是否登录
var $phone = document.querySelector('#phone');
var phone = res.data.userinfo.mobilePhoneNumber;
// 赋值给phone
var phoneStr = phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
// 替换成123*****1234的形式
// 填充标签
$phone.innerText = phoneStr;
} else {
var $phone = document.querySelector('#phone');
$phone.innerText = '立即登录';
}
}).catch(function () {
})
}
- (/^(\d{3})\d{4}(\d{4})$/, ‘$1****$2’);正则里的意思是分成两组，(\d{})代表一组，里面数字表示一组几个数字，然后’$1****$2’中$1表示第一组$2表示第二组,以前3个数字后4个数字中间用****代替，最后效果就是123*****1234
六、发送验证码时的操作细节
- 倒计时 一般用input标签做
getCode: function() {
// 获取节点
var str = document.querySelector("#getcode");
// 调用函数之后不能在被点击仅限于input标签
// disabled 的意思是禁止点击
str.disabled = true;
// 设置定时器变量名为timer这些基本都是用这个单词的
var timer = setInterval(function() {
// 给获取节点里面的value值赋值，赋的值是num自减这样就达到了倒计时的效果
str.value = --login.num;
// 设置在数字为零的时候停止
if (login.num === 0) {
clearInterval(timer);
// 为零的时候input的value值变为重新发送
str.value = "重新发送";
// 这个时候num的值为0，再次点击会从零开始，所以要重置一下num的值
login.num = 60;
// 调用函数之后能在被点击仅限于input标签
str.disabled = false;
}
}, 1000);
- 作用域
直接在script下的变量为全局变量
/* 声明全局变量
全局变量，全局都可以使用引用的变量
*/
var man = {
name : '勇'
}
<!-- 把全局变量放在头部，这样的话下面的js才能访问到
代码的顺序从上到下
-->
// 函数里的变量为局部变量
// add(){}里的变量为局部变量
function add(){
var a = 10;
var b = 5;
var sum = a+b;
console.log(sum);
// 局部作用域，局部变量，里面可以访问
}
局部变量外部访问不到，访问就得调用函数
2.全局作用域，在全局作用域下声明的变量是全局变量，在script标签里面（子级）声明的变量为全局变量
/*自我总结：通过全局变量可以方便js代码的处理，全局变量的可以放在
头部按顺序来排，(类似这个用到卖座项目里面的话，后台数据的代码由于是属于全局变量
可以放在home.html的body上面，这样一来home.js文件里的代码块就可以很好的管理)*/
3.局部作用域和局部变量
// 函数就是一个局部作用域，里面的变量为局部变量
a.函数内部可以访问函数外部的变量
b.函数外部不可以访问函数内部的变量
c.多个作用域用作用域链进行链接
d.没有块级作用域(区分作用域是以函数作为区分条件)
371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
