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教程