我为什么学习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#中类型分析中的常见问题 Type - 转

    http://www.cnblogs.com/yuanyuan/archive/2012/08/16/2642281.html 写代码的时候经常需要分析已有类型的信息例如:分析现有类型自动生成类, 或 ...

  2. Wmware桥接网络虚拟机无法上网的问题

    之前装好的一个虚拟机,安装到本地的Wmware workstation的时候,发现无法上网. 虚拟机使用的是桥接模式:一开始怀疑IP被占用,修改后发现不起作用.    排查所有的网络配置,发现都没有问 ...

  3. Matlab中数组下标是logical，如何处理？

    K>> a = 10*ones(1,10); K>> b = [1 56 23 5 6 45 9 7 89 10]; K>> c = b<a c = 1 0 ...

  4. C# \uxxx Unicode编码解码

    /// <summary> /// Unicode编码 /// </summary> /// <param name="str"></pa ...

  5. mysql导出多个表数据为excel方法,substring函数查询

    //查询sys_username以S.00655开头的用户 ),sys_password FROM `tbl_sa_syslogin` where sys_username like 'S.%'; / ...

  6. 序列dp笔记√

    例题: http://www.cnblogs.com/gc812/p/5792181.html http://www.cnblogs.com/gc812/p/5792217.html

  7. spring是怎样面向接口编程的？

    1.只要分层,就涉及到接口来连接.各层之间只通过接口来向外暴露功能. 2.spring中service层调用dao层时候,service层声明接口变量,具体接口实现可以ioc注入

  8. 在PowerDesigner中设计物理模型1——表和主外键

    原文:在PowerDesigner中设计物理模型1--表和主外键 在PD中建立物理模型由以下几种办法: 直接新建物理模型. 设计好概念模型,然后由概念模型生成物理模型. 设计好逻辑模型,然后由逻辑模型 ...

  9. Shell最多支持多少个参数

    本文转自:http://www.jb51.net/article/56548.htm   这篇文章主要介绍了Shell最多支持多少个参数?本文是对Shell最多可以输入多少个参数的一篇测试文章,需要的 ...

  10. Servlet的response输出到页面时乱码的解决方法

    package com.mhb; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.Servle ...