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>