自学了三天的SeaJs学习，解决了前端的一些问题，与小伙伴们一起分享一下！
我为什么学习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学习，解决了前端的一些问题，与小伙伴们一起分享一下！的更多相关文章
- [ios-必看] 国人当自强：两岸三地在线编程学习网站大搜罗 [转]
http://blog.csdn.net/lyy_whg/article/details/17350923 说到国内的在线编程学习网站,很多人都是一脸茫然,即使是资深开发者也是如此.在许多人眼中,尽管 ...
- 孤荷凌寒自学python第八十一天学习爬取图片1
孤荷凌寒自学python第八十一天学习爬取图片1 (完整学习过程屏幕记录视频地址在文末) 通过前面十天的学习,我已经基本了解了通过requests模块来与网站服务器进行交互的方法,也知道了Beauti ...
- 孤荷凌寒自学python第七十天学习并实践beautifulsoup对象用法3
孤荷凌寒自学python第七十天学习并实践beautifulsoup对象用法3 (完整学习过程屏幕记录视频地址在文末) 今天继续学习beautifulsoup对象的属性与方法等内容. 一.今天进一步了 ...
- 孤荷凌寒自学python第六十九天学习并实践beautifulsoup对象用法2
孤荷凌寒自学python第六十九天学习并实践beautifulsoup对象用法2 (完整学习过程屏幕记录视频地址在文末) 今天继续学习beautifulsoup对象的属性与方法等内容. 一.今天进一步 ...
- 孤荷凌寒自学python第六十六天学习mongoDB的基本操作并进行简单封装5
孤荷凌寒自学python第六十六天学习mongoDB的基本操作并进行简单封装5并学习权限设置 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第十二天. 今天继续学习mongo ...
- 孤荷凌寒自学python第六十三天学习mongoDB的基本操作并进行简单封装2
孤荷凌寒自学python第六十三天学习mongoDB的基本操作并进行简单封装2 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第九天. 今天继续学习mongoDB的简单操作, ...
- seaJS学习资料参考
seajs官方文档:http://seajs.org/docs/#docs http://wenku.it168.com/d_000096482.shtml http://blog.codinglab ...
- seaJs学习笔记之javascript的依赖问题
之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...
- 自学 iOS - 三十天三十个 Swift 项目 第一天
最近公司项目不是很忙,偶然间看到编程语言排行榜,看到swift 已经排到前10了,然OC排名也越来越后了,感觉要上车了,虽然现在项目都是用OC写的,但是swift是一种趋势.在网上看到"自学 ...
随机推荐
- Codeforces Round #343 (Div. 2) E. Famil Door and Roads
题目链接: http://www.codeforces.com/contest/629/problem/E 题解: 树形dp. siz[x]为x这颗子树的节点个数(包括x自己) dep[x]表示x这个 ...
- GetSurfaceLevel
if( SUCCEEDED( g_pTexture->GetSurfaceLevel( 0, &pSurface) ) ) { pd3dDevice->Se ...
- Codeforces Round #362 (Div. 2)->A. Pineapple Incident
A. Pineapple Incident time limit per test 1 second memory limit per test 256 megabytes input standar ...
- PAT-乙级-1048. 数字加密(20)
1048. 数字加密(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 本题要求实现一种数字加密方法.首先固 ...
- 什么是REST架构(转)
REST架构风格是全新的针对Web应用的开发风格,是当今世界最成功的互联网超媒体分布式系统架构,它使得人们真正理解了Http协议本来面貌.随着 REST架构成为主流技术,一种全新的互联网网络应用开发的 ...
- winform 开发之Control.InvokeRequired
Control.InvokeRequired 获取一个值,该值指示调用方在对控件进行方法调用时是否必须调用 Invoke 方法,因为调用方位于创建控件所在的线程以外的线程中. InvokeRequir ...
- cf div2 235 D
D. Roman and Numbers time limit per test 4 seconds memory limit per test 512 megabytes input standar ...
- 解决Eclipse10配置Pydev不成功的问题
本人在线配置还在本地配置后 重启Eclipse,Windows-Preferences中并无Python选项,新建项目也无Python可选 这个尝试了好多种方法,重新安装Eclipse10,重新安装j ...
- Xamarin.Android 入门之：Listview和adapter
一.引言 不管开发什么软件,列表的使用是必不可少的,而本章我们将学习如何使用Xamarin去实现它,以及如何使用自定义适配器.关于xamarin中listview的基础和适配器可以查看官网https: ...
- Qt网络通信骨架解析，QtClient QtServer QtSerialPort
http://blog.csdn.net/Dr_Abel/article/details/52469134#t18