JavaScript模組化開發之SeaJS_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JavaScript模組化開發之SeaJS_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:25 PM

javascript模組化 javascript模組化開發

前言

SeaJS是遵循CommonJS規格的JavaScript模組載入框架，可以實作JavaScript的模組化開發與載入機制。使用SeaJS可以提高JavaScript程式碼的可讀性和清晰度，解決目前JavaScript程式設計中普遍存在的依賴關係混亂和程式碼糾纏等問題，方便程式碼的編寫和維護。

SeaJS本身遵循KISS（Keep it Simple,Stupid）理念進行開發，後續的幾個版本更新也都是吵著這個方向邁進。

如何使用SeaJS

下載及安裝在這裡不贅述了，不了解的請查詢官網。

基本開發原則
•一切皆為模組：SeaJS中的模組概念有點類似於物件導向中的類別--模組可以擁有資料和方法，資料和方法可以定義為公共或私有，公共資料和方法可以供別的模組呼叫。

•每個模組應該定義在單獨的js檔案中，也就是一個對應一個模組。

模組的定義與編寫

模組定義函數define

SeaJS中使用define函數定義一個模組。 define可以接收三個參數：

/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
  //code of function…
}

登入後複製

define可以接收的參數分別是模組ID，依賴模組數組及工廠函數。

•如果只有一個參數，則賦值給factory

•如果有兩個參數，第二個賦值給factory，第一個如果是數組則賦值給deps，否則賦值給id

•如果有三個參數，則分別賦值

但是，包括SeaJS官網範例在內幾乎所有用到define的地方都只傳遞一個工廠函數進去，類似於如下程式碼：

define(function(require,exports,module){
  //code of the module
})

登入後複製

個人建議遵循SeaJS官方範例的標準，用一個參數的define定義模組。那麼id和deps會怎麼處理呢？

id是一個模組的識別字串，define只有一個參數時，id會被預設賦值為此js檔案的絕對路徑。如example.com下的a.js檔案中使用define定義模組，則這個模組的ID會賦值為http://example.com/a.js ，沒有特別的必要建議不要傳入id。 deps一般也不需要傳入，需要用到的模組用require載入即可。

工廠函數factory解析

工廠函數是模組的主體和重點。它的三個參數分別是：

•require：模組載入函數，用於記載依賴模組
•exports：介面點，將資料或方法定義在其上則將其暴露給外部呼叫
•module：模組的元資料

這三個參數可以根據需要選擇是否需要顯示指定。

module是一個對象，儲存了模組的元訊息，具體如下：
•module.id：模組的ID
•module.dependencies：一個數組，儲存了這個模組所依賴的所有模組的ID列表。
•module.exports：與exports指向同一個物件

三種編寫模組的模式

第一種是基於exports的模式：

define(function(require,exports,module){
  var a=require('a');
  var b=require('b'); //引入模块
  var data1=1; //私有数据
  var fun1=function(){//私有方法
    return a.run(data1);
  }
  exports.data2=2; //公有数据
  exports.fun2=function(){
    return 'hello';
  }
})

登入後複製

上面是一種比較「正宗」的模組定義模式。除了講公共資料和方法附加在exports上，也可以直接傳回一個物件表示模組，如下面的程式碼與上面的程式碼功能相同：

define(function(require){
  var a=require('a');
  var b=require('b'); //引入模块
  var data1=1;
  var fun1=function(){
    return a.run(data1);
  }
  return{
    data2:2,
    fun2:function(){
      return 'hello';
    }
  }
})

登入後複製

如果模組定義沒有其他程式碼，只回傳一個對象，還可以有以下簡化寫法：

define({
  data2:2,
    fun2:function(){
      return 'hello';
    }
  })

登入後複製

第三種寫法對於定義純JSON資料的模組非常合適。

根據應用程式場景的不同，SeaJS提供了三個載入模組的API，分別是：seajs.use,require和require.async。

seajs.use

seajs.use主要用於載入入口模組。入口模組相當於C語言的main函數，同時也是整個模組依賴樹的根。 seajs.use
的用法如下：

//第一模式
seajs.use('./a');
//回调模式
seajs.use('./a',function(a){
  a.run();
})
//多模块模式
seajs.use(['./a','./b'],function(a,b){
  a.run();
  b.run();
})

登入後複製

其中多模組的用法和KISSY中的模組載入方法類似，不虧是一個人寫的啊！

一般seajs.use只用在頁面載入入口模組，SeaJS會順著入口模組解析所有依賴模組並將它們載入。如果入口模組只有一個，也可以透過將引入seajs的script標籤加入「data-main」屬性來省略seajs.use，例如一下寫法：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>TinyApp</title>
</head>
<body>
  <p class="content"></p>
  <script src="./sea.js" data-main="./init"></script>
</body>
</html> 
require

登入後複製

require是seajs主要的模組載入方法，當在一個模組中需要用到其他模組時一般用require載入：

var m=require('./a'); 
require.async

登入後複製

上文说过seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js文件在用时才加载，可以使用require.async。

这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。

SeaJS的全局配置

seajs提供了一个seaj.configd的方法可以设置全局配置，接收一个表示全局配置的配置对象，具体方法如下：

seajs.config({
base:'path',
alias:{
  'app':'path/app/'
},
charset:'utf-8',
timeout:20000,
debug:false
})

登入後複製

其中，

•base表示基址路径
•alias可以对较长的常用路径设置缩写
•charset表示下载js时script标签的charset属性。
•timeout表示下载文件的最大时长，以毫秒为单位。

Seajs如何与现有的JS库配合使用

要将现有的JS库与seajs一起使用，只需根据seajs的模块定义规则对现有库进行一个封装。例如，下面是对jQuery的封装方法：

define(function(){
  /*
  此处为jquery源码
  */
  })

登入後複製

一个完整的例子：

上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们归纳回顾。这个例子包含如下文件：
•index.html 主页面

•sea.js
•jquery.js
•init.js init模块，入口模块，依赖data、jquery、style三个模块，又主页面载入
•data.js data模块，纯json数据模块
•style.css css样式表

html：
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="content">
  <p class="author"></p>
  <p class="blog"><a href="#">Blog</a></p>
</div>
<script src="sea.js"></script>
<script>
    seajs.use('init');
</script>
</body>
</html> 
javascript:
//init.js
define(function(require, exports, module) {
  var $ = require('./jquery');
  var data = require('./data');
  var css = require('./style.css');
  $('.author').html(data.author);
  $('.blog').attr('href', data.blog);
});
//data.js
define({
  author: 'ZhangYang',
  blog: 'http://blog.codinglabs.org'
}); 
css:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}

登入後複製

请注意：

1.请讲jquery.js源码文件包含在seajs模块加载代码中；

2.在Sea.js < 2.3.0版本之前是可以加载css文件的，新版本中此功能移除，为了兼容考虑，加载css功能将作为一个插件存在。

使用方法

•可以在sea.js标签后引入这个插件使用
•也可以将插件代码混入sea.js当中
•和seajs-style的区别 •seajs-css是使 Sea.js 能够加载一个css文件，和link标签一样
•seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串

以上内容是小编给大家分享的JavaScript模块化开发之SeaJS，希望对大家学习javascript模块化开发有所帮助，谢谢大家一直以来对脚本之家网站的支持。！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7792

Java教學

1644

CakePHP 教程

1401

Laravel 教程

1298

PHP教程

1234

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。