SeaJs模块化加载, 这个是国人写的一个框架, 遵循CMD模块准则. 目的是整个项目模块化.
也可以有效的减少数据的加载量.
直接看例子:
注意. 这里的Jquery需要模块化, 是需要一点改造!!
改造也很简单:
require: 调用外部模块的对外方法
exports: 声明该模块的对外方法
module: 用于表示当前模块的信息,具有如下属性:
id: 模块的唯一表示, require方法需要用到他
exports: 当前模块开放的接口, Object
dependencies: 当前模块的依赖列表
一个hello.js文件, 一个模块
一个hello.html.
也可以有效的减少数据的加载量.
直接看例子:
注意. 这里的Jquery需要模块化, 是需要一点改造!!
改造也很简单:
define(function(){ /*! jQuery v1.7.2 jquery.com | jquery.org/license */ /* jquery源码!! */ //最后的返回是关键, 让SeaJs把jquery的$纳入模块化中 return $; });
require: 调用外部模块的对外方法
exports: 声明该模块的对外方法
module: 用于表示当前模块的信息,具有如下属性:
id: 模块的唯一表示, require方法需要用到他
exports: 当前模块开放的接口, Object
dependencies: 当前模块的依赖列表
一个hello.js文件, 一个模块
define(function(require, exports, module){ var $ = require("jquerymin"); exports.sayhello = function(){ alert("helloworld"); }; });
一个hello.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="lib/sea.js"></script>
</head>
<body>
<button id="helloworld">helloworld</button>
</body>
</html>
<script>
seajs.config({
alias: {
'jquerymin': './lib/jquery.js'
}
});
seajs.use(['./hello','jquerymin'], function(hello, jquery){
jquery("#helloworld").click(function(){
hello.sayhello();
});
});
</script>