seaJS 简要介绍和完整例子

从事前端开发工作的大概都有所耳闻 requireJS 这个框架，除了这个外还有一个相似的就是 seaJS，以前都是使用而已没时间写一些记录，今天有空就写一下，顺便写个例子；

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

seaJS 官网 http://seajs.org 它是一个开源项目，目前由阿里、腾讯等公司共同维护。更多详细的请到官网了解，下面是快速简要了解的知识点。

快速简要知识点：

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代码初始化工作；
1，首先看例子文件目录结构：

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

2，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>

3，页面样式文件 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;
}

4，业务文件之一，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的配置的定义，调用关系，模块的写法，模块内部的写法，依赖文件的加载和调用，以及模块如何自动运行某个函数等等。夜了参考上面的写法，准备觉觉，可能部分有疏漏,，拍砖讨论...

seaJS 简要介绍和完整例子相关推荐

数据结构的简要介绍：图形如何工作
by Michael Olorunnisola 通过Michael Olorunnisola 数据结构的简要介绍:图形如何工作 (A Gentle Introduction to Data Struc ...
Android系统匿名共享内存Ashmem（Anonymous Shared Memory）简要介绍和学习计划
在Android系统中,提供了独特的匿名共享内存子系统Ashmem(Anonymous Shared Memory),它以驱动程序的形式实现在内核空间中.它有两个特点,一是能够辅助内存管理系统来有效地 ...
Android进程间通信（IPC）机制Binder简要介绍和学习计划
在Android系统中,每一个应用程序都是由一些Activity和Service组成的,这些Activity和Service有可能运行在同一个进程中,也有可能运行在不同的进程中.那么,不在同一个进程的 ...
Dalvik虚拟机简要介绍和学习计划
出自:http://blog.csdn.net/luoshengyang/article/details/8852432 我们知道,Android应用程序是运行在Dalvik虚拟机里面的,并且每一个应 ...
简要介绍BASE64、MD5、SHA、HMAC几种方法。
加密解密,曾经是我一个毕业设计的重要组件.在工作了多年以后回想当时那个加密.解密算法,实在是太单纯了. 言归正传,这里我们主要描述Java已经实现的一些加密解密算法,最后介绍数字证书. ...
图形化界面设计软件简要介绍
图形化界面设计软件简要介绍 [摘要]:面向使用者的系统工程设计,其目的是要准确.快速地在设计者和使用者之间传递信息和实现功能,也是优化产品性能来适应大众的操作能力,减轻使用者的认知负担.成功的系统工程 ...
MIPI_DSI协议简要介绍
原文链接:MIPI_DSI协议简要介绍 MIPI-DSI是一种应用于显示技术的串行接口,兼容DPI(显示像素接口,Display Pixel Interface).DBI(显示总线接口,Display ...
【SQLite3+Qt开发】SQLite3简要介绍+在Qt5中的使用步骤
目录一.SQLite简要介绍什么是SQLite? 为什么要用SQLite? SQLite下载二.在Qt5中使用步骤第一步:导入sqlite3相关文件第二步:打开qt 修改 .pro文件,添 ...
简要介绍下tensorflow的计算图
1.请简要介绍下tensorflow的计算图,深度学习 DL框架中 @寒小阳&AntZ:Tensorflow是一个通过计算图的形式来表述计算的编程系统,计算图也叫数据流图,可以把计算图看做是 ...

seaJS 简要介绍和完整例子

seaJS 简要介绍和完整例子相关推荐

最新文章

热门文章