我为什么学习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>

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"]

    }

}

【3】. 做好（【1】,【2】）步，然后 执行命令 spm  build  ，就会生成压缩文件 

生成压缩的文件放在了自动新建的一个叫  dist 文件夹目录下，分别包含了一个叫 xx.js 和 xx-debug.js 的文件

至于为什么会这样生成，因为【2】中的  Package.json 配置 已经指定了。

        

----------------------------------------------------------------------------------------------------------------------

第一步中的版本号解决如图（版本号的解决在 seajs.config 里面）：

  第二步中的压缩解决如图：

------------------------------------------------------------------------------------------------------------------------

最后，总结一下，我也还有几个 疑问 没有解决：

【1】.  data-mian方式提供入口函数，我一直没有成功过，不知道是不是版本的问题（当前版本 seajs v2.1.1）

【2】.  依赖合并的文件，没有被合并到一个js文件里。

-------------如果有小伙伴解决了上面的2个疑问，还请多多指教---------------------------------------------------------------

非常感谢@yuanyiasd  的回复： 问题【1】已经有了答案 (SeaJs移除掉了对 data-main/config 的支持)

详细地址如下 ：https://github.com/seajs/seajs/issues/734

自学了三天的SeaJs学习，解决了前端的一些问题，与小伙伴们一起分享一下！的更多相关文章

  1. [ios-必看] 国人当自强：两岸三地在线编程学习网站大搜罗 [转]

    http://blog.csdn.net/lyy_whg/article/details/17350923 说到国内的在线编程学习网站,很多人都是一脸茫然,即使是资深开发者也是如此.在许多人眼中,尽管 ...

  2. 孤荷凌寒自学python第八十一天学习爬取图片1

    孤荷凌寒自学python第八十一天学习爬取图片1 (完整学习过程屏幕记录视频地址在文末) 通过前面十天的学习,我已经基本了解了通过requests模块来与网站服务器进行交互的方法,也知道了Beauti ...

  3. 孤荷凌寒自学python第七十天学习并实践beautifulsoup对象用法3

    孤荷凌寒自学python第七十天学习并实践beautifulsoup对象用法3 (完整学习过程屏幕记录视频地址在文末) 今天继续学习beautifulsoup对象的属性与方法等内容. 一.今天进一步了 ...

  4. 孤荷凌寒自学python第六十九天学习并实践beautifulsoup对象用法2

    孤荷凌寒自学python第六十九天学习并实践beautifulsoup对象用法2 (完整学习过程屏幕记录视频地址在文末) 今天继续学习beautifulsoup对象的属性与方法等内容. 一.今天进一步 ...

  5. 孤荷凌寒自学python第六十六天学习mongoDB的基本操作并进行简单封装5

    孤荷凌寒自学python第六十六天学习mongoDB的基本操作并进行简单封装5并学习权限设置 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第十二天. 今天继续学习mongo ...

  6. 孤荷凌寒自学python第六十三天学习mongoDB的基本操作并进行简单封装2

    孤荷凌寒自学python第六十三天学习mongoDB的基本操作并进行简单封装2 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第九天. 今天继续学习mongoDB的简单操作, ...

  7. seaJS学习资料参考

    seajs官方文档:http://seajs.org/docs/#docs http://wenku.it168.com/d_000096482.shtml http://blog.codinglab ...

  8. seaJs学习笔记之javascript的依赖问题

    之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...

  9. 自学 iOS - 三十天三十个 Swift 项目 第一天

    最近公司项目不是很忙,偶然间看到编程语言排行榜,看到swift 已经排到前10了,然OC排名也越来越后了,感觉要上车了,虽然现在项目都是用OC写的,但是swift是一种趋势.在网上看到"自学 ...

随机推荐

  1. C# mongodb [上]

    概述 MongoDB是一个高性能,开源,无模式的文档型数据库,使用C++开发.是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.他支持的数据结构非常松散,是 ...

  2. [转载]C# 多线程、控制线程数提高循环输出效率

    C#多线程及控制线程数量,对for循环输出效率. 虽然输出不规律,但是效率明显提高. 思路: 如果要删除1000条数据,只使用for循环,则一个接着一个输出.所以,把1000条数据分成seed段,每段 ...

  3. 01-08-01【Nhibernate (版本3.3.1.4000) 出入江湖】NHibernate中的一级缓存

    缓存的范围? 1.事务范围 事务范围的缓存只能被当前事务访问,每个事务都有各自的缓存,缓存内的数据通常采用相互关联的对象形式.缓存的生命周期依赖于事务的生命周期,只有当事务结束时,缓存的生命周期才会结 ...

  4. Oracle/PLSQL: Creating Functions

    In Oracle, you can create your own functions. 译:在ORACLE中,你可以创建你自己的方法. The syntax for a function is: ...

  5. POJ1258Agri-Net

    http://poj.org/problem?id=1258 题意 : john当上了镇长,打算给每个农场都连接网络,需要用最小的成本连接其他所有农场,所以要找最少的纤维连在一起,任何两个农场之间的距 ...

  6. js 后台异步执行

    public void AlertMsg(string msg, bool async) { string script = string.Format("alert('{0}'); &qu ...

  7. 220 DIV2 A. Inna and Pink Pony

    Inna and Pink Pony 输入n,m,i,j,a,b 可以看成n行m列的矩阵,起点(i,j),每次移动(a,b),(-a,-b),(-a,b),(a,-b) 可移动到(1,m),(n,1) ...

  8. Spring 3.0: Unable to locate Spring NamespaceHandler for XML schema namespace

    被这个问题折磨着很久:参考: http://have23.iteye.com/blog/1340777 (cfx 与 spring 整合的时候出现的问题: org.springframework.be ...

  9. lintcode ：Segmemt Tree Build II

    题目 Segmemt Tree Build II The structure of Segment Tree is a binary tree which each node has two attr ...

  10. 【Linux高频命令专题(22)】gzip

    概述 减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间.gzip是在Linux系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用.gzip不仅 ...