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

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

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

我们在前两节中已经分析了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实现了，但是首先这个游戏中只需要几个简单的工具方法，没有必要用一个大缸只装一个包子，其次我们应该学会的是将编程当作一中个人工具来解决遇到的问题，只会使用插件和库函数的程序员永远是被动的。