快速构建前端系统学习入门之路

Posted by 跳跳龙 on December 23, 2017

(文章版权归笔者跳跳龙所有,谢绝转载,请勿拾人牙慧)

最近很久没有更新博客了,主要是最近被定位为(di)(duan)(ren)(kou),在帝都换了一下房子,折腾了一段时间,心情低落的很。难得今天天气还算是不错,写点关于最近做的事情。

一般对于黑客而言,写前端往往是一种浪费时间的一种行为,一般黑客都是对后端,数据库以及操作系统底层更加感兴趣,因为前端重在展示,往往和黑客所追求的一些东西相违背。但是最近接触了react技术栈,目前虽然还没做完,但是我还是想把我对react的一些看法和简单的皮毛跟大家分享一下。

在以前呢,“前后端分离”这个词还没出现的时候,一般都是怎么完成web研发的呢。我看过一些php的cms源码。很多php的逻辑中直接返回部分html代码。你没有看错,那个时候前端代码就是这样写死在后端代码里的。如果是对于单页面应用或者小项目的话来讲,其实感觉也无可厚非。但是你会发现,如果这是个大项目的话,你的后端有几百个甚至上千个模块,每个模块中的函数都返回这样或那样的一段html,你就会觉得天要塌下来了。

再后来,有了“前后端分离”这个概念以后呢。你会发现整个web应用瞬间简单起来了呢。

这样前端工程是和后端工程师只要定义一个规范,那就是双方通信是数据的格式就行。一旦双方遵守这个约定,从此再也不需要打打闹闹了。前端可以通过mock来获取一些假数据,反正假数据跟后端返回的数据格式是一样的,只要等到双方都完成相应的开发,就可以一起联调对接了。

写跑题了,回到前端上。

后来由于jquery以及bootstrap的风行,前端有相当大的进步。写前端的思路就变成开发前端模板。前端模板里没有数据的,只需要往里传就行了,你传什么就显示什么。这样把很多零散的前端代码组合起来,更加好管理,好理解了。

现在又出了React vue这种跨时代的前端解决方案。老实说,我觉得这东西是个技术栈,不能简单理解成一个框架。当你面对一个前端的时候,你不要把它当成模板。他已经不是模板了。我们就把他当成一个空白页,对,一个空白页。这个空白页上的东西我们给他起个名字,叫做组件。

名字嘛,就是让人叫的。那什么是组件呢?我们画个图就好理解了

这里面有好多组件 组件1 2 3 4 5。当然了这是我随意划分的,怎么划分组件每个人都有自己的划分方式。

组件就是对象,你可以这么理解。也就是说我们给前端赋予了面向对象的编程思想,对,就是这样。

既然是对象,那他就有属性 就有方法。比如这个组件里的一些数据就可以是属性,你点击了什么触犯了一些列的动作,这个动作描述就是方法。

组件A可能会给组件B传一些数据,这就是组件之间的通信。(类似于对象A给对象B赋值) 关于组件状态的管理呢,就是redux的出生的意义。组件状态属于属性里的东西,当一个组件的状态改变了,比如按钮被点了,这个时候就可以导致组件状态的改变,当组件很多的时候,状态管理十分复杂,这个时候我们就可以参考redux了。

那每个组件长什么样子,长得好不好看,原本是css的功能,这个东西你同样也可以在写在对象里面。说到这里,如果有很多组件让我们随意的去使用就好了。你说的没错,这个东西就叫组件库。也就是说,如果你很懒,不想自己去手动的写html css 或者js。有大把的组件给你直接去用。这里大家可以看一下国内蚂蚁金服的Antd组件,现在连专业版都出来了,懒人福利啊。当然你要是觉得这个组件写的不好,你可以把这个组件类继承过来,然后再去修改,改成你想要的样子。重新开发一个组件的话我觉得虽然难度也不是很高,但是必要性不是很强,看个人爱好了啊。

还有一个模块,那就是前端路由。这里我们使用的是React-Router 写个后端的人肯定知道MVC架构,这个思想同样被搬到前端的技术里面来了。比如你访问

http://localhost:3000/#a

这个时候我们切换组件A

当你点击

http://localhost:3000/#b

这个时候我们切换组件B,这个过程不会发生网络数据交换的,一般这种情况在第一次刷新的时候,准确的说是组件在被挂载之前就通过Ajax获取过来了,并且存到组件的熟悉中了。也就是说这个时候对象已经有啦。只不过你没看见而已。就好比你生命中最重要的人一直都在你身边一样,但是你都给人家忽视了。

最后还是觉得提一下脚手架,我之前一直不理解这玩意,其实这名字起的怪怪的。大家在创建项目的时候肯定不可能自己一点一点的下载安装库,自己改配置这些破东西。这玩意就是脚手架。有了它,这些事情咱们都可以不用做。

以上是我对React的一点见解,毕竟我也不是专业写前端的,有时候写点东西发现你展示不出来,其实也挺痛苦的。所以我觉得痛定思痛,了解一下前端的技术。

给大家推荐一个React教程 React小书 这个教程真的太棒了。但是我想说一定先去把这个react思想感受一下,当您感受到 “卧槽,前端居然还能这样写…“的时候就可以看这个React小书了。