自學了三天的SeaJs學習，解決了前端的一些問題，與小伙伴們一起分享一下！

本文轉載自查看原文 2013-10-12 09:01 3597 JS框架性學習/ 來點干貨

我為什么學習SeaJs？

【第一】：為了解決項目中資源文件版本號的問題，以及打包壓縮合並等問題。

【第二】：好奇心和求知欲。【我發現很多知名網站也都在使用（qq空間, msn, 淘寶等等），而且 SeaJs 也得到了很好的推廣與應用】。

【第三】：經過了解得知 淘寶的 玉伯是 湖南炎陵 人，覺得他很牛X。

【強烈】給小伙伴們推薦一個玉伯的講的 SeaJs PDF 學習資料,下載地址：http://pan.baidu.com/s/1CCz4C

第一步【版本號問題的解決】：首先大家可以到 seaJs.org 官網去下載一個 seajs 的例子，以及文件，現在 sea.js 的版本已經到 V 2.1.1 了

然后在項目中引入sea.js文件。

如圖：我的項目，目錄如下圖：

index.html 的源碼如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SeaJsDemo-操作</title>
    <script src="script/src/sea.js"></script>
</head>
<body>
    <div style="margin: 100px;">
        <!---------------------->
        <div id="idTest" class="claTest1">SeaJS-你也可以</div>
        <br />
        <!---------------------->
        <div id="btnCLick" class="claTest2">Jquery-回調測試看看</div>
    </div>
    <script type="text/javascript">
        seajs.config({
            // 別名配置
            paths: {
                "urlSite": "http://gdboc.sell.uni2uni.com/" //跨目錄調用模塊可以使用；獲得當目錄比較深時也可以使用
            },
            // 別名配置
            alias: {
                'jquery': 'jquery',
                'style': '/style/a.css',
                "styleUrl": "urlSite/style/style.css"
            },
            preload: ['jquery'],//預先加載
            base: '/script/src/', //基礎路徑
            map: [[/^(.*\.(?:css|js))(.*)$/i, '$1?v=20131010']],  //map,批量更新時間戳
            charset: 'utf-8' // 文件編碼
        });

        //-------seajs.use為入口模塊，也可以用 data-main="";(區別在於use可以加載多個入口函數，以及做一些回調的操作)------------
        seajs.use(['init', 'jquery'], function (i, $) {
            alert("親，全部加載都完成了!");

            //----------調用init中對外公開的接口--------------------------------
            i.alertFun();


            //----------習慣了在頁面<script>寫$就可以了-------------------
            $(function () {
                $("#btnCLick").click(function () {
                    alert("jquery被模塊化了,我不太習慣了！");
                })
            })
        });
    </script>
</body>
</html>

View Code

SeaJs里，你必須知道那些東西：

【1】. define

define 是一個全局函數，用來定義模塊【每一個js文件都是一個小模塊】

define(function(require, exports, module){

//require: 是一個方法，接受模塊標識作為唯一參數，用來獲取其他模塊提供的接口

//exports: 是一個對象，用來向外提供模塊接口

//module: 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法

})

init.js 文件源碼：

//--------------------------------------------
define(function (require, exports, module) {
    require('test');
    require('style');

    //----對外提供公共的接口------
    exports.alertFun = function () {
        //......................
        alert("init中對外提供的接口被調用了！");
    };

    //----暴露到全局-------------
    //module.exports = function () {
    //    //......................
    //};
});

【2】. seajs.config

配置一些全局的東西，版本問題可以在這里解決 詳細說明如下：

 <script type="text/javascript">
        seajs.config({
            // 路徑配置
            paths: {
                "urlSite": "http://gdboc.sell.uni2uni.com/" //跨目錄調用模塊可以使用；獲得當目錄比較深時也可以使用
            },
            // 別名配置
            alias: {
                'jquery': 'jquery',
                'style': '/style/a.css',
                "styleUrl": "urlSite/style/style.css"
            },
            preload: ['jquery'],//預先加載
            base: '/script/src/', //基礎路徑
            map: [[/^(.*\.(?:css|js))(.*)$/i, '$1?v=20131010']],  //map,批量更新時間戳
            charset: 'utf-8' // 文件編碼
        });
 </script>

【3】. seajs.use

seajs.use為seajs的入口模塊。還可以直接寫成這樣：<script src="script/src/sea.js" data-main="init.js"></script>

seajs.use("init.js") 和 data-mian="init.js" 的區別在於seajs.use可以加載多個入口函數，以及做一些回調的操作

  <script type="text/javascript"> 
        //-------seajs.use為入口模塊，也可以用 data-main="";(區別在於use可以加載多個入口函數，以及做一些回調的操作)------------
        seajs.use(['init', 'jquery'], function (i, $) {
            alert("親，全部加載都完成了!");

            //----------調用init中對外公開的接口--------------------------------
            i.alertFun();

            //----------習慣了在頁面<script>寫$就可以了-------------------
            $(function () {
                $("#btnCLick").click(function () {  alert("jquery被模塊化了,我不太習慣了！");  })
            })
        });
    </script>

【4】. 不要以為SeaJs真就我講的這么點東西了，我還沒有很深入細化的講，拿了幾個我認為最重要的，故 省略............

第二步：【合並壓縮的問題解決】 ，可以用（spm, grunt, combo, spmx , 或者是牛逼的 Fis 等）解決，本實例用 spm 來做的。

1.下載安裝不同系統版本的 Node

2.下載 npm 包管理

3.下載安裝 spm （利用 npm install spm -g）安裝 spm

【提醒：壓縮之前你應該做的事】

【1】. 准備好要壓縮的文件，並且記住一定要放在一個叫 “src” 的文件夾目錄下。

【2】. 新建一個 Package.json 。配置要壓縮合並的文件的參數

{
   "family":"examples",
   "name":"script",
   "version":"1.0.0",
   "spm": {
       "alias":{
              "jquery": "jquery"
        },
        "output": ["init.js","test.js","jquery.js"]
    }
}