前端页面逻辑

最近做了几天令人窒息的前端开发,被js那一套逻辑弄得脑袋都要炸了。

做php的时候习惯与把一些常用的功能封装成固定的模块,每次都去调用就可以了。对于一些没法封装的,就把代码写在固定的代码块中,让编辑器去为我们提高效率。

可是如果太沉迷于这种理念,就会让自己灵视暴涨,然后疯掉。举个例子,很久之前我在我们的代码库中见到过这样的函数:

function split($str){

return explode(',',$str);

}

简单来说,任何一种理念在编程中如果被过度运用的话,一定会验证了“物极必反”的道理。所以,如果一个函数的逻辑不是很复杂,或者是复用性也不太高,还是直接写吧,不然传值也很麻烦。一个explode函数封装了三四层,中间丢了个参数,结果整个一套全都爆炸了。

接下来进入正题,那就是前端页面逻辑的问题。

本文中所有的前端代码都建立在mui框架基础上,如果对这个框架不太了解,可以访问dcloud.io。

在一直以来对前端开发的浅尝辄止中,我发现一个页面中总是有一套这样的逻辑。进入页面时载入全局变量,然后绑定上下拉事件,绑定全局的点击事件。然后进行主业务的ajax,拿到数据后循环数据包,灌入dom结构中。之后局部绑定点击等事件。

如果这一套能设计成模板,在以后的开发中一定能省下很多事情吧。手痒的我,开始了第一阶段的设计。

第一阶段

出于面向对象程序设计思想,我打算把页面中的任何一个能叫得出名字的东西都定义为一个对象。一个页面中一定有固定的page对象和一个主业务对象。最初的模板是这样的。

其中,dom被定义成了一个单独的对象,作为生成器使用。页面上下拉的逻辑是独立处理的,下拉就刷新当前页面,上拉就页数加一然后进行获取新的数据。任何一项业务都被定义成了一个单独的对象,对象下有三个方法,分别进行获取数据、生成dom、绑定事件。三个方法互相调用,ajax作为一个对象的入口。

这个模板如果用来实现一些重要性比较低(比如圈了钱就可以跑路)的需求,那足够了。但是如果是自己家的产品,这个模板还远远不够。这个模板看似没有什么问题,页面载入的时候先调用page.onload进行载入处理,获取一些全局变量,然后调用page.on进行全局的事件绑定。页面准备好了之后,进行主业务,获取数据,生成网页元素,绑定事件。业务貌似可以自己跑起来了。

但是!

但是有很大的问题。

我们的首席前端UI设计师兼前端逻辑架构师兼端茶倒水扯犊子委员,坐在我旁边的G.D.,无情地指出了我的问题。

下拉刷新不能真的刷新页面,还有一些业务处理完,也不能立即刷新。比如这是一个帖子列表,有删帖功能。好不容易翻到第十页,删了个贴然后刷新了。想删下一个贴的话就还得费好大劲翻到第十页。

上拉加载的page++不能写在ajax的时候,如果这次ajax失败了,那当前页的数据在本次生命周期内就永远不会获取到了。

每次loadToDom的时候都要触发绑定,那翻到第十页的时候岂不是会绑定十次点击事件。

页面太jb丑了。

这波让我想起了当年和另一位小伙伴一起玩星际的情景,就是我一个萌新,被老玩家虐得体无完肤。

然后,我找这位老玩家要来了他一直在用的模板。在老玩家的模板中,首先没有解决我的页面太jb丑的问题,因为页面是我自己写的,老玩家也救不了我。单看页面逻辑,老玩家的模板中,将dom生成器放在了每个单独的对象中,并且将“生成dom”和“将dom放在页面上”这两件事分开,并且在循环生成dom的时候使用的是虚拟dom,成功避免了我这种循环增加innerHTML的卡顿。

老玩家的模板中很细致地写了下拉刷新的业务,并不是简单地重载当前页面,而是将页数置1,清空数据容器,重新获取数据,最后结束下拉动画。上拉业务中,将页数加一放在了整个上拉函数的顶端,然后获取数据,最后结束上拉动画。

在每个对象中加入了handle方法,作为整个对象的入口。第一个参数first指明是否是第一次调用。第一次则会触发最后的绑定事件业务,这样设计避免了重复绑定的问题。

还有一系列的小问题,看上去只有我这种不到10级的新玩家才会出的小问题。在90级玩家的模板中都不存在了。

于是,那一个项目我改得特别痛苦。在使用模板的过程中,我发现照搬永远是最难受的。首先是对对方的业务逻辑不是那么明白,导致整个模板不是很详细地知道哪里是做什么的;其次就是本来写好的页面逻辑跟模板差太多,照搬模板改,跟重写没什么区别。

在重写了两个页面之后,我决定使用西瓜皮擦屁股的方法,虽然磨磨唧唧,但是好用。

第二阶段

第二阶段只是给第一阶段打了个补丁,更准确来说是用西瓜皮擦了一波屁股。虽然好使,但磨磨唧唧,不适合一直用,也不适合再改了。越改越墨迹,这个屁股就该切除了。

首先,按照每个页面中有几个对象,分别为它们var一个全局变量first_*,用于判断是不是第一次,相当于满级玩家模板handle方法中的first参数。然后改下拉和上拉方法,让刷新时候的手感不是那么诡异。至于循环+=innerHTML的问题,下次再改,页面很小,不会有太大的卡顿感。

在ajax的时候不用随处都showWaiting,真的很像80年代的门户网站……手感差得一批。waiting状态交给下拉的小球和上拉的雪花就可以了。

这一波改,除了页面不好看,就都可以勉强赶鸭上线了……页面丑的问题,我打算找满级玩家再帮我改一改。改个宽度,改个背景色,加个float什么的。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180405G0GPAZ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券