我对Backbone.js的一些认识 - 流云诸葛

      2020-07-02 19:54      HTML5

backbone.js已经不是当前最流行的前端框架了,但是对于我而言,依然具有比较好的学习价值。虽然目前来说,react,vue等mvvm框架非常火热,但是感觉自身还不到去使用这种框架的层次。这些技术虽好,但是对个人的挑战也是比较大:首先是在编程基础这个部分,包括数据结构,算法,面向对象编程,设计模式,设计原则等等,我觉得在这些方面积累地还不够;其次是工作方法层面,对比angualr,react以及vue,跟传统的用原生js或者jquery写的代码,包括html,css和js三个方面,你会发现这两种技术直接导致的我们在工作结果上的巨大差别,这对于已经习惯了传统开发的我来说,要挑战的不仅仅是新技术的学习跟研究,更多的是工作思路,工作方法甚至是跟其它同事配合协作方式的改变,这个难度也很大。再加上我本人是一个还比较喜欢去钻研细节的人,所以从去年开始做前端开发到现在,一直都没有大胆地学习很多的新东西,相反,我把更多的精力花在了编程思维的锻炼以及基础知识的巩固上,这件事情看起来很小,但是对我的提高很有帮助。

我还记得去年我刚到上家单位的时候,是顶着比较大的压力去做前端的,因为工作第一年,我在武汉做的是VB.NET的开发工作,技术锻炼的很少,逻辑思维方面跟sql方面锻炼地多,因为公司做ERP系统,有封装很好的技术平台,套着用就行了,所以工作都花在写业务逻辑和数据逻辑上;工作第二年我来了北京,在用友做软件实施,折腾了大半年,最后还是觉得在北京做技术最挣钱,就回到了这个本行;到上家单位的时候,情况是:公司当时没有前端,也没有封装前端任何的东西,我也没有专门做过前端,以前做的开发还是VB.NET的后台开发,所以当时我也比较担心怕完成不了当时的工作任务。幸运的是,当时正好赶上一个紧急的项目,公司给机会让我搭一套前端的架子,其实他们要求也不高,能把各种插件套上就行了。我当时想的是,既然要做前端开发的话,有这个机会,还不如自己动手好好模仿以前公司的开发平台写一套东西出来。当时项目非常着急,我们一伙人连续20天的下班时间都在凌晨1-3点之间,我作为唯一的前端,能够做的就是在后台的同事需要某个东西之前,就提前把它开发出来。我就是在那段时间憋出了自己的第一套可以当做开发平台用的东西,虽然这套东西,我到现在都觉得拿不出手,但是它对我起到的作用是,让我开始对代码的重构和设计产生兴趣,我才开始去注意封装思路,以及设计模式和设计原则在编程中的实际使用。曾经写的那一套很粗糙的东西,后来我重构了3次,第一次重构是为了优化API的使用方式,让它更好用;第二次重构是改写各个组件内部实现的方式,并提供各个组件的详细使用文档,以便其它不是很擅长js的同事也能快速使用;第三次重构是使用requirejs做模块化,并且完全跟后端分离,原来有些组件还是借助jsp来搞的。。。虽然我走了,曾经的同事还在使用我写的东西继续开发,而且会用的人都觉得用起来还挺简单的;更有意思的是,同在上家单位的另外一个很好的朋友,5年的java开发经验,几乎不怎么做前端,连ajax都不怎么会,在他前段时间去另外一个单位的时候,用我跟他搭的这一套前后台的东西,竟然自己一个人搞定了一个内部管理系统的所有前端功能。

上家单位的工作经历,让我开始重视自己的代码质量,关注设计模式与设计原则,平常都有意去看相关的博客和书籍,目前来看,成效也很明显:首先是很习惯性地在代码中融入职责分离与开闭原则的思考,我以前写的几篇博客都有相关的提及;其次是部分设计模式在代码中的实际运用,包括单例模式,单例模式,适配器模式,状态模式,观察者模式等,用多了,对它们的理解也就更深刻了。在过去的一年,我还关注的东西有前端工程化构建,js模块化,浏览器缓存管理,移动端页面开发包括适配及优化等,这些都不是很高大上的一些技术名词,仅仅是前端基础知识的范畴,我去了解它们的目的,是觉得这是把这个岗位的工作做好的准备。正是这些对编程思路和基础知识的学习,我现在看到一些新的功能,都能很快地形成工作思路,如果是要写代码的,很快就能想好要写几个类, 看清哪个地方又得拆分成多个类才能让它们之间不会有强耦合,以及跨项目的复用等问题;在工作中,我在现在岗位上能够一个人独立地完成整个前端的工程化管理以及公司产品从后端到PC端以及移动端的所有开发工作,能够整体把控项目的所有代码,而在一年之前,我还是一个刚从软件实施转回软件行业的前端小白。所以我今年也还是不着急去追逐其它火热的技术,继续搞自己的编程思维跟巩固基础知识,前端技术变化那么大,学那么多用不上也不见得是好事,相反把一些工作中也许会用到的好好琢磨透,也许会来的更有意义。比如说,我个人对动效和svg不是很擅长,那么过一段时间,我就会去专门研究这方面的内容,直到自己也能做出一些别人能比较认可的效果出来才行,这样的好处是,在你工作需要的技术范围内,你方方面面都能做地很好。

回到我这篇文章要介绍的backbonejs上来,我为什么在这段时间会去琢磨一个现在不是很火热的前端框架,而且还认为它有比较好的学习价值。因为基于backbone的Model与View的开发方式,或者说它提供的面向对象的代码组织方式,跟我目前惯用的思路还是比较像的,尽管我已有的代码都是jquery搞的。但是它又要优于我现在的编程方式,因为它里面有一个数据驱动UI的思想在里面,而且还有一个很好的内置的事件管理机制,使得它在一些封装层面的东西,比我写的更要严谨,清晰一点。只要是能够提高代码质量的东西,我都认为是编程基础的一部分,这正是我目前仍然想花时间去钻研的东西,所以我想学习。即使不用它做任何的项目,只要把它的思想,能够渗透到我现在的思维中即可,这个我感觉也不太容易,所以我得花一小段时间,才能掌握好它里面的一些机制。我学习它的主要方法是阅读官方文档和写东西实践,阅读文档过程中对于自己有疑问的api,必须写一些简单的代码才能知道它的详细作用。好在它官方文档组织地还不错,所以在学习过程中,需要去测试的api并不是很多。然后为了了解如何在实际工作中运用backbone编写代码以及它与我现在的编程方式上的区别,我分别用jquery跟backbone写了一个todo app。简单起见,jquery实现的版本与官网的功能完全一致,当然代码是不同的;backbone实现的版本在官网的基础上,考虑了异步回调处理以及操作的交互还有批量请求的处理,使得这个简单的app看起来更符合实际的产品需求。最后我发现,虽然这两个版本实现方式不同,但是思路层面却有相似性,这个去看一下两份代码中定义的类名就清楚了。下面是两个版本的demo地址:

jquery版本的预览地址

backbone版本的预览地址

源码在:https://github.com/liuyunzhuge/blog/tree/master/todos