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