新浪微博的前端Jobs模块

最新推荐文章于 2022-11-15 10:50:39 发布

唐巧

最新推荐文章于 2022-11-15 10:50:39 发布

阅读量1.3k

点赞数 2

文章标签： jobs 新浪微博 function filter html input

本文链接：https://blog.csdn.net/coldwindtang/article/details/6376941

版权

今天无聊，翻了下新浪微博的前端代码，找到了他们的Jobs模块的实现，加了些注释，然后分析整理了一下。先看代码：

可以看出其逻辑非常简单，Jobs类里面有一个_registedJobTable，所有的Job需要调用$registJob方法将自己的回调函数传进去，之后这个Job就算定义好了。对于每个页面，所需要的Job组合可能是不一样的，这时候只需要将自己需要的Job一个一个add进去，再调用 start方法就可以了。下面这段代码是新浪的首页调用Job的代码。

var a = new Jobs(); a.add("initSearch"); if (scope.$uid === scope.$oid) { a.add("poppublish"); a.add("publisher3") } a.add("close_anti_cheat_tip"); a.add("topic"); a.add("loadComment"); a.add("init_input"); a.add("paging"); a.add("bigpop"); a.add("keyword_filter"); a.add("atme_filter"); a.add("maybeYourFriend"); a.add("mbloghead"); a.add("splitLoadMyProfile"); a.add("splitLoadMedia"); a.add("hotkey"); a.add("grouporder"); a.add("addgroup"); a.add("popUpCard"); a.add("medal"); a.add("webim"); a.add("advertisement_fxl"); a.add("missionBox"); a.add("start_suda"); a.start()

从Job命名上基本上就可以猜出来是干啥的了。
所以，新浪的Jobs功能实际上是一种功能的模块化定义，将页面的每个小功能模块定义成Job，之后，每个页面根据自己的需要，把Jobs拼装起来，就完成了整个页面的功能。

应该说，新浪的整个Jobs功能和网易微博的Task概念是基本一样的。不过我们在具体实现上稍有不同。我们是实现了一个Task类，每个具体的Task 在 new Task时，传入当前task的名字和回调函数，并且调用其add方法将自己加入了TaskManager中。例如:
var task = new Task('myTask', function() { ...}).add();
这样在最后，调用TaskManager的run方法，就可以把Task一个一个跑起来了。