JS复习计划

最近做微信小程序的过程中,根据我对小程序的功能规划,我发现我不得不去监听一个很重要的全局变量,因为我如果不用监听方式去解决这个问题,之后完善小程序的功能的时候,可能会有很多麻烦,也会导致我的代码更臃肿,有一种很将就的感觉,不太舒服。

然而,微信开发者工具的框架并没有像Vue一样提供现成的watch功能,需要靠自己去实现,在网上看了一会儿其他人怎么去实现之后,我也照这样子整了一个出来,但是实际上并没有像我想象的那样正常工作,而是没有反应没有发生任何变化。

大概思路可能就是属性描述对象的存取器(get和set),总之到最后,我感觉框架用多了也不是件好事,至少在使用框架的时候,对JS有更多的了解,了解框架是怎么通过原生JS去实现的这个功能,到最后会更重要。否则框架用久了,就只会框架了,框架会不停地迭代淘汰,但是自己却不知道框架下边的JS是怎么工作的,那就完蛋了。

逻辑层关系整理的重要性

最近学习了下微信小程序,在做一个小项目。

我发现经常去理清逻辑层关系,真的是非常重要,我的这个项目逻辑都比较简单,但是我已经觉得光用脑袋并没有那么容易理清关系了。

同样的,经常去理清逻辑层关系,可以更早的发现自己开始设计上的一些问题,使整个关系更清晰更松散,同时可以培养设计良好逻辑层关系的思维,感觉就像在造思想上的轮子,在思维的不断更新中,做项目的效率就会提高不少,同时做出来的东西的路线也更清晰。

每天敲点代码,每天学点新东西,每天都能感觉到自己的进步,这种感觉是很棒的。

短期目标:个人小站React版,打造一个让自己满意的组件

近期学习React,感觉学了Vue之后来看React教程很多概念都能理解了。也感觉到了一些Vue和React的不同之处。

之后想用React重做我的小站,使它更模块化,构架更加清晰。然后从我的小站构成组件中选择复用性较高的进行common化,然后发布到Github上边,作为我的一个小项目,哈哈。

接触React

这几天的流感把我整惨了,今天稍微好一些了。

考虑到之后想去的大厂基本都采用React,个人就也想着还是要接触一下。

而蚂蚁金服的Ant Design的教程非常有帮助,我觉得可能效率会比看React官方教程更高。因为Antd的开发者更清楚哪些东西更常用更关键,对我熟悉React有很大的帮助。https://www.yuque.com/ant-design/course

比如前端开发的演变,正巧前几天我初步学习后端,接触了Express,就是典型的MVC模式,之前什么MVC,MVVM这些我都一头雾水的,今天再看教程,就有一定程度的了解了。

 

近期学习感想

这学期结束了。。。

最近开始给自己的网站增加一些跟服务器进行交互的内容。前几天终于才把服务器与前端的概念正式理清,明白了反向代理的意思,大概了解了MVC框架,但是感觉还没有很清晰的认识,没有理解MVC存在的理由,相信等我搞定这次事件就能明白更多。多亏前段时间课程要求做的Linux实验,帮助我对Linux有了更多的认识,现在搭建服务器环境对我来说心里更有数,不像以前完全就是盲人乱抓。

真正的动态网站根本就离不开前后端交互,之前我所做的一切都在前端页面,与后端其实没有任何联系,只是一个单纯的静态页面而已,不过是JS带来的效果比较多。这两天查过去查过来,又回到了我的启迪网站——MDN,不得不说Mozilla的文档真的很给力,前端入门,服务端入门都有,实在是太棒了,对横向知识的补充非常有效率,因为有前因和介绍,可以帮助我了解它们的源头,理清关系,加快我的理解消化,有助于我的记忆。

目前的感觉就是在前端这个世界,我还是一个完完全全的新手,继续学习吧!

短期目标就是,实现前后端交互,了解更多服务端知识,让我的服务器派上更多用场,让我这个网站项目有一些真正发光的地方之后,就可以暂时放一放了,把所有的注意力放到前端开发上,参与有趣的开源项目,了解项目开发的基本流程,熟悉下git,给自己简历抹点金。对于找实习,希望自己有个充分的准备,能够得到大厂对我个人实力的认可。

Google广告是牛,才怪

居然会检测广告所在的父元素是否有关闭按钮,如果有就取消广告本身的关闭按钮。通过父元素关闭按钮关闭。

