Seajs 實踐(一)—— 模塊化 2048 遊戲

前言

前段時間在慕課網跟着視頻作了一個簡單的 2048 遊戲，發現這個小項目很是適合用來實踐 Seajs 模塊化，如今就把個人實踐過程和你們分享一下。

實踐過程

準備

沒有進行模塊化以前總共有5個文件：

• index.html 遊戲頁面

• 2048.css 遊戲樣式文件

• main.js 程序入口文件

• showanimation.js 遊戲動畫文件

• support.js 基礎函數文件

main.js 須要使用 showanimation.js 和 support.js 定義的函數。

showanimation.js 須要使用 support.js 定義的函數。

除了這些文件以外，這個項目還用了jQuery的庫，用了百度的cdn。

目前 js 文件引入順序以下:

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../static/game/support.js"></script>
<script src="../static/game/showanimation.js"></script>
<script src="../static/game/main.js"></script>

目錄結構

源文件能夠在這裏找到，有興趣的朋友能夠下載下來嘗試一下。

引入Sea.js

在Seajs官網下載Sea.js(本文用到的版本是 2.3.0)。在static目錄下創建一個lib文件夾，存放下載下來的sea.js。

而後引入：

<script src="../static/lib/sea.js"></script>

CMD規範改寫

CMD ( Common Module Definition ) 是Seajs遵循的一種模塊定義規範。規範當中，一個模塊就是一個文件，所以我按照CMD規範改寫 2048 遊戲的3個 js 文件。

SeaJS 裏，推崇的 Modules/Wrappings 規範是 CMD 規範：define(function(){ }) 直接是由開發者手寫的，寫完後，可直接不通過任何構建工具就在瀏覽器上加載運行。

define(function(require, exports, module) {
     var a = require("a")
     exports.foo = ...
 });

首先，main.js、showanimation.js 和 support.js 三個文件都用 defined 函數包裹起來，define 接收一個匿名函數做爲參數，該函數傳入默認的三個參數 require、exports 和 moudule 。

define(function(require, exports, moudule){
    // support.js 代碼
});

define(function(require, exports, moudule){
    // showanimation.js 代碼
});

define(function(require, exports, moudule){
    // main.js 代碼
});

接着，把 showanimation.js 和 support.js 當中須要被其餘模塊調用的函數和變量使用 exports 暴露給其餘模塊。

// 暴露變量
exports.documentWidth = documentWidth;
exports.gridContainerWidth = gridContainerWidth;
exports.cellSideLength = cellSideLength;
exports.cellSpace = cellSpace;

// 暴露函數
exports.getPostTop = function(i,j) {
    // code
};

exports.getPostLeft = function(i,j) {
    // code
};
......

而後，使用 require 來獲取其餘模塊暴露的接口.

// main.js
var support = require('./support');
var animation = require('./showanimation');

// showanimation.js
var support = require('./support');

最後，將原來調用其它模塊的方法或變量改寫爲，如下形式：

var a = require('./a');
// 調用模塊 a 的方法
a.doSomething();

// main.js
// 調用變量
support.cellSpace = 20;
support.cellSideLength = 100;

// 調用 showanimation.js 方法
animation.showNumberWithAnimation(randx, randy, randNumber);
// 調用 support.js 方法
support.canMoveDown(board)

在頁面當中加載入口模塊

在引入 sea.js 以後，在該 script 標籤以後，再寫一段 seajs 的配置代碼：

seajs.config({
    base: "../static"
});

// 加載入口模塊 
seajs.use(["game/main"]);

運行

通過上述過程以後 2048 遊戲已經完成了模塊化，如今打開瀏覽器運行一下,就能夠正確運行了。

這裏是完成後的代碼。

使用Seajs的意義

使用 Seajs 將各個文件轉變成一個個獨立的模塊，模塊當中能夠方便的對函數和變量進行命名，免去了多個文件之間命名衝突的煩惱。除此以外，使用 Seajs 還能夠在 js 文件當中聲明所需的依賴，再也不須要手動在引入過程當中管理，下降了開發時出錯的概率。

在 EMCAScript6 import 功能出現以前，Seajs 的確是一個不錯的前端模塊化工具。

下一篇文章，我會談一下如何用 spm3 進行Seajs標準構建。

感謝您的閱讀，有不足之處請爲我指出。

參考

1. CMD 模塊定義規範

2. CommonJS 的 Modules/Transport 和 Modules/Wrappings 規範有什麼區別？ -- 知乎

3. 前端模塊化開發的價值

本文同步於個人我的博客 http://blog.acwong.org/2014/11/15/2048-with-seajs/