js本身是沒有模組化的概念,有了seajs就有了模組化的思想,為了快速上手使用這裡一切以案例為主。
這裡以乙個jquery.fancybox.pack.js燈箱效果外掛程式介紹如何運用到seajs中。
傳統的呼叫js我們可以看到載入js要按先後順序進行載入,例如圖:
效果是一樣的,就是減少了首頁**的**量。
步驟:1,先載入sea.js
2,定義模組,要搞清楚js之間的依賴關係。定義乙個模組:define(function(require,exports,moudle));
define(function(require,exports,moudle));3,呼叫模組} exports.init2 = init;//以上的變數和方法都是此模組私有,我們要在其他模組呼叫必須要提供對外的介面,以後對外的介面要使用的話直接就呼叫init2即可。
});
seajs.use(['./js/1','./js/main'],function(m,n));這裡注意:在seajs中引入jquery,由於直接使用require的話seajs是找不到jquery的如果我們需要修改下jquery檔案,方法如下:如果是呼叫多個模組可以用陣列+引數1.js對應m物件,main.js對應n。
之前的例子我們寫的是main.js,還記得對外的介面嗎?
exports.init2,這裡呼叫就直接n.init2(),這裡就呼叫了main.js**。
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 檔...