实际上,自己添加一个关闭按钮加个监听直接关掉整个块,比谷歌广告自带的关闭只是消掉广告内容留一片空白给你要好。


事实证明我想多了,跟广告本身相关。有些广告本来就有关闭按钮,有些是没有的。然而自己添加一个肯定是更好的,因为可以直接让整个广告块从网页结构中消失。

现在很多App内的广告也是这样的做法,但是点击关闭之后,客户端会收集关闭原因的信息来用于优化他们的广告投放,你要给予反馈之后,广告才会消失。

目前也开始初步学习一点服务端的知识,服务器还是要多用一些才行。

在Vue中用canvas实现多进度条

在我准备在年末发布的网站改进中,添加了首页banner切换的进度条。

说一下我想实现的东西。我要求切换3张图,某个图此时正在播放的时候,只有对应的那个进度条运作,其他进度条为0%状态。

首先我们就需要定时,比如我定时10秒钟切换一次。那么我就先要定义一个循环的定时器。

var interval = setInterval(function () {}.bind(this),50)

每50毫秒,执行一次函数。如果我要求10秒钟切换一次,那么我总共需要计数200次,添加一个计数变量per(这个per之后顺便实现其他事情),条件判断里边执行相应的数据修改操作,per++,然后再判断per是否达到200,达到清零。

在Vue中,我是通过组件切换来切换banner的。也就是<component :is='img'></component>;因此条件判断里边只需要修改img为相应的组件名即可。现在已经完成了图片切换。

现在需要添加进度条了。我选择了canvas来实现进度条,因为canvas的灵活度非常大,可以随便整。用canvas画进度条还是非常轻松的,只需要简单看一下HTML 5 Canvas 参考手册就可以画出来。

我要求整个进度条(3个进度条一起)的宽度为整个窗口宽度,每个进度条平分宽度。目前最容易的莫过于用flex布局。因此给整个进度条一个div,然后里边再装3个div,每个div里装一个canvas元素。由于三个进度条是完全一样的,因此我直接选择组件,节省时间又方便。(选择装canvas的div为模板的根元素)

进度条的进度自然是和时间有关系的,因此在组件中,也需要定义一个定时器(这个计时器可以不设置太高的频率,但是就会影响进度条的“分辨率”,看完下文就明白了)。当时间记满10秒,进度自然满了,所以进度条的宽度和计数变量per之间有联系,需要从父实例那里读取per,所以在子组件中的props中添加一个per(名字随便取便于辨别,我选择per),以便父实例传入参数。

现在还有一个问题就是,因为canvas的宽度和高度不是自适应的,需要自设,因此我们至少还需要读取canvas的父元素div的宽度(高度直接给几px也可以,但是宽度是根据窗口大小而定的),所以这个时候还需要获得div自己的宽度,查阅Vue的API文档,可以知道通过this.$el可以获取当前实例/组件对应的根元素,所以说this.$el.offsetWidth就是div的宽度。这个时候从生命周期钩子函数里把宽度值赋给数据,然后在canvas元素上用:width='width'就可以把宽度传到canvas里边了。

说一下canvas的基本操作,canvas是通过JS来画图形的。首先,通过var ctx = this.$refs.ctx.getContext('2d')得到画布canvas(在Vue的组件中,我先给canvas添加一个ref属性,值为’ctx’,然后就可以通过this.$refs.ctx得到canvas元素,然后通过getContext(‘2d’)得到画布。也可以用原生JS代码来选中这个元素。),之后ctx.beginPath()开一个新路径,意思就是要拿出一支笔,然后用ctx.strokeStylectx.lineWidth设置线条的样式和宽度,再用ctx.moveTo(,)ctx.lineTo(,)选择线段的起点和终点(两个参数,对应坐标轴的位置,第一个填x轴位置,第二个填y轴位置),最后ctx.stroke()画线。完成。

因此,进度条的宽度改变来自于lineTo中的第一个参数,当per达到200时,此时进度条满,所以说进度条的宽度和总宽度的关系为per/200*width。每次进度条组件的计时器的执行函数中,就需要调用一次整个画画的过程,所以建议在每次ctx.beginPath()之前,先执行ctx.clearRect(,,,)清除画板,四个参数,前两个为清除区域矩形的左上角的点的坐标,后两个为清除区域矩形右下角的点的坐标,直接清除整个canvas即可,ctx.clearRect(0,0,width,height)。

