當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

seaJS简介和完整实例

發(fā)布時(shí)間：2025/3/21 javascript 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 seaJS简介和完整实例小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

什么是 seaJS ？
　　和requireJS相似的，seaJS 也是用JavaScript編寫的JS框架，主要功能是可以按不同的先后依賴關(guān)系對(duì) JavaScript 等文件的進(jìn)行加載工作，可簡(jiǎn)單理解為JS文件的加載器，它非常適合在瀏覽器中使用，它可以確保所依賴的JS文件加載完成之后再加載當(dāng)前的JS文件，這在大量使用JS文件的項(xiàng)目中可確保各個(gè)JS文件的先后加載順序，確保避免了以前因某些原因某個(gè)文件加載慢而導(dǎo)致其它加載快的文件需要依賴其某些功能而出現(xiàn)某函數(shù)或某變量找不到的問題，這點(diǎn)非常有用，也是?seaJS （遵守CMD）?的主要價(jià)值所在吧；但和?requireJS （遵守AMD規(guī)范）有所區(qū)別。

快速簡(jiǎn)要知識(shí)點(diǎn)：

1、seajs.config({...}); ? //用來對(duì) Sea.js 進(jìn)行配置。
2、seajs.use(['a','b'],function(a,b){...}); ? //用來在頁面中加載一個(gè)或多個(gè)模塊。
3、define(function(require, exports, module){...}); ? //用來定義模塊。Sea.js 推崇一個(gè)模塊一個(gè)文件，遵循統(tǒng)一的寫法：
4、require(function(require){var a = require("xModule"); ... }); ? //require 用來獲取指定模塊的接口。
5、require.async, ?//用來在模塊內(nèi)部異步加載一個(gè)或多個(gè)模塊。例如： define(function(require){require.async(['aModule','bModule'],function(a,b){ // 異步加載多個(gè)模塊，在加載完成時(shí)，執(zhí)行回調(diào) a.func();b.func();}) });

6、exports, //用來在模塊內(nèi)部對(duì)外提供接口。例如：

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

7、module.exports, 與 exports 類似，用來在模塊內(nèi)部對(duì)外提供接口。例如：

define(function(require, exports, module) { module.exports = { // 對(duì)外提供接口name: 'a',doSomething: function() {...};}; }); 　　以上 7 個(gè)接口是最常用的，要牢記于心。

　　好了，簡(jiǎn)要介紹就到這。下面看一個(gè)實(shí)際例子：

　　這個(gè)例子的設(shè)計(jì)要求是 hellowMain.js 文件依賴 hellow.js, jQuery作為備用加載到項(xiàng)目中，只有等依賴文件加載完了，才進(jìn)行業(yè)務(wù)的JS代碼初始化工作；

　　首先看例子文件目錄結(jié)構(gòu)：

//file of folder structure //----------------------------------------------------- //seaJS對(duì)項(xiàng)目的目錄一般格式如下，如userExample01下的結(jié)構(gòu) userExample01|-----sea-modules| |--sea.js 等框架JS文件|-----app| |----*.html 頁面html文件|-----static| |---hellow| |---*.js/*.css //-----------------------------------------------------

1、HTML 文件 index.html?注意看 seaJS 加載方式之一，見 script 標(biāo)簽，以及配置和調(diào)用方式；

<!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 例子，鼠標(biāo)移動(dòng)到上面看看邊框變化...</span> </div> <br> <div id="div02" class="div02">my TEXT 002 seaJS 例子，鼠標(biāo)放到上面等下看</div> <script type="text/javascript" src="../sea-modules/sea.js"></script> <script type="text/javascript"> // seajs 的簡(jiǎn)單配置 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}表示變量 } }); //加載入口模塊，加載完成后調(diào)用模塊的方法 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、業(yè)務(wù)文件之一，hellow.js??注意語法看看模塊是怎么寫的，推薦注意文件各個(gè)注釋說明和書寫格式，方便養(yǎng)成良好習(xí)慣和代碼規(guī)范

define(function(require, exports, module){ //1，define intenal variable area//變量定義區(qū) var moduleName = "hellow module"; var version = "1.0.0"; //2，define intenal funciton area//函數(shù)定義區(qū) 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 //啟用時(shí)在加載完將自動(dòng)運(yùn)行某方法 //exports.initEvent(); });

4、業(yè)務(wù)文件之一，主模塊 hellowMain.js??注意語法看看模塊是怎么寫的，推薦注意文件各個(gè)注釋說明和書寫格式，方便養(yǎng)成良好習(xí)慣和代碼規(guī)范

// This is app main module JS file define(function(require, exports, module){ //1,define intenal variable area//變量定義區(qū) var moduleName = "hellow module"; var version = "1.0.0"; //2,load each dependency var workjs = require("hellow"); //3,define intenal funciton area//函數(shù)定義區(qū) 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 //啟用時(shí)在加載完將自動(dòng)運(yùn)行某方法 //exports.initEvent(); });

　　注意：對(duì)應(yīng)的 seaJS 和 jquery 各個(gè)版本文件這里沒有給出，到對(duì)應(yīng)的網(wǎng)上或官網(wǎng)下載放到對(duì)應(yīng)目錄，注意修改文件名對(duì)應(yīng)即可，參見對(duì)應(yīng)地方的注釋；

　　本例雖然簡(jiǎn)單，但是基本包含了實(shí)際大部分 seaJS 知識(shí)點(diǎn)，注釋也非常清楚，同時(shí)注意文件的組織結(jié)構(gòu)，seaJS的配置的定義，調(diào)用關(guān)系，模塊的寫法，模塊內(nèi)部的寫法，依賴文件的加載和調(diào)用，以及模塊如何自動(dòng)運(yùn)行某個(gè)函數(shù)等等。

轉(zhuǎn)載于:https://www.cnblogs.com/goloving/p/7712310.html

總結(jié)

以上是生活随笔為你收集整理的seaJS简介和完整实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：安卓手机开机键失灵，FASTBOOT模式
下一篇： php7+apache2.4配置