seaJS 简要介绍和完整例子

2023-12-02 06:58

本文主要是介绍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 简要介绍和完整例子的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/444378

相关文章

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

Python中win32包的安装及常见用途介绍

《Python中win32包的安装及常见用途介绍》在Windows环境下,PythonWin32模块通常随Python安装包一起安装,:本文主要介绍Python中win32包的安装及常见用途的相关... 目录前言主要组件安装方法常见用途1. 操作Windows注册表2. 操作Windows服务3. 窗口操作

Spring Security中用户名和密码的验证完整流程

《SpringSecurity中用户名和密码的验证完整流程》本文给大家介绍SpringSecurity中用户名和密码的验证完整流程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定... 首先创建了一个UsernamePasswordAuthenticationTChina编程oken对象,这是S

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

SpringBoot集成LiteFlow工作流引擎的完整指南

《SpringBoot集成LiteFlow工作流引擎的完整指南》LiteFlow作为一款国产轻量级规则引擎/流程引擎,以其零学习成本、高可扩展性和极致性能成为微服务架构下的理想选择,本文将详细讲解Sp... 目录一、LiteFlow核心优势二、SpringBoot集成实战三、高级特性应用1. 异步并行执行2

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》:本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结:Lambda方法Service接口基本用法MyBATisP

MySQL复杂SQL之多表联查/子查询详细介绍(最新整理)

《MySQL复杂SQL之多表联查/子查询详细介绍(最新整理)》掌握多表联查(INNERJOIN,LEFTJOIN,RIGHTJOIN,FULLJOIN)和子查询(标量、列、行、表子查询、相关/非相关、... 目录第一部分:多表联查 (JOIN Operations)1. 连接的类型 (JOIN Types)