版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ouyang111222/article/details/51135808
SeaJS在这里就不过多的介绍,关于SeaJS请参考官网:http://seajs.org
本实例功能说明:为页面动态加载一些button,同时为每一个button绑定click事件。
1 准备工作
1.1 下载sea.js
下载地址:http://seajs.org/docs/#downloads
1.2 下载jquery(本实例使用jquery-1.12.3.js)
下载地址:http://jquery.com/download/
2 SeaJS的基本配置
2.1 目录结构
如下所示为本文的js目录结构(至于为何jquery-1.12.3.js放在”/jquery”目录下,请参考http://blog.csdn.net/ouyang111222/article/details/51131690或者http://blog.csdn.net/iamduoluo/article/details/46457685):
2.2 导入sea.js
<script type="text/javascript" src="js/seajs/sea.js"></script>
2.3 config的配置
本文将seajs的config放在config.js文件中
<script type="text/javascript" src="js/index/config.js"></script>
其具体的配置如下:
/**
* Set configuration
*/
seajs.config({
//shim plugins
plugins: ['shim'],
base: "./js/", /*"./"表示当前路径*/
alias: {
"jquery": "jquery/jquery-1.12.3.js"
},
preload: ["jquery"],
});
seajs.use("./js/index/main");
其中main.js为入口模块,main.js如下:
扫描二维码关注公众号,回复:
5273098 查看本文章
![](/qrcode.jpg)
define(function(require) {
var Events = require('./events'); //加载依赖events.js
var event = new Events('#container');
event.addClick();
});
events.js如下:
define(function(require, exports, module) {
var $ = require('jquery');//加载依赖jquery
var HashMap = require('./hashmap');//加载依赖hashmap.js
function Events(id){
this.id = $(id);
this.init();
}
Events.prototype = {
init:function(){
var map = new HashMap();
map.put(1,"button1");
map.put(2,"button2");
map.put(3,"button3");
for(var i=1;i<map.size()+1;i++){
this.id.append("<button type='button' id='"+map.get(i)+"'>Click Me!</button>");
}
return this;
},
addClick:function(){
var children = this.id.children();
for (var i = 0; i < children.length; i++) {
(function(){
var p = i;
children[i].onclick = function() {
alert("the index is "+p+" while the id is"+this.id);
}
})();
}
return this;
}
}
module.exports = Events;//module.exports 提供整个接口
});
其中hashmap.js中定义了一个数据结构hashmap,如下:
define(function(require, exports, module) {
HashMap = function(){
var size = 0;// Map大小
var entry = new Object();// 对象
// Map的存put方法
this.put = function(key, value) {
if (!this.containsKey(key)) {
size++;
entry[key] = value;
}
}
// Map取get方法
this.get = function(key) {
return this.containsKey(key) ? entry[key] : null;
}
// Map删除remove
this.remove = function(key) {
if (this.containsKey(key) && (delete entry[key])) {
size--;
}
}
// 是否包含Key
this.containsKey = function(key) {
return (key in entry);
}
// 是否包含Value
this.containsValue = function(value) {
for ( var prop in entry) {
if (isObjectValueEqual(entry[prop], value)) {
return true;
}
}
return false;
}
// 所有的Value
this.values = function() {
var values = new Array();
for ( var prop in entry) {
values.push(entry[prop]);
}
return values;
}
// 获取Value By key
this.getValueByKey = function(key) {
if (this.containsKey(key)) {
return entry[key];
}
return null;
}
// 所有的 Key
this.keys = function() {
var keys = new Array();
for ( var prop in entry) {
keys.push(prop);
}
return keys;
}
// Map size
this.size = function() {
return size;
}
// 清空Map
this.clear = function() {
size = 0;
entry = new Object();
}
// 获取key By value
this.getKeyByValue = function(value) {
for ( var prop in entry) {
if (isObjectValueEqual(entry[prop], value)) {
console.log("getKeyByValue is ok");
return prop;
}
}
return null;
}
}
module.exports = HashMap; //module.exports 提供整个接口
});
3 附录:html页面的代码
<html>
<head>
<title>SeaJS</title>
</head>
<body>
<div id="container">
</div>
<script type="text/javascript" src="js/seajs/sea.js"></script>
<script type="text/javascript" src="js/index/config.js"></script>
</body>
</html>