一. 项目开始
1.1 项目目标:
把后台的数据渲染在页面上
1.2 实现项目的思路
1 把整个页面看作一个对象
2 把页面中的各种动作（功能）封装到一个个函数当中
3 需要完成什么任务就通过对象调用相应的方法
4 把页面看作一个对象后,我们要创建一个入口(一般命名为 created(){ } ) ,这个入口给了我们，该页面对象的方法从哪里开始运行创建了个起点。
1.3 函数的特点
（1）封装：只管使用别人封装好的方法，不用管实现过程
（2）继承：子类继承父类，可以拥有父类的属性和方法
（3）多态
优点
（1）易维护
采用面向对象思想设计的结构，可读性高，由于继承的存在，即使改变需求，那么维护也只是在局部模块，所以维护起来是非常方便和较低成本的。
（2）代码重用
功能是被封装在类中的，类是作为一个独立实体而存在的，因此可以很简单的提供类库，使代码得以重复使用。
（3）效率高
在软件开发时，根据设计的需要对现实世界的事物进行抽象，产生类。使用这样的方法解决问题，接近于日常生活和自然的思考方式，势必提高软件开发的效率和质量。
（4）易扩展
由于继承、封装、多态的特性，自然设计出高内聚、低耦合的系统结构，使得系统更灵活、更容易扩展，而且成本较低。
二. 获取数据
1、axios.js库的获取
网站搜索bootCDN，在里面搜索axios.js，打开以后,复制链接在另一个界面打开，然后单击左键另存为自己的项目中。
2、axios.js库的使用
- 参数：如下 res、error只是形参，用形参来接受数据
- 成功后的处理函数
- 失败后的处理函数
axios.get(url).then(function (res) { //通过接口地址来获取数据
console.log(res);//在控制台打印获取到的数据
}).catch(function (error) { //获取数据失败时执行这句
console(error);
})
二. 渲染数据
- 先把静态页面用反引号包起来，然后才可以通过${ }把数据放在静态页面中，最后获取元素节点，通过.innerHTML 渲染到页面上。
htmlStr += `
<li class="fcc">
<div class="h30 city bg-gray fcc r">
<p class="f14 lh30 fcc ">${hotCityName.name}</p>
</div>
</li>
`;
});
document.querySelector(".hotCity").innerHTML = htmlStr;
三. 内置函数
1. Number(数字)：to.Fixed(n)
（1） 保留小数n位
（2） 前提是数字才能使用
-
数组常用方法
项目中常用：
（1）forEach：遍历数组
（2）filter：过滤 -
String(字符串)
项目中常用：
（1）indexOf：查找字符串中某元素的下标
（2）slice：截取字符串
（3）substr ： 截取字符串 -
Date(日期)： 项目中用于处理后台数据的毫秒数
- 星期格式化简便方法：通过调用日期对象的getDay()方法，得到的是数字0到6，对应的刚好是星期日到星期六，可以把星期日到星期六按顺序放到数组中，通过数组下标就可以得到对应的星期
//星期格式化
var date = new Date();
var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var week = weeks[date.getDay()];
- 月份格式化：通过调用日期对象的getMonth()方法，得到的是数字0到11，对应的是1月到12月，所以使用日期对象的getMonth()方法时要加1，才能得到准确的月份
var M = date.getMonth() + 1; //月
- Regex(正则)：项目中用于匹配手机号码的正则
var phoneReg = /^1[3-8]\d{9}$/
五、页面传参
- 项目中用于获取电影详情Id与订单Id
1、页面传参准备工作
（1） a 标签
（2） location.href：获取页面窗口地址
2、页面跳转带上参数
- eg：?filmId=参数
3、目标页面获取url上的地址
- 通过获取a标签页面跳转时所传递的参数来获取对应服务器地址上的数据
六、定时器
1、setTimeout：设置一个定时器，在定时器到期后执行一次函数或代码段（延迟执行）
// 两秒后执行函数里面的代码
window.setTimeout(function () {
alert('啊哈哈哈哈哈啊哈')
}, 2000) //2000为毫秒数，延迟两秒执行
2、setInterval: 以固定的时间间隔重复调用一个函数或者代码段
- 项目中用于获取验证码的倒计时
// 倒计时
var num = 10;
var timer = setInterval(function () {
console.log(--num);
if (num === 0) {
clearInterval(timer);
}
}, 1000); //1000为毫秒数，1秒执行一次
3、clearInterval：清除定时器
七、本地缓存（数据存放到浏览器）
- 项目中用户缓存用户的手机号码与sessionToken到浏览器中，需要的时候调用
1、cookie
2、localStorage（永久缓存）
（1）把号码存放到浏览器。通过‘phone’进行存放
localStorage.setItem(' phone ' , 13800000000);
（2）从浏览器取出名字叫‘ phone ’的数据
localStorage.getItem(' phone ');
（3）清除phone的数据
localStorage.removeItem(' phone ');
（4）清除所有缓存
localStorage.clear( );
3、sessionStorage（临时存储，浏览器关闭数据就消失）
- 调用方法与localStorage一样
- 与localStorage区别：不能永久存储
遇到的额外知识
1、学会使用控制台查看错误，以及debugger进行断点调试
2、在form表单中，默认<btuuon></button>标签为提交按钮，点击时会刷新页面，给button标签添加type 值为button，就可以变成单纯按钮使用
3、JSON数据转数组
var items = JSON.parse(data); //将json数据转为数组
4、给按钮绑定事件进行页面跳转，是以html为当前目录进行链接，修改完js后需要刷新，事件绑定才会生效
5、获取input标签，是为了修改标签，要是后面紧跟。value，那么获取到的只是个字符串，对它进行修改时，只是修改字符串，而不是标签中的value值
网友评论