seaJS简介和完整实例

时间  2019-11-06
标签 seajs 简介 完整 实例 繁體版
原文   原文链接

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

快速简要知识点：css

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

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

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

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

define(function(require, exports, module) { module.exports = { // 对外提供接口 name: 'a', doSomething: function() {...}; }; });
　　以上 7 个接口是最经常使用的，要牢记于心。

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

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

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

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

一、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>
复制代码

二、页面样式文件 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; }
复制代码

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

复制代码 
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();  });
复制代码

四、业务文件之一，主模块 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的配置的定义，调用关系，模块的写法，模块内部的写法，依赖文件的加载和调用，以及模块如何自动运行某个函数等等。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程