seaJS简介和完整实例
什么是 seaJS ？ 和requireJS相似的，seaJS 也是用JavaScript编写的JS框架，主要功能是可以按不同的先后依赖关系对 JavaScript 等文件的进行加载工作，可简单理解为JS文件的加载器，它非常适合在浏览器中使用，它可以确保所依赖的JS文件加载完成之后再加载当前的JS文件，这在大量使用JS文件的项目中可确保各个JS文件的先后加载顺序，确保避免了以前因某些原因某个文件加载慢而导致其它加载快的文件需要依赖其某些功能而出现某函数或某变量找不到的问题，这点非常有用，也是 seaJS （遵守CMD） 的主要价值所在吧；但和 requireJS （遵守AMD规范）有所区别。
快速简要知识点：
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() {...};
};
});
好了，简要介绍就到这。下面看一个实际例子：
这个例子的设计要求是 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的配置的定义，调用关系，模块的写法，模块内部的写法，依赖文件的加载和调用，以及模块如何自动运行某个函数等等。
seaJS简介和完整实例的更多相关文章
- SeaJS简介一：由来，特点以及优势
由来: 在软件开发过程中,模块化编程思想已经习以为常了,模块化编程不仅仅给开发团队带来效率方面上的好处,还能够让开发的项目或者产品维护成本大大降低. 那么,在WEB开发过程中JS脚本语言已经不可或缺了 ...
- Jboss ESB简介及开发实例
一.Jboss ESB的简介 1. 什么是ESB. ESB的全称是Enterprise Service Bus,即企业服务总线.ESB是过去消息中间件的发展,ESB采用了“总线”这样一 ...
- APP接口自动化测试JAVA+TestNG(二)之TestNG简介与基础实例
前言 继上篇环境篇后,本篇主要对TestNG进行介绍,给出最最基础的两个实例,通过本文后,学会并掌握TestNG测试用例的编写与运行,以及生成美化后的报告.下一篇为HTTP接口实战(国家气象局接口自动 ...
- C# 调用第三方DLL完整实例
C# 调用第三方DLL完整实例 分类: C/C++ 以下代码为本人在实际项目中编写的调用第三方DLL接口程序的完整代码. public class ExecuteDLL : Form { ...//忽 ...
- （转）多个mapreduce工作相互依赖处理方法完整实例（JobControl）
多个mapreduce工作相互依赖处理方法完整实例(JobControl) 原文地址:http://mntms.iteye.com/blog/2096456?utm_source=tuicool&am ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- 微信小程序发送短信验证码完整实例
微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ...
- PHP实现视频文件上传完整实例
这篇文章主要介绍了PHP实现视频文件上传的技巧,包含了PHP配置信息的设计及大文件的处理,需要的朋友可以参考下 本文以一个完整实例的形式实现了视频文件上传的功能.虽然是比较基础的应用,仍有一定的 ...
- Linux Expect 简介和使用实例
expect简介和使用实例 1 expect 简介 expect 是用来进行自动化控制和测试的工具. 主要是和交互式软件telnet ftp passwd fsck rlogin ssh tip 等进 ...
随机推荐
- 用户不在sudoers文件中，此事将被报告
在给Virtual Box搭配共享文件夹后,普通用户使用sudo时,报错XX不在sudoers文件中.此事将被报告 然后我就按照网上教程,不巧的是正好用错误的教程修改了sudoers文件,造成root ...
- webpack打包之无依赖模块
一.入口文件main.js // main.js console.log('webpack'); 二.出口文件bundle.js 1.浏览代码 2.本质 // 实际就是一个自执行函数 (functio ...
- Django模板语言的复用
一.include标签 由于在项目中,往往会出现多个页面拥有一个或几个相同的页面版块,或是一个页面多个页面版块是相同的,基于这个问题,我们可以采用模板语言复用include标签来帮我们解决,这样就避免 ...
- 蓝桥杯 ——无重复组合——C++
问题描述: 求任意长度的(ABCD.....)全部n=0,1,2 ....组合情况(n小于等于串的长度) 解决思路: 如果串的长度固定,n的值固定循环嵌套 在这里以深度优先形成一棵树,如下图: 源代码 ...
- Java -- 内部类（二）
在上一篇博客Java --内部类(一)中已经提过了,java中的内部类主要有四种:成员内部类.局部内部类.匿名内部类.静态内部类. 该文主要介绍这几种内部类. 成员内部类 成员内部类也是最普通的内部类 ...
- Scrapy基础(十二)————异步导出Item数据到Mysql中
异步导出数据到Mysql中 上次说过从Item中同步写入数据库,因为网络的下载速度和数据库的I/O速度是不一样的所以有可能会发生下载快,但是写入数据库速度慢,造成线程的堵塞:关于堵塞和非堵塞,同步和异 ...
- LeetCode（283. 移动零）
问题描述 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 示例: 输入: [0,1,0,3,12] 输出: [1,3,12,0,0] 说明: 必须在原数 ...
- Python3从零开始爬取今日头条的新闻【三、滚动到底自动加载】
Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
- java第二周的学习知识
1.java基本运行单位是类,类的组成成员为成员变量和方法.成员变量的种类有public,default(就是不写),protected,private.public:public可以修饰类,数据成员 ...
- HTML入门随笔
---恢复内容开始--- html网址:https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting ...