快速上手seajs模組化以及案例

2022-07-15 15:36:08 字數 989 閱讀 6000

js本身是沒有模組化的概念,有了seajs就有了模組化的思想,為了快速上手使用這裡一切以案例為主。

這裡以乙個jquery.fancybox.pack.js燈箱效果外掛程式介紹如何運用到seajs中。

傳統的呼叫js我們可以看到載入js要按先後順序進行載入,例如圖:

效果是一樣的,就是減少了首頁**的**量。

步驟:1,先載入sea.js

2,定義模組,要搞清楚js之間的依賴關係。

定義乙個模組:

define(function(require,exports,moudle));

define(function(require,exports,moudle));

} exports.init2 = init;//以上的變數和方法都是此模組私有,我們要在其他模組呼叫必須要提供對外的介面,以後對外的介面要使用的話直接就呼叫init2即可。

});

3,呼叫模組

seajs.use(['./js/1','./js/main'],function(m,n));

如果是呼叫多個模組可以用陣列+引數1.js對應m物件,main.js對應n。

之前的例子我們寫的是main.js,還記得對外的介面嗎?

exports.init2,這裡呼叫就直接n.init2(),這裡就呼叫了main.js**。

這裡注意:在seajs中引入jquery,由於直接使用require的話seajs是找不到jquery的如果我們需要修改下jquery檔案,方法如下:

define(function());
如果依賴於jquery的外掛程式同樣修改源**新增**如下:

define(function(require)});
4,seajs.config配置載入器

官方介紹

基本用法就是這樣這裡提供案例原始檔。還有其他的用法待更新。。

seajs不同版本功能還需要不通的擴充套件外掛程式支援

SeaJS模組化基礎

測試sea.js 檔案 define function require,exports,module exports.b function btn on click function 對外屬性,也可以通過return語句直接返回介面,甚至簡化為define module.exports 檔案 def...

模組化之SeaJS 二

此文來自 予舍驛站 提供簡單 極致的模組化開發體驗 非官方文件,整理來自己官方文件的文字與例項,方便速查。別名配置,配置之後可在模組中使用require呼叫require jquery seajs.config define function require,exports,module 設定路徑,...

帶你快速熟悉 seajs 模組化開發

首先說明一下,這個已經是老框架了,不建議使用,只是當做了解一下過去的知識,或者學習一下源 知道過去的模組化開發是什麼樣的,模組化開發的好處,api 快速參考 該頁面列舉了 sea.js 的常用 api。只要掌握這些用法,就可以嫻熟地進行模組化開發。seajs 的目的就是將 js,css,html 檔...