隨着時間的推移,原生js愈來愈強大,es6中的improt,export已經能夠實現模塊化開發,但惋惜的是如今的瀏覽器還不支持,須要進行編譯,相信在不久的未來,必定會大行其道,今天咱們來聊聊模塊化開發中一個比較好的庫,sea.jsjavascript
先說說模塊化開發的優勢吧:html
1,避免全局的變量或方法之間的污染java
2,管理模塊之間的依賴jquery
來看一下sea.js如何使用es6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/sea.js"></script>
<script type="text/javascript">
seajs.use("main",function(){
//接收2個參數,一個是要導入的模塊,一個是加載完以後的一個回掉,第二個參數可寫,可不寫
});
</script>
</html>數組
首先咱們要引入sea.js庫,而後調用seajs中的use方法,use方法是主入口的方法,此時要注意,默認狀況下,導入的模塊的根目錄是以sea.js爲準,後綴.js可寫可不寫。瀏覽器
define(function(require,exports,module){ require('jquery'); //導入jquery var a_ex = require('./a.js'); //導入a.js console.log(a_ex); //打印從a.js中導入過來的內容 {a:1,b:2} console.log(a_ex.a); //1 console.log(a_ex.b); //2 console.log(module,99999); //打印mdule參數所包含的信息 });
咱們能夠看到a.js中調用了define方法,這個方法是sea.js的核心方法,接收三個參數,第一個參數是模塊的id標識,第二個參數是數組 ,deps是模塊依賴(第一個和第二個參數通常不寫,自動化工具在構建的時候會自動添加)模塊化
define('hello', ['jquery'], function(require, exports, module) { // 模塊代碼 });
第三個參數是一個回調函數,接收三個參數,require,exports,module注意這三個參數不能任意更改,不然會報錯,require用來導入一個模塊,exports用來導出一個模塊,moudle是這個模塊中所包含的一些信息函數
define('a.js',[],function(require,exports,module){ var a = 1; var b = 2; exports.a = a; exports.b = b; });
以上是a.js中的代碼工具
以上是main模塊中所打印出的module的數據
這就是sea.js的一些基本的用法,也是最經常使用的一些,有了這些知識,就能夠進行模塊化開發,至於其餘的一些不太經常使用的好比seajs.config方法等你們能夠看seajs的官網,都說的挺詳細的。