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實現了，可是首先這個遊戲中只須要幾個簡單的工具方法，沒有必要用一個大缸只裝一個包子，其次咱們應該學會的是將編程看成一中我的工具來解決遇到的問題，只會使用插件和庫函數的程序員永遠是被動的。