码迷,mamicode.com
首页 > 编程语言 > 详细

2.精通前端系列技术之JavaScript模块化开发

时间:2015-09-22 23:45:22      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:

在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下

 

问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完全避免冲突

// 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之前加载。

传统脚本所依赖的脚本必须全部引用进来

<!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模块化

如何解决?
Seajs库
解决刚才出现的问题,提升代码的可维护性
模块的概念
http://seajs.org
Seajs 与 jQuery的区别

query像是冲锋陷阵的士兵(操作DOM操作,用于实际开发),seajs就像是管后勤的(模块开发,不涉及逻辑)

1.使用seajs

 

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>

 

2.精通前端系列技术之JavaScript模块化开发

标签:

原文地址:http://www.cnblogs.com/kingCpp/p/4830827.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!