一、要有好的编程思维
1、目标
- 把静态页面变成动态
2、思路
（1）封装对象方法
（2）模块化思想（通过函数进行分块）
3、编写代码
二、使用面向对象的方式编写代码
1、把整个页面看作是一个对象
2、把页面中的各种动作（功能）封装到一个个函数当中
3、需要完成什么任务就通过对象调用相应的方法
-
特点
（1）封装：只管使用别人封装好的方法，不用管实现过程
（2）继承：子类继承父类，可以拥有父类的属性和方法
（3）多态
-
优点
（1）易维护
采用面向对象思想设计的结构，可读性高，由于继承的存在，即使改变需求，那么维护也只是在局部模块，所以维护起来是非常方便和较低成本的。
（2）代码重用
功能是被封装在类中的，类是作为一个独立实体而存在的，因此可以很简单的提供类库，使代码得以重复使用。
（3）效率高
在软件开发时，根据设计的需要对现实世界的事物进行抽象，产生类。使用这样的方法解决问题，接近于日常生活和自然的思考方式，势必提高软件开发的效率和质量。
（4）易扩展
由于继承、封装、多态的特性，自然设计出高内聚、低耦合的系统结构，使得系统更灵活、更容易扩展，而且成本较低。
三、请求数据
1、axios库的使用
- 参数：如下 res、error只是形参，用形参来接受数据
- 成功后的处理函数
- 失败后的处理函数
var url = 'http://huruqing.cn:3000/api/film/getList'; //获取接口地址
axios.get(url).then(function (res) { //通过接口地址来获取数据
console.log(res.data.films);
//拿到数据后渲染列表
homeView.renderList(res.data.films);
}).catch(function (error) { //获取数据失败时执行这句
console(error);
})
2、引入axios库
注意事项：
（1）引入axios库放在body底部
（2）axios库要放在本页面js上方，因为代码从上往下一行一行执行，当本页面js在axios库上方时，先执行本页面的js，而本页面又需要axios库的方法来获取数据，这时候就会报错提示axios is not defind
<script src="../js/axios.js"></script>
<script src="../js/home.js"></script>
三、使用模板字符串渲染页面
- 用反引号把内容拼接起来
//输出我是小明，来自北京
var name = '小明';
var address = '北京';
var talk = `我是：${name}，来自：${address}`;
document.write(talk);
四、内置函数
1. Number(数字)：to.Fixed(n)
（1） 保留小数n位
（2） 前提是数字才能使用
-
数组常用方法
项目中常用：
（1）forEach：遍历数组
（2）filter：过滤 -
String(字符串)
项目中常用：
（1）indexOf：查找字符串中某元素的下标
（2）slice：截取字符串 -
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(item.filmType); //将json数据转为数组
4、给按钮绑定事件进行页面跳转，是以html为当前目录进行链接，修改完js后需要刷新，事件绑定才会生效
5、获取input标签，是为了修改标签，要是后面紧跟。value，那么获取到的只是个字符串，对它进行修改时，只是修改字符串，而不是标签中的value值
网友评论