您的位置：首页 > Web前端 > JavaScript

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

2015-09-22 23:04 981 查看

在使用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航