根据时间画进度条已经实现,但是,现在如果不是这个进度条的showtime呢?照上面的做法,三个进度条都会同时进行,显然没有达到我的目的。

因此,还需要一个flag,来指示现在的进度条运行状态。把这个flag作为实例的数据,然后传入三个进度条组件,组件判断flag的值(比如0,1,2),是否对应目前的进度条,所以,最简单的方法是再给每个进度条组件传入id,id写成xx0,xx1,xx2,通过判断id是否为’xx’ + flag来确认目前的状态,如果是,执行画画步骤,如果不是则执行clearRect(,,,)。

现在已经完全达到了我的目标,如果你熟悉Vue,做出这个进度条应该不会有什么问题。

总结一下,整个实现过程可以视为一个实例定时器和三个进度条定时器的故事。实例给三个下属进度条发送信号per和flag,对应进度状态和进度条运行状态。三个下属拥有同样的接收装置,但是下属需要一个特别标志id才能对flag做出判断。同样,接收装置可以设置更低的接收频率,当然,会影响进度条的“分辨率”,导致进度条看起来不那么顺滑,但是因为减少了执行次数,降低了浏览器的负载。在做的过程中,用到了很多Vue里边的内容,比如说prop(传参数),ref和$el(获取元素),transtion(过渡,主要用于图片切换,和本次进度条实现无关)这些,也算是初学Vue的一次比较不错的实践。另外,模块化真的是方便和顺眼。

我现在对网站的风格依然很迷茫,不知道我的网站应该做成什么样子,还没有自己的想法。可能是学的知识还不够,脑洞还不太够。

年末小总结

很快,距离高考已经过去两年多,继承我们的高一学生也到了高三。

大学真的比中学过得快。因为你没有那么丰满的课程安排去挤满一个白天到傍晚了,因为没有老师,家长(当然我还是有的)每天给你的压力,突然就在身心上变得自由一些了。但是,说实话,有很多的曾经的问题我带到大学来了,所以其实大学给我最大的机会就是,我能去解决它们,在大学我有更多的时间去思考我自身,我到底需要的是什么?我到底该怎么做?哪些事情没有意义,哪些事情需要坚持。

对我来说,答案也越来越清晰。实际上,每天做好每天的事情,就是最好的,因为每天都可能会发生一些出乎意料的事情打乱你的节奏,当你有能力控制自己的生活节奏,能有自己的基调的时候,其实你就很强大了。

没有问题的人不会过多地发言,所以我希望明年能够拿出更多的干货,博客里的高频词汇是技术性的东西,而不是很多感叹生活,感叹人生的句子,人之所以经常感叹是因为当下过得不如意,说说话发表点感慨来激励、安慰自己。我希望我是自信的,安静的。

明年应该比较轻松了,没有那么多杂七杂八的课程了,想练成一项技能——肝。我是偶尔才去肝一下,因为没有那个能量去肝,提不起兴趣去肝,被认定没有意义的事情更是草草了事。心态不够平稳,急于看到结果。嗯,有些人天生就有的技能,我们真做不到啊,性格使然,但不是借口。明年真真正正肝一回。

压岁钱拿不了几年了,到时候还要跟小辈比起。可惜现在身在成都,难见烟花了。现在的小孩生活都是什么样的,说实话,我们这些90末都已经懂不起了。现在的网络发达,有利有弊,给我的感觉,弊大于利,特别是现在国内大头公司的社会责任感真的不够,阿里在这方面算做的比较好的。

说到说到又偏了。夜已深,强行结尾。身体心态都要保持健康,睡觉了。

Vue的对象更改检测注意事项

今天碰到一个问题,花了几个小时终于再次在Vue官方教程找到了办法。

教训啊

增删Data中的对象的属性不要这样做—— xx.yy = zz,这样是非响应式的。最好按照Vue官方教程所说那样修改,或者嫌麻烦可以用xx = {yy:zz},前提是你的属性不多可以自己一个个列进去,如果多那最好就采用官方教程那样, xx = Object.assign({},xx,{yy:zz})

数组自然同理,教程也有提到。

如果你是这么做,但是发现“可以修改啊!”。因为你有其他的对象属性发生变化了,触发了重新渲染,上面的做法仅仅是无法响应,但是代码是生效的,一旦触发了重新渲染,效果是一样的。

Vue对象更改检测注意事项