seaJS简介和完整实例

最新推荐文章于 2019-04-19 17:34:36 发布

weixin_33920401

最新推荐文章于 2019-04-19 17:34:36 发布

阅读量146

点赞数

文章标签： javascript xhtml ViewUI

什么是 seaJS ？
　　和requireJS相似的，seaJS 也是用JavaScript编写的JS框架，主要功能是可以按不同的先后依赖关系对 JavaScript 等文件的进行加载工作，可简单理解为JS文件的加载器，它非常适合在浏览器中使用，它可以确保所依赖的JS文件加载完成之后再加载当前的JS文件，这在大量使用JS文件的项目中可确保各个JS文件的先后加载顺序，确保避免了以前因某些原因某个文件加载慢而导致其它加载快的文件需要依赖其某些功能而出现某函数或某变量找不到的问题，这点非常有用，也是 seaJS （遵守CMD） 的主要价值所在吧；但和 requireJS （遵守AMD规范）有所区别。

快速简要知识点：

1、seajs.config({...}); //用来对 Sea.js 进行配置。
2、seajs.use(['a','b'],function(a,b){...}); //用来在页面中加载一个或多个模块。
3、define(function(require, exports, module){...}); //用来定义模块。Sea.js 推崇一个模块一个文件，遵循统一的写法：
4、require(function(require){var a = require("xModule"); ... }); //require 用来获取指定模块的接口。
5、require.async, //用来在模块内部异步加载一个或多个模块。例如：

define(function(require){
    require.async(['aModule','bModule'],function(a,b){  // 异步加载多个模块，在加载完成时，执行回调
    a.func();
    b.func();
    })    
});

6、exports, //用来在模块内部对外提供接口。例如：

define(function(require, exports){
    exports.varName01 = 'varValue';  // 对外提供 varName01 属性    
    exports.funName01 = function(p1,p2){  // 对外提供 funName01 方法
    ....
    }       
});

7、module.exports, 与 exports 类似，用来在模块内部对外提供接口。例如：

define(function(require, exports, module) {  
  module.exports = {  // 对外提供接口
    name: 'a',
    doSomething: function() {...};
  };
});

　　以上 7 个接口是最常用的，要牢记于心。

　　好了，简要介绍就到这。下面看一个实际例子：

　　这个例子的设计要求是 hellowMain.js 文件依赖 hellow.js, jQuery作为备用加载到项目中，只有等依赖文件加载完了，才进行业务的JS代码初始化工作；

　　首先看例子文件目录结构：

