模块化开发

来源：互联网发布：项目书籍商务知乎编辑：程序博客网时间：2024/05/16 10:29

讲模块化开发之前，我们先了解一下传统开发模式是什么？比如说A所在的公司在做一个项目，公司安排A跟B还有C三个人一起协同开发，A负责一部分功能块，B负责另一部分功能块，把项目的功能分成一块一块，这适用于多人协作开发，每个人负责不同的功能块，当然，这其中有人是负责整合的，有人是负责开发公共功能块的等等。

首先我们来看几个栗子

　　function f1(){　　　　//功能代码　　}　　function f2(){　　　　//功能代码　　}

两个函数放一起，这就是一个模块。什么时候我们要用到就调用就行了。

但是这样的做法并不可取，因为有很大概率会出现，A写的功能块有个show()方法，而B写的功能块同样也有show()，那么，可能到最后项目整合的时候，C想调用A功能块的show()方法，却调用了B的show()（A的show()被覆盖），这样就出现了变量命名冲突。有一种方法可以单纯的解决这一个问题。

立即执行函数：

(function(){    function show(){        alert('show2');    }    show();})();

A跟B的js文件被C引用的时候，它们的show()都可以被调用，但是，这样的话，C无法取到show()方法里面的变量，因此，这也是不可取的做法。

那我们应该怎么解决呢？这里就说到我们的主角，模块化开发了，模块化开发就是来帮我们解决这个问题的。下面我会介绍一个模块化开发库 sea.js，这个库的创始人是阿里巴巴的大神玉伯。

首先在学sea.js之前，我们需要了解一个东西，规范，所谓规范就相当于规则，你要用我开发的库，就需要遵守一定的规范。sea.js遵循的规范是玉伯自己定义的，CMD规范，诸如此类的规范还有AMD规范（适用于require.js），common.js规范（适用于node.js）等等。

一：sea.js分为两个模块

1，定义模块
define(function( require, exports, module ){
function show(){
alert('module1-show');
}
//通过exports把show方法提供给外部使用
exports.a = show;
});

2，引用模块
seajs.use('模块的路径', function(ex){});

二：使用sea.js

1，我们怎么使用它呢？首先去网上把它download下来，放到你的项目里面，在你的html上引用它。

<script src="sea.js"></script>

接下来就是用定义模块来定义你的功能块，举个栗子：

define(function (require, exports, module) {

var a=10;function drag(){

//代码

exports.a=a;//讲a变量暴露出去        exports.drag=drag;//将drag方法暴露出去});

2，在html上使用引用模块来获取你的定义好的功能块

<script>

seajs.use("./main.js");

</script>

3,如果我们的功能块A有需要引用功能块B，那么就在功能A上调用require();下面是栗子

    var drag=require("./drag.js").drag;

    这样就把B功能块的drag函数引用过来了，当然，也可以引用变量，只要该变量
有被暴露出来.

0 0