seaJS简介和完整实例

什么是 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();  

});

　　注意：对应的 seaJS 和 jquery 各个版本文件这里没有给出，到对应的网上或官网下载放到对应目录，注意修改文件名对应即可，参见对应地方的注释；

　　本例虽然简单，但是基本包含了实际大部分 seaJS 知识点，注释也非常清楚，同时注意文件的组织结构，seaJS的配置的定义，调用关系，模块的写法，模块内部的写法，依赖文件的加载和调用，以及模块如何自动运行某个函数等等。

转载于:https://www.cnblogs.com/goloving/p/7712310.html

seaJS简介和完整实例相关推荐

apache madlib 教程_Apache顶级开源项目——机器学习库MADlib简介与应用实例
原标题:Apache顶级开源项目--机器学习库MADlib简介与应用实例 Apache MADlib是Pivotal与UCBerkeley合作的一个开源机器学习库,提供了精确的数据并行实现.统计和机器 ...
python实现冒泡排序完整算法_Python实现冒泡排序算法的完整实例
冒泡排序:顾名思义就是(较小的值)像泡泡一样往上冒,(大的值)往下沉. 实现原理:依次将相邻两个数值进行比较,较小的数值移到左边,较大的数值移到右边,依次比较完第一轮后,最大的数值应该排在最右边.然后 ...
.Net/C# 与 J2EE/Java Web Service 互操作完整实例
http://www.cnblogs.com/Microshaoft/archive/2005/08/18/217213.html .Net 与 J2EE/Java Web Service 互操作完整 ...
Hive的六种UDF完整实例与使用方法汇总
Hive的UDF 博文链接(转载.完整实例.完整操作步骤.自己整理与验证) 一些截图备注 GenericUDAF GenericUDAF使用流程记载 - 官方推荐 GenericUDTF Gener ...
兼容IE和FF的JS HTMLEncode和HTMLDecode的完整实例[转]
兼容IE和FF的JS HTMLEncode和HTMLDecode的完整实例,因为这个在在线编辑器和Ajax中经常用到,所以封装成函数可以直接调用,希望对大家有帮助. <html><h ...
php视频上传教程,PHP实现视频文件上传完整实例，_PHP教程
PHP实现视频文件上传完整实例, 本文以一个完整实例的形式实现了视频文件上传的功能.虽然是比较基础的应用,仍有一定的参考价值.分享给大家供大家参考之用.具体方法如下: 首先,对PHP来说视频也属于文件 ...
c语言a 寻路算法,JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
本文实例讲述了JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法.分享给大家供大家参考,具体如下: 完整实例代码如下: A*寻路算法 #stage { border: 1px solid lig ...
ajax mysql点赞_php+mysql结合Ajax实现点赞功能完整实例
php+mysql结合Ajax实现点赞功能完整实例 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 // ...
基于python的图书管理系统测试步骤_Django admin实现图书管理系统菜鸟级教程完整实例...
Django 有着强大而又及其易用的admin后台,在这里,你可以轻松实现复杂代码实现的功能,如搜索,筛选,分页,题目可编辑,多选框. 简单到,一行代码就可以实现一个功能,而且模块之间耦合得相当完美. ...

seaJS简介和完整实例

seaJS简介和完整实例相关推荐

最新文章

热门文章