您的位置：首页 > Web前端 > JavaScript

快速构建自己的第一个SeaJS

2016-04-12 18:30 585 查看

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如下：

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>

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

标签：

相关文章推荐

新的分享

章节导航