文章导航

接触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对象更改检测注意事项

我的学习思路和框架

兴趣驱动,简单了解,简单实践,需要做某些事却没有能力的时候认识到个人的不足,开始系统学习弥补不足之处,然后实现上次没有完成的事,产生新的目标,继续学习(系统+散学),往复循环直到质变发生。

个人并不喜欢循规蹈矩式地学习,认可系统学习的必要,但是有时候有些技能尽管超前于基石技能了,但是也要点。因此有时候可能不是从下往上学习的,而是先了解了一些高层的知识,转而回头弥补之前的基础不足,但是不同点在于这个时候弥补基础的效率会比较高,更容易理解一些内容。

(未完稿,待完善)

开始学Vue啦,以及消除广告的小tip

JS的学习告一段落,对JS的很多东西都大致有一个印象了。还是想先了解下框架,之后选择了Vue,因为尤大本来就是国人,所以相对来说中文社区更为给力,解决问题效率会更高,官方文档也是全中文,无压力。但是说实话,英语还是特别重要,对于学习前沿知识,解决疑难杂症,英文不熟练是不行的。现在我是发自心底的重视英语啊。

接下来就是消灭广告的小tip。

 

看到右下角的广告了吧,不管你怎么拖动窗口,它始终都在那里吸引你的注意力。现在我们来操作消灭它。

将鼠标置于图片上,点击右键之后会出现菜单,点击“查看元素”(其他浏览器可能是“审查元素”),就会变成这样。

通过点击“查看元素(审查元素)”,我们打开了浏览器开发者工具(Dev Tool),把视线转移到小红圈那里,很明显的id名称:“ad”,也就是广告的意思,这代表一个广告模块,现在红圈圈住的那里点击右键。

现在变成现在的情况了,直接点击菜单上“删除节点”(英文开发者工具应该为“Delete element”)。

广告消失了。

!!!注意广告消失仅限于本次浏览,当你刷新或者各种导致整个页面重新加载的情况,都会再次看到广告,你就需要同样的操作才行了,因此这个tip是给需要长时间浏览同一个页面的人看的。!!!

这个tip的原理就是:你浏览的网页其实都是先从网站服务器下载了网页文件,存到本地之后才通过浏览器渲染显示出来的,因此你可以通过浏览器修改本地网页的数据,直接消除那个广告块就可以(所以这么做是不可能修改得了别人的网页的,不要想太多),但正因为这样,当你重新加载之后,网页已经不是之前的网页了,因此广告又会出现。

*要提示的是,我使用的是火狐浏览器,因此开发者工具都是中文的,但是大多数浏览器的开发者工具可能都是英文的。但是解决问题的方式是一样的——通过在广告图片上点击右键(这里同时就选中了广告图片元素本身)打开菜单,然后选择“查看元素”(其他浏览器可能是“审查元素”),此时开发者工具被打开,顺藤摸瓜找到id为ad的div,点击右键,点击“删除节点”(其他浏览器显示英文为“Delete element”)即可让广告消失。

知识焦虑时代

有时候我非常焦虑。因为感觉自己懂的东西太少太浅,很难在这个快速发展的时代有比较强的竞争力。

焦虑或许是必经之路,想要不焦虑的想法必然是经历了焦虑的人才有的。但是焦虑有什么实际作用吗?除了让我更心慌,效率更低,似乎没有别的作用。

其实我们更需要接受此刻现在的弱小,但是不代表放弃,而是不停地成长。没有谁是一开始就很厉害,但是在你毫无长进的时候,别人正在一直学习和成长,差距就越来越大。不怕有差距,就怕根本看不见差距。知识焦虑,知识匮乏是正常的,但是不能没有方向,觉得哪头好就往哪头跑,一天可以改变几次方向,最终的结果很明显就是一事无成。一开始就想清楚需要做什么,然后坚持做下去,一门心思放进去,真的需要两耳不闻窗外事,因为注意力是很容易跑开的。古时有高手闭关,今天也是一样,我们平常能看到的活跃者大多数都浮在面上,因为水平不高没进步了,才出来寻个饭碗,寻个喝彩。真正的高手昙花一现。

还有想说的就是,现在的互联网时代,是注意力时代,各种信息鱼龙混杂。各种公众号自媒体,参差不齐的信息质量,标题党,都在蚕食你我的注意力,这个信息看一分钟,那个信息看一分钟,可能十几二十分钟就没有了。其实这个互联网时代是最无情的,它用温水煮青蛙一样的方式在消耗每一个人的精力财力,而我们可能还没意识到,各个大头平台并不会尽人道主义责任,反而从中获取利益(比如百度手机版的网页下方永远有各种基于你的访问爱好的内容推送,B站各种营销号等。),因为不能落后,也管不了那么多了,别人有的我也要安排上,不然用户就跑了。作为个体,我们只能自己做改变,明白自己要做什么,有足够的力量了才可能去尝试改变整个大环境。