flappy pig小游戏源码分析(3)——解剖util

时间:2023-03-08 17:53:48
flappy pig小游戏源码分析(3)——解剖util

这一节我们继续高歌猛进,如果对源码中有无论无何都理解不通的问题,欢迎和我交流,让我也学习一下,我的qq是372402487。

还是按照惯例看看我们的目录结构。

flappy pig小游戏源码分析(3)——解剖util

我们在前两节中已经分析了game.js,和option.js文件,现在的你应该初步形成了模块化的设计思想。这一节的内容带领大家学习程序员装逼必备——工具类,也就是util.js文件。

那么什么是工具类呢?工具类实际上可以理解成一系列的通用方法。比如一个网站,有评论模块、博客模块、注册模块等等,虽然他们功能各不相同,但是他们都需要做一件事情,就是操作数据库,一个菜鸟程序员经常犯的错误就是,写评论模块的时候把数据库操作的代码也写在里面了,然后写发布博客模块的时候突然想起来:"嗯,我可以把评论模块里的数据库操作代码拷贝过来,改改就能用了",于是写了5个模块,复制粘贴了5次大致相同的代码。这还不是最可怕的,最可怕的是,你突然发现,好像数据库操作语句中好像写错了一个字符串,于是你一点一点的找到每个模块中相应的代码改正,要是你的老板看到你这个样子,估计你就得卷铺盖走人了。

真正潇洒的程序员们是这么做的,创建一个util工具类,其中实现具体的数据库操作细节,暴露接口供其它模块调用,一旦出错,改改util就是了。

说了这么多,我们来看看flappy bird中的util.js究竟实现了哪些通用操作呢?


var flappy = (function (self) {
'use strict'; //工具
self.util = {
preventDefaultEvent: function (event) {//阻止默认事件
event = window.event || event;//兼容IE
if (event) {
if (event.preventDefault) {//如果支持preventDefault实现阻止默认
event.preventDefault();//那么flappy.util.preventDefault()就用event.preventDefault()来实现
} else {
event.returnValue = false;//如果不支持,那么flappy.util.preventDefault()就用event.returnValue = false来实现
}
}
},
$: function (id) {//这相当于一个选择器
return document.getElementById(id);//简化通过id获取元素的方法,之前的document.getElementById()实在太长了
},
getChilds: function (obj) {//顾名思义,这是用于获取子节点的简化方法
var childs = obj.children || obj.childNodes,//这里不理解的朋友看搜一下children和childNodes的区别
childsArray = [];//定义一个子节点数组
for (var i = 0, len = childs.length; i < len; i++) {
if (childs[i].nodeType == 1) {//只获取nodeType为1的节点,也就是element节点
childsArray.push(childs[i]);//取出element元素
}
}
return childsArray;//返回element类型子节点
}
}; return self;//之前flappy = {options:{xxx},现在flappy = {options:{xxx},util:{xxx}} })(flappy || {});

可以看到util.js很轻便,只实现了三个方法,分别是:阻止事件默认动作、通过id获取元素、获得元素的子节点。

阻止默认事件由于各家浏览器没有达成统一的标准,所以这个方法负责兼容不同的连浏览器,使用者只需要调用util.preventDefaultEvent就可以了而不需要考虑坑爹的兼容性。

由于document.getElementById()太长了用的很难受,于是包装一个util.$(),简单方便。

最后大家看到元素javascript获取子节点的过程多多少少还是有些麻烦的,所以我们实现并提供一个util.getChilds()接口方便调用。

可能有同学会说,这些方法jquery实现了啊,我直接用jquery不就行了?确实jquery实现了,但是首先这个游戏中只需要几个简单的工具方法,没有必要用一个大缸只装一个包子,其次我们应该学会的是将编程当作一中个人工具来解决遇到的问题,只会使用插件和库函数的程序员永远是被动的。