前端页面逻辑

最近做了几天令人窒息的前端开发，被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什么的。