您的位置：首页 > Web前端

SeaJs学习，解决了前端模块只会用ng的一些问题

2017-04-09 00:00 204 查看

摘要: seajs

为什么学习SeaJs ？

【第一】：为了解决项目中资源文件版本号的问题，以及打包压缩合并等问题。

【第二】：好奇心和求知欲。【我发现很多知名网站也都在使用（ qq空间 , msn , 淘宝等等），而且 SeaJs 也得到了很好的推广与应用】。

【第三】：经过了解得知 淘宝的 玉伯是 湖南炎陵 人，觉得他很牛X。

【强烈】给小伙伴们推荐一个玉伯的讲的 SeaJs PDF 学习资料,下载地址： http://pan.baidu.com/s/1CCz4C

第一步【版本号问题的解决】 ：首先大家可以到 seaJs.org 官网去下载一个 seajs 的例子，以及文件，现在 sea.js 的版本已经到 V 2.1.1 了

<!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 真就我讲的这么点东西了，我还没有很 深入细化 的讲，拿了几个我认为最重要的，故 省略............

Seajs建议文档：http://yslove.net/seajs/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： SeaJS

相关文章推荐

新的分享

章节导航