//file of folder structure
//-----------------------------------------------------
//seaJS对项目的目录一般格式如下，如userExample01下的结构
userExample01
       |-----sea-modules
       |           |--sea.js 等框架JS文件
       |-----app
       |      |----*.html 页面html文件
       |-----static
       |        |---hellow
       |              |---*.js/*.css
//-----------------------------------------------------

1、HTML 文件 index.html 注意看 seaJS 加载方式之一，见 script 标签，以及配置和调用方式；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>seaJS</title>  
<link rel="stylesheet" href="../static/hellow/hellow.css" />  
</head>  
<body>  
<h4>seaJS 例子 example 01</h4>  
<div id="div01" class="div01">  
<span id="span01" class="span01">my TEXT 001 seaJS 例子，鼠标移动到上面看看边框变化...</span>  
</div>  
<br>  
<div id="div02" class="div02">my TEXT 002 seaJS 例子，鼠标放到上面等下看</div>  
<script type="text/javascript" src="../sea-modules/sea.js"></script>  
<script type="text/javascript">  
// seajs 的简单配置  
seajs.config({  
    //all alias path base on this//所有别名基于本路径  
    base:"../sea-modules/"  
      
    //define each self path//定义paths，本例未启用  
    //,paths:{  
    //  "jQueryPath":"jquery"  
    //}  
      
    //define each alias name here  
    ,alias:{ //auto add suffix .js  
        "jQuery1.9":"jquery/jquery-1.9.1.min"  
        ,"jQuery1.11":"jquery/jquery-1.11.0.min"  
        ,"hellow":"../hellow/hellow"  
    }  
    ,preload:'jQuery1.11'  
    ,vars:{  
       'locale':'zh-cn' //本例未启用,在模块中可用格式{key},即{locale}表示变量  
    }  
});  
//加载入口模块，加载完成后调用模块的方法  
seajs.use(['jQuery1.11','../static/hellow/hellowMain.js'],function($,hm){  
    hm.initEvent();   
});  
//seajs.use(['jQuery1.11','../static/hellow/hellowMain.js']);  
</script>  
</body>  
</html>

2、页面样式文件 hellow.css

@charset "utf-8";  
*{font-family:"微软雅黑","microsoft Yahei",verdana;}  
pre{margin:0px;padding:2px 0px;font-size:13px;font-family:verdana;}  
.div01{  
    border:1px solid red;  
    width:600px;  
    min-height:100px;  
    padding:10px;  
    box-sizing:border-box;  
}  
.span01{  
    border:1px solid blue;  
    display:inline-block;     
}  
.div02{  
    border:1px dotted #666;  
    min-height:60px;  
    font-size:20px;  
    margin:20px 0px 0px 0px;  
}  
.alignRight{  
    text-align:right;  
    font-size:30px;  
    animation:myplay01 2s linear 2s infinite normal;  
}  
@keyframes myplay01 {  
    0% {  
        background: white;   
        transform: rotate(0deg);  
        transform:translate(0,0);  
    }     
    100% {  
        background: #CCC;   
        transform: rotate(30deg);  
        transform:translate(0px,100px)  
    }  
}  
.text01{  
    line-height:20px;  
    font-size:13px;  
    font-family:verdana;  
}

3、业务文件之一，hellow.js 注意语法看看模块是怎么写的，推荐注意文件各个注释说明和书写格式，方便养成良好习惯和代码规范

define(function(require, exports, module){  
    //1，define intenal variable area//变量定义区  
    var moduleName = "hellow module";  
    var version = "1.0.0";  
      
    //2，define intenal funciton area//函数定义区  
    var getObj = function(id){  
        return document.getElementById(id+"");        
    };  
    exports.alert = function(a){  
        alert(a);     
    };  
      
    exports.initEvent = function(){  
        var myObj = getObj('div01');  
        myObj.onmouseover = function(){  
            myObj.style = "border:3px solid blue;"  
        };  
          
        myObj.onmouseout = function(){  
            myObj.style = "border:1px solid red;"  
        };  
          
        var myObj2 = getObj('div02');  
        myObj2.onmouseover = function(){  
            myObj2.className = "div02 alignRight";  
        };  
          
        myObj2.onmouseout = function(){  
            myObj2.className = "div02";  
        };        
    };  
      
    //3，export this module API for outside other module  
    //暴露本模块API给外部其它模块使用  
    module.exports = exports;  
      
    //4，auto run initEvent function when module loaded finish  
    //启用时在加载完将自动运行某方法  
    //exports.initEvent();  
      
});

4、业务文件之一，主模块 hellowMain.js 注意语法看看模块是怎么写的，推荐注意文件各个注释说明和书写格式，方便养成良好习惯和代码规范

// This is app main module JS file  
define(function(require, exports, module){  
    //1,define intenal variable area//变量定义区  
    var moduleName = "hellow module";  
    var version = "1.0.0";  
          
    //2,load each dependency   
    var workjs = require("hellow");  
          
    //3,define intenal funciton area//函数定义区  
    exports.loadTip = function(refConId){  
        var tipMsg = "module is loaded finish.";  
        if(undefined === refConId || null === refConId || "" === refConId+""){  
            alert(tipMsg);  
        }else{  
            document.getElementById(refConId+"").innerHTML = tipMsg;  
        }  
    };  
      
    exports.initEvent = function(){       
        workjs.initEvent();  
        exports.loadTip();  
    };  
      
    //4,export this module API for outside other module  
    //暴露本模块API给外部其它模块使用  
    module.exports = exports;  
      
    //5,auto run initEvent function when module loaded finish  
    //启用时在加载完将自动运行某方法  
    //exports.initEvent();  
      
});