模块化编程

我就是我 2022-03-08 01:20 240阅读 0赞

### 1.定义： ###

模块化程序设计是指将一个大程序根据功能划分为若干个小程序，并在这些模块中建立必要的联系。修改某个功能是不会影响其他功能

**①原始写法**：实现特定功能的一组方法。

function m1(){
    　　　　//...
    　　}
    
    　　function m2(){
    　　　　//...
    　　}

**缺点：**"污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

**②对象写法：**为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。

var module1 = new Object({
    
    　　　　_count : 0,
    
    　　　　m1 : function (){
    　　　　　　//...
    　　　　},
    
    　　　　m2 : function (){
    　　　　　　//...
    　　　　}
    
    　　});

**缺点：**暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。

**③立即执行函数写法：**可以达到不暴露私有成员的目的。

**缺点：**外部代码无法读取内部的\_count变量。

④**放大模式：**如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。

var module1 = (function (mod){
    
    　　　　mod.m3 = function () {
    　　　　　　//...
    　　　　};
    
    　　　　return mod;
    
    　　})(module1);

⑤**宽放大模式：**在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。

var module1 = ( function (mod){
    
    　　　　//...
    
    　　　　return mod;
    
    　　})(window.module1 || {});

⑥**输入全局变量**

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

var module1 = (function ($, YAHOO) {
    
    　　　　//...
    
    　　})(jQuery, YAHOO);

### 2、模块规范 ###

**（1）commonJs**

在CommonJS中，有一个全局性方法require()，用于加载模块。

用法：加载：var math = require('math');

调用：math.add(2,3);

**（2）AMD（**Asynchronous Module Definition**）：require.js与curl.js**

它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

用法：require(\[module\], callback);

**AMD模块的写法：**

就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：

> 　　// math.js
> 
> 　　define(function ()\{
> 
> 　　　　var add = function (x,y)\{
> 
> 　　　　　　return x+y;
> 
> 　　　　\};
> 
> 　　　　return \{
> 
> 　　　　　　add: add  
> 　　　　\};
> 
> 　　\});

加载方法如下：

> 　　// main.js
> 
> 　　require(\['math'\], function (math)\{
> 
> 　　　　alert(math.add(1,1));
> 
> 　　\});

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

> 　　define(\['myLib'\], function(myLib)\{
> 
> 　　　　function foo()\{
> 
> 　　　　　　myLib.doSomething();
> 
> 　　　　\}
> 
> 　　　　return \{
> 
> 　　　　　　foo : foo
> 
> 　　　　\};
> 
> 　　\});

### 3、require.js ###

（1）实现js文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。

data-main设置js入口

**主模块的写法**

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    
    　　　　// some code here
    
    　　});

第一个参数是一个数组，表示所依赖的模块，上例就是\['moduleA', 'moduleB', 'moduleC'\]，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

**模块的加载：**

上一节最后的示例中，主模块的依赖模块是\['jquery', 'underscore', 'backbone'\]。默认情况下，require.js假定这三个模块与main.js在同一个目录，文件名分别为jquery.js，underscore.js和backbone.js，然后自动加载。

使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。

require.config({
            baseUrl: "js/lib",
    　　　　paths: {
    
    　　　　　　"jquery": "jquery.min",
    　　　　　　"underscore": "underscore.min",
    　　　　　　"backbone": "backbone.min"
    
    　　　　}
    
    　　});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

shim: {
    
    　　　　'jquery.scroll': {
    
    　　　　　　deps: ['jquery'],
    
    　　　　　　exports: 'jQuery.fn.scroll'
    
    　　　　}
    
    　　}