2.精通前端系列技術之JavaScript模塊化開發 seajs（一）

時間 2019-11-24

標籤精通前端系列技術 javascript 模塊化開發 seajs 欄目 JavaScript 简体版

原文原文鏈接

在使用seajs模塊化開發以前，直接在頁面引用js會容易出現衝突及依賴相關的問題，具體問題以下html

問題1：多人開發腳本的時候容易產生衝突（好比全局參數衝突，方法名衝突），能夠使用命名空間下降衝突，不能徹底避免衝突async

// JavaScript Document

/*var a = 10;

function tab(){}

function drag(){}

function dialog(){}*/

var miaov = {};  //名字比較長 , 只能下降衝突，不能徹底避免

miaov.a = 10;

miaov.tab = function(){};

miaov.drag = function(){};

miaov.dialog = function(){};

問題2：依賴問題，js引用的依賴關係，以下代碼b.js依賴於a.js，那麼b.js不能再a.js以前加載。ide

傳統腳本所依賴的腳本必須所有引用進來模塊化

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script>

/*一個頁面中:
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>*/

show.js  :  日曆組件

你的同事:
<script src="a.js"></script>
<script src="show.js"></script>
show();


你的同事:
<script src="a.js"></script>
<script src="b.js"></script>
<script src="show.js"></script>
show();



你的同事:
<script src="a.js"></script>
<script src="b.js"></script>
<script src="show.js"></script>
<script src="hide.js"></script>
show();


</script>
</head>

<body>
</body>
</html>

當網站開發愈來愈複雜的時候，常常遇到衝突、依賴問題，如何解決以上這些問題，就是咱們js模塊化所要解決的問題。函數

JS模塊化grunt

如何解決?
Seajs庫
解決剛纔出現的問題，提高代碼的可維護性
模塊的概念
http://seajs.org
Seajs 與 jQuery的區別

query像是衝鋒陷陣的士兵（操做DOM操做，用於實際開發），seajs就像是管後勤的（模塊開發，不涉及邏輯）網站

1.使用seajsui

seajs如何解決?
①引入sea.js的庫
②如何變成模塊？
define
③如何調用模塊？
exports
seajs.use
④如何依賴模塊？
require

// JavaScript Document

define(function(require,exports,module){  //sea下的參數 : 不容許修改的
    
    //exports : 對外提供接口的對象
    
    function show(){
        alert(1);
    }
    
    exports.show = show;
    
});

// JavaScript Document

define(function(require,exports,module){  //sea下的參數 : 不容許修改的
	
	//require : 模塊之間依賴的接口
	
	var a = require('./module3.js').a;   //當引入的是sea下面的模塊的時候，那麼require執行完的結果就是exports
	
	function show(){
		alert(a);
	}
	
	exports.show = show;
	
});

// JavaScript Document

//var a = 100;

define(function(require,exports,module){
    
    //alert( module.exports == exports );
    
    /*require.async('.js/module2.js',function(){
        alert('模塊加載完的回調');
    });*/
    
    var a = 100;
    
    module.exports = {
        a : a
    };
    
});

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script src="sea/sea.js"></script>
<script>

//兩個參數 : 第一個參數 : 模塊的地址  第二個參數 : 回調函數(回調函數的參數表明exports)

//localhost/seajs+gruntjs/sea/js/module1.js

//sea的默認根目錄 : sea.js這個文件

seajs.use('./js/module1.js',function(ex){
    
    ex.show();  //1
    
    show();  //2
    
    function show(){
        alert(2);
    }
    
});


seajs.use('./js/module2.js',function(ex){
    
    ex.show();  //3
    
    show();  //4
    
    function show(){
        alert(4);
    }
    
});

</script>
</head>

<body>
</body>
</html>