自学几个月前端，为什么感觉什么都没学到？？
这种现象在很多的初学者和自学前端的同学中是比较的常见的。
因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。
最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。
很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。
这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。
但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。
所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。
时间：2017年11月24日
问题：在destoryed中清掉计时器不起作用
描述：destoryed函数在实例销毁之前调用，在这一步，实例完全可用。
在beforeDestory在实例销毁之后调用，在这一步，实例就不可用了。
项目：《钱隆归来》
时间：2017年11月24日
问题：使用this.timer = null 销毁计时器不管用
描述：在data中定义了this.timer = null ，在使用时用this.tiemr = setTimeout(getStatus, 3000)开启计时器，应该使用clearTimeout 来清掉计时器
关键代码：window.clearTimeout(this.timer)
项目：《招生宝》
时间：2017年11月30日
问题：created方法里让div高度等于屏幕高度,报错cannot read property ‘sytle’ of null
描述：空值的style证明没有获取到dom元素，写在created方法里，created生命周期是将编译好的html模板替换掉el属性，此步是去做渲染这件事，但还没有完成，而在mounted生命周期阶段渲染已经完成，可实时监控dom并更新它，所以获取dom应写在这一步
关键代码：
mounted() {
this.$nextTick(() => {
document.getElementById(‘noOrder’).style.height = window.innerHeight + ‘px’
})
}
项目：《钱隆归来》
时间：2017年11月24日
问题：在destoryed中清掉计时器不起作用
描述：destoryed函数在实例销毁之前调用，在这一步，实例完全可用。
在beforeDestory在实例销毁之后调用，在这一步，实例就不可用了。
项目：《招生宝》
时间：2017年11月29日
问题2：在filters中使用data中定义的属性报错undefined
描述：filters中this为undefined,使用
解决办法：可在filters中定义变量再使用
关键代码：
filters: {
filterBtnTitle(item,args) {
let btnTitle
console.log(args)
if (item.teacherConfirmStatus) {
if (item.paused === 1) {
// 1是暂停，代表学生发起了撤消请求
btnTitle = ‘同意撤消’
}
btnTitle = ‘已确认’
} else {
btnTitle = ‘确认为我的学生’
}
return btnTitle
}
},
项目：《招生宝》
时间：2017年11月29日
问题：使用filters传多个参数，位置互换返回结果错误
描述：使用(item.orderNo, item.paused) | filterBtnTitle方式来传参数错误，filters管道符前边的参数为第一个参数，第二个，第三个参数应该依次在filters方法后边。
项目：《招生宝》
时间：2017年12月4日
问题：使用===判断两个对象是否相等，返回false
描述：因为一个是写进数组的对象，一个是在页面中点击产生的对象，对象是引用地址方式，两个不同引用地址比较结果肯定是false
解决办法：通过比较两个对象中的key来判断是否相等。
错误代码：：
// 判断指定元素是否在数组中,因为两个数组并不相等，所以一直返回false，但此处复选框没必要去判断元素是否已在数组中，因为点一下添加进数组中，再点一下就删除了
isInArray(arr, value){
for(var i = 0; i < arr.length; i++){
// if(value.orderNo === arr[i].orderNo){
// console.log(11111111);
// return true;
// }
}
return false;
},
项目：《招生宝》
时间：2017年12月4日
问题：先定义一个对象为它赋值，再定义第二个对象等于第一个对象，再为第二个对象赋值，此时打印第一个对象和第二个对象的值是相等的，因为此时两个对象引用同一地址
let obj1=new Object()
obj1.name=‘Frank’
let obj2=obj1
obj2.name=‘Muse’
console.log(obj1.name);
项目：《招生宝》
时间：2017年12月4日
问题：
// 为数组对象增加删除指定元素的方法
removeByValue(arr, val) {
for(var i=0; i<arr.length; i++) {
if(arr[i] === val) {
arr.splice(i, 1);
break;
}
}
},
项目：《招生宝》
时间：2017年12月4日
问题：先判断元素是否在数组中，如果在就删除，我用了上述isInArray，removeByValue两个方法先后来操作，但此处可巧妙运用数组的filters方法，直接返回数组中不等于当前选中元素的那一项，就实现了删除相等的那一项
关键代码：
let arr = arr.filters(item => {
return item.orderNo !== item.orderNo
})
项目：《招生宝》
时间： 2017年12月4日
问题：在switch分支处语法检查报错 Unreachable code no-unreachable
描述： switch return 和break不能一起用
解决办法：将switch返回结果赋值给一个变量，最后再返回这个变量
项目：《招生宝》
时间： 2017年12月4日
问题：请求接口提交数据格式不正确，
描述: 在外边给json赋值后，用的时候又用了{}括起来了，提交数据格式为json时，可以直接用post({key:value}),也可以先赋值再使用
错误代码：
const params ={}
query.then({params}).then().catch()
正确代码：
1.queryOrderList({
uname: keywords
})
2.const params = {}
params.uname = keywords
queryOrderList(params).then().catch()
项目：《招生宝》
时间：2017年12月4日
问题1：移动端字体小于12px时使用line-height字体整体靠上
解决办法： display:tabel默认是垂直居中，使用display: table来实现垂直居中效果并不是特别明显，所以再配合使用缩放来对元素进行缩放，给要垂直居中的元素外再套一层
关键代码：
.wrapper {
display: table,
font-size: 20px;
height: 28px;
line-height: 28px;
width: 72px;
transform: scale(0.5),
// transform-origin 设置旋转元素的基点位置，必须与transform一起使用
transform-origin: 100% 100%
span {
display: tabel-cell;
vertical-align: middle;
}
}
问题2：使用transform:scale可以实现缩放，但还占据着原来的空间，导致元素没有在原本应该的位置上显示
解决办法： 使用zoom: 0.5来进行缩放，还不占据空间，zoom: 设置或检索对象的缩放比例
项目：《招生宝》
时间：2017年12月4日
问题：页面显示数据使用{{btnTitle(item.status, item.no, KaTeX parse error: Expected 'EOF', got '}' at position 7: event)}̲}方法来根据数据显示按钮样式，…event来获得当前对象来改变其背景图，但$event为undefined
描述：此处用来过滤功能的btnTitle方法并不是一个dom方法，所以并不会真实接受$evnet对象
解决办法：在此用一个flag来做标志，如果是特殊样式falg = true,如果不是flag = false，然后当flag= true时添加class名，获取元素方法使用获取元素方法使用refs,给按钮绑定refs
关键代码：
<a class=“confirm-button tac c3e” ref=“btns” @click=“handleClick(item.teacherConfirmStatus, item.paused, item.orderNo)” :class=“{‘confirmed’: isconfirm}” v-show=“buttonShow === ‘all’”>{{filterBtnTitle(item.teacherConfirmStatus, item.paused, item.status,key)}}
let flag = true
if (status = ‘同意撤消’) {
flag = false
}
if (flag) {
this.nextTick(() => {
this.$refs.btns[index].className =‘confirmed’
})
}
项目：《招生宝》
时间：2017年12月6日
问题：正则表达式不起作用
描述：格式错误
正则表达式 let newTime = /\d{4}-\d{1,2}-\d{1,2}/g.exec(time)写成了 let newTime = /\d(4)-\d(1,2)-\d(1,2)/g.exec(time)
newTime[0].replace(/-/g, ‘.’)写成了newTime[0].replace(-\g, ‘.’)
项目：《招生宝》
时间：2017年12月6日
问题：请求mock数据接口时接口状态一直返回失败，
描述：状态码2000000写成了“2000000”
错误代码： {
“path”: “”,
“delay”: 500,
“name”: “”,
“description”: “”,
“isPaging”: false,
“datasource”: “success.data”,
“responseName”: “success”,
“response”: {
“success”: {
“retcode”: “5000000”,
“message”: “获取数据成功”,
“data”: {}
},
“failure”: {
“code”: “201”,
“status”: “FAILURE”,
“message”: “服务异常”
}
}
}
正确代码 ：
{
“path”: “”,
“delay”: 500,
“name”: “”,
“description”: “”,
“isPaging”: false,
“datasource”: “success.data”,
“responseName”: “success”,
“response”: {
“success”: {
“retcode”: 5000000,
“message”: “获取数据成功”,
“data”: {}
},
“failure”: {
“code”: 201,
“status”: “FAILURE”,
“message”: “服务异常”
}
}
}
项目：《招生宝》
时间：2017年12月6日
问题：向后台 传参数时需要的是数组，但得到的是json
描述：因为传参数时传的时候用的{}括起来了，而括号里是一个数组，所以是json格式，并不是数组都是这样默认显示的（数组名，数组值），这明显是json格式。
错误代码： confirmBatch(
{batchArr}
).then((res) => {
this.$dialog.alert(res.message)
// window.location.reload()
总结
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
LURE",
“message”: “服务异常”
}
}
}
项目：《招生宝》
时间：2017年12月6日
问题：向后台 传参数时需要的是数组，但得到的是json
描述：因为传参数时传的时候用的{}括起来了，而括号里是一个数组，所以是json格式，并不是数组都是这样默认显示的（数组名，数组值），这明显是json格式。
错误代码： confirmBatch(
{batchArr}
).then((res) => {
this.$dialog.alert(res.message)
// window.location.reload()
总结
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-uDMPc5og-1715471368418)]
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
