快速构建自己的第一个SeaJS

版权声明：本文为博主原创文章，未经博主允许不得转载。 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如下：

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>