javascript
seaJS简介和完整实例
什么是 seaJS ？
和requireJS相似的，seaJS 也是用JavaScript編寫的JS框架，主要功能是可以按不同的先后依賴關(guān)系對 JavaScript 等文件的進(jìn)行加載工作，可簡單理解為JS文件的加載器，它非常適合在瀏覽器中使用，它可以確保所依賴的JS文件加載完成之后再加載當(dāng)前的JS文件，這在大量使用JS文件的項目中可確保各個JS文件的先后加載順序，確保避免了以前因某些原因某個文件加載慢而導(dǎo)致其它加載快的文件需要依賴其某些功能而出現(xiàn)某函數(shù)或某變量找不到的問題，這點非常有用，也是?seaJS （遵守CMD）?的主要價值所在吧；但和?requireJS （遵守AMD規(guī)范）有所區(qū)別。
快速簡要知識點：
1、seajs.config({...}); ? //用來對 Sea.js 進(jìn)行配置。2、seajs.use(['a','b'],function(a,b){...}); ? //用來在頁面中加載一個或多個模塊。
3、define(function(require, exports, module){...}); ? //用來定義模塊。Sea.js 推崇一個模塊一個文件，遵循統(tǒng)一的寫法：
4、require(function(require){var a = require("xModule"); ... }); ? //require 用來獲取指定模塊的接口。
5、require.async, ?//用來在模塊內(nèi)部異步加載一個或多個模塊。 例如： define(function(require){require.async(['aModule','bModule'],function(a,b){ // 異步加載多個模塊，在加載完成時，執(zhí)行回調(diào) a.func();b.func();}) });
6、exports, //用來在模塊內(nèi)部對外提供接口。 例如：
define(function(require, exports){exports.varName01 = 'varValue'; // 對外提供 varName01 屬性 exports.funName01 = function(p1,p2){ // 對外提供 funName01 方法 ....} });7、module.exports, 與 exports 類似，用來在模塊內(nèi)部對外提供接口。例如：
define(function(require, exports, module) { module.exports = { // 對外提供接口name: 'a',doSomething: function() {...};}; }); 以上 7 個接口是最常用的，要牢記于心。好了，簡要介紹就到這。下面看一個實際例子：
這個例子的設(shè)計要求是 hellowMain.js 文件依賴 hellow.js, jQuery作為備用加載到項目中，只有等依賴文件加載完了，才進(jìn)行業(yè)務(wù)的JS代碼初始化工作；
首先看例子文件目錄結(jié)構(gòu)：
//file of folder structure //----------------------------------------------------- //seaJS對項目的目錄一般格式如下，如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)移動到上面看看邊框變化...</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 的簡單配置 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??注意語法看看模塊是怎么寫的，推薦注意文件各個注釋說明和書寫格式，方便養(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 //啟用時在加載完將自動運行某方法 //exports.initEvent(); });4、業(yè)務(wù)文件之一，主模塊 hellowMain.js??注意語法看看模塊是怎么寫的，推薦注意文件各個注釋說明和書寫格式，方便養(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 //啟用時在加載完將自動運行某方法 //exports.initEvent(); });注意：對應(yīng)的 seaJS 和 jquery 各個版本文件這里沒有給出，到對應(yīng)的網(wǎng)上或官網(wǎng)下載放到對應(yīng)目錄，注意修改文件名對應(yīng)即可，參見對應(yīng)地方的注釋；
?
本例雖然簡單，但是基本包含了實際大部分 seaJS 知識點，注釋也非常清楚，同時注意文件的組織結(jié)構(gòu)，seaJS的配置的定義，調(diào)用關(guān)系，模塊的寫法，模塊內(nèi)部的寫法，依賴文件的加載和調(diào)用，以及模塊如何自動運行某個函數(shù)等等。
?
轉(zhuǎn)載于:https://www.cnblogs.com/goloving/p/7712310.html
總結(jié)
以上是生活随笔為你收集整理的seaJS简介和完整实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安卓手机开机键失灵，FASTBOOT模式
- 下一篇： php7+apache2.4配置