快速构建自己的第一个SeaJS

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>