5

背景

由于项目原因,从一个Windows客户端开发,跳进前端开发这个大坑。从一开始的茫然,到下定决心放空心态学习,到现在逐渐有了清晰的思路。我想,许多从客户端(后台)转来学前端的,应该和我有类似的经历。

1段:指令化编程

一开始学习的是基本的html,css,用简单的javascript操作DOM。这是最迷惑的阶段,抛去HTML/CSS的各种标准,各种浏览器的兼容等干扰信息。在页面中的script标签中,写下操作DOM的代码。
这个阶段,像极了刚开始学习C语言,做作业的场景。一段代码,完成一个任务。

2段:函数(库)式编程

项目中遇到了稍微复杂的需求,比如msgbox,slider等,网上搜到的都是jQuery的扩展。于是乎发现了jQuery以及Zepto,好像终于发现了终极武器,从此信步于代码江湖。原来这些都是YY,写一些些简单的页面骗骗妹子可以,真正的生产环境中,这才是初级。
这个阶段,像极了学习数据结构时,用C写一些简单的应用,比如一个简易编辑器。会用到很多其他人封装好的常用操作,比如文件操作等。

3段:结构(模块)化编程

随着项目变多,很多东西可以沉淀下来,在其它的项目中使用。这就需要把一个特定的功能的文件封装起来,当有项目需要时,可以引入进来。这里要解决全局变量命名空间污染问题,作用域问题等。比如,AMD、UMD、CommonJS标准,再比如requirejs,seajs,nodejs等,都针对这个解决了问题。只有到了这个阶段,工程化才能真正的起来。因为不用重复造轮子了。
这个阶段,像极了用C语言开始工作后,使用公司及外界现有模块开发。

4段:面向对象编程

手头的模块逐渐多起来,但还是多不过变换无穷的需求。有些需求,用A模块实现了,但下一个需求,和A类似,于是有人写了B模块。当你用的时候,会纠结于用A还是B?那么我看下载量吧,选了一个下载量大的,结果下载下来,还是需要手动该一些代码,才能适合自己的需求。现在npm,估计很多都是这种情况吧。只有语言更深一步的抽象,更好的封装,且在一个强大的基础类库下,才是个好的解决方案。React,Backbone,ES6以及各种框架,也模拟了面向对象的一些特性。
这个阶段,回想起Borland公司的Delphi和C++ Builder,在Windows客户端开发时期的辉煌,就把这个玩到了极致。

5段:组件化编程

还原真实世界,工程无一不是由各种基本的元件搭建起来的。到了软件工程世界,就是组件化编程。这是工程的最高效率阶段,各种“快速开发工具”纷至沓来。市面上有各种酷炫的组件,并号称“一行代码就能让你的项目也同样的吸引眼球”。还是Borland公司,把这个玩到极致,回想起为了实现一个效果,第一反应不是如何从技术考虑,而是在网上找“控件”的破解版。同样,遇到了bug,很少自己去修改(也很难改),而是再去搞一个控件来。目前,React正在这个阶段发展,当各种Component积累成熟后,前端开发效率会进一步提升。
这个阶段,对标的还是Borland公司,还有微软的COM技术。

6段:面向服务

面向组件的缺点是明显的,为了一个效果,引入一堆代码(以及bug)。我只需要你的服务就好了。把组件功能封装成服务,通过通信协议(RPC,HTTP等)和自己的工程链接起来,就能完成需求。这个阶段还没有明显的对标,我想各种统计代码从概念说应该是相当的,还有各种api接口。也就是说,前端技术中,很可能把面向服务形式,转移到了后端中。

7段:分布式/虚拟化

当网络及虚拟化技术不再是门槛,那么通过分布式及虚拟化技术,能将工程快速部署到各个平台,各个互联网角落。这个阶段前端开发反而不用考虑了。因为分布式天然的网络环境可以提供,而虚拟化由js引擎已经考虑到了。而面向技术的虚拟化已经慢慢开始,React-native,angular,都在慢慢开疆扩土。

附加:打包,部署

在传统的客户端开发中,这些都是IDE提供的,但前端开发却百花齐放。r.js,webpack,browserify,grunt,gulp,duo等。其实不必乱和纠结,找到一个适合自己的就可以了。

总结,至此,经历了一个阶段(半年了吧)的js采坑,才慢慢的思路清晰起来,技术的发展路线都是有规律的。前端的乱,其背后还是有一条清晰的主线的。


techfellow
524 声望5 粉丝