本文共 6765 字，大约阅读时间需要 22 分钟。

目录

---

概述

什么是模块化开发

• 将软件产品看作为一系列功能模块的组合
• 通过特定的方式实现软件所需模块的划分、管理、加载

非模块化开发的问题

•命名冲突

添加命名空间YUI 、EXTJS---可以从一定程度上解决命名冲突，但是增加了开发人员记忆冗长api的难度。

•文件依赖

团队变大后，维护大量的文件依赖关系非常困难，公共模块的维护、升级很不方便。

为什么使用模块化开发

• https://github.com/seajs/seajs/issues/547
• 协同
• 代码复用
• 解决问题
  • 大量的文件引入
  • 命名冲突
  • 文件依赖
  • 存在
  • 顺序

实现模块化的推演

step-01 全局函数

  
               +    -    x    ÷          
   

step-02 封装对象

  
               +    -    x    ÷          
   

step-03 划分私有空间

  
               +    -    x    ÷          
   

step-04 模块的扩展与维护

  
               +    -    x    ÷    %          
   

step-05 第三方依赖管理

  
                 +    -    x    ÷    %          
   

在什么场景下使用模块化开发 业务复杂 重用逻辑非常多 扩展性要求较高

---

实现规范

CommonJS规范

AMD规范

CMD规范

•服务器端规范

CommonJS---nodejs

•浏览器端规范

AMD---RequireJS 国外相对流行

CMD---SeaJS 国内相对流行

CMD实现-SeaJS

 SeaJS---阿里巴巴前端架构师玉伯

             js文件的依赖管理、异步加载，方便前端的模块化开发。

             官方网站：http://seajs.org/

AMD实现-RequireJS

             RequireJS- AMD规范的创始人

            与SeaJS 基本实现类似的功能

            中文官网：http://www.requirejs.cn/

SeaJS和RequireJS对比

• 对于依赖的模块，AMD是提前执行，CMD是延后执行
• CMD推崇依赖就近，AMD推崇依赖前置
• AMD的API默认是一个当多个用，CMD的API严格区分，推崇职责单一

---

实现Seajs

使用步骤

1. 在页面中引入sea.js文件
2. 定义一个主模块文件，比如：main.js
3. 在主模块文件中通过define的方式定义一个模块，并导出公共成员
4. 在页面的行内脚本中通过seajs.use('path',fn)的方式使用模块
5. 回调函数的参数传过来的就是模块中导出的成员对象

定义一个模块

• define

javascript define(function(require, exports, module) { exports.add = function(a, b) { return a + b; }; });

使用一个模块

• seajs.use
  • 一般用于入口模块
  • 一般只会使用一次
• require
  • 模块与模块之间

     
                 +    -    x    ÷        

 

   // 定义一个模块，遵循Seajs的写法define(function(require, exports, module) {  // 此处是模块的私有空间  // 定义模块的私有成员  // 载入01-convertor模块  var convertor = require('./01-convertor.js');  function add(a, b) {    return convertor.convertToNumber(a) + convertor.convertToNumber(b);  }  function subtract(a, b) {    return convertor.convertToNumber(a) - convertor.convertToNumber(b);  }  function multiply(a, b) {    return convertor.convertToNumber(a) * convertor.convertToNumber(b);  }  function divide(a, b) {    return convertor.convertToNumber(a) / convertor.convertToNumber(b);  }  // 暴露模块的公共成员  exports.add = add;  exports.subtract = subtract;  exports.multiply = multiply;  exports.divide = divide;});

 

   /** * 转换模块，导出成员：convertToNumber */define(function(require, exports, module) {  // 公开一些转换逻辑  exports.convertToNumber = function(input) {    return parseFloat(input);  }});

导出成员的方式

• module.exports
• exports.xxx
• return
• 三种方式的优先级

     
                 +    -    x    ÷        

   // 定义一个模块，遵循Seajs的写法define(function(require, exports, module) {  // function add(a, b) {  //   return parseFloat(a) + parseFloat(b);  // }  // function subtract(a, b) {  //   return parseFloat(a) - parseFloat(b);  // }  // function multiply(a, b) {  //   return parseFloat(a) * parseFloat(b);  // }  // function divide(a, b) {  //   return parseFloat(a) / parseFloat(b);  // }  // // 暴露模块的公共成员  // exports.add = add;  // exports.subtract = subtract;  // exports.multiply = multiply;  // exports.divide = divide;  // console.log(module.exports === exports);  //  // function Person(name, age, gender) {  //   this.name = name;  //   this.age = age;  //   this.gender = gender;  // }  // Person.prototype.sayHi = function() {  //   console.log('hi! I\'m a Coder, my name is ' + this.name);  // };  // // exports.Person = Person;  // module.exports = Person;  // 最终导出的以 module.exports  // module.exports = { name: 'world' };  // // 此时module.exports 指向的是一个新的地址  // exports.name = 'hello';  // // exports是module.exports的快捷方式，指向的任然是原本的地址  // module.exports优先级第二  module.exports = { name: 'hello' };  console.log(module);  // return 的优先级最高  return { name: 'world' };});

 

异步加载模块

• 默认require的效果是同步的，会阻塞代码的执行，造成界面卡顿
• require.async();

require.async('path',function(module) {});

     
                 +    -    x    ÷        

 

   define(function(require, exports, module) {  // console.log('module1 ---- start');  // // require 必须执行完成过后（./module2.js加载完成）才可以拿到返回值  // var module2 = require('./03-module2.js'); // 阻塞代码执行  // // JS中的阻塞会有卡顿的情况出现  // console.log('module1 ---- end');  //  console.log('module1 ---- start');  require.async('./03-module2.js', function(module2) {  }); // 此处不会阻塞代码执行  console.log('module1 ---- end');});

 

   define(function() {  console.log('module2 exec');});

使用第三方依赖（jQuery）

• 由于CMD是国产货，jquery默认不支持
• 改造

javascript // 适配CMD if (typeof define === "function" && !define.amd) { // 当前有define函数，并且不是AMD的情况 // jquery在新版本中如果使用AMD或CMD方式，不会去往全局挂载jquery对象 define(function() { return jQuery.noConflict(true); }); }

 

   'use strict';define(function(require, exports, module) {  // 想用jquery怎么办  var $ = require('./jquery.js');  console.log($);  $(document.body).css('backgroundColor', 'red');});

Seajs配置

• seajs.config
  • base
  • alias

 

   'use strict';define(function(require, exports, module) {  console.log(11111);});

使用案例

• Tab标签页

 

   define(function(require, exports, module) {  var Pagination = require('./modules/pagination.js');  var pager = new Pagination(1, 20, 7);  pager.render('.pagination');  pager.render('.pagination1');});

 

   define(function(require, exports, module) {// format = 'http://www.baidu.com/page/@/'  function Pagination(current, total, show, format) {    this.current = current;    this.total = total;    this.show = show;    // 1. 根据显示数量算出正常情况当前页的左右各有几个    var region = Math.floor(show / 2);    // 2. 计算出当前界面上的起始值    var begin = current - region; // 可能小于 1    begin = begin < 1 ? 1 : begin;    var end = begin + show; // end必须小于total    if (end > total) {      end = total + 1;      begin = end - show;      begin = begin < 1 ? 1 : begin;    }    this.begin = begin;    this.end = end;  };  /**   * 渲染当前这个组件到界面上   */  Pagination.prototype.render = function(containers) {    // 获取分页展示容器    // p.render('.pgfds');    if (typeof containers === 'string') {      containers = document.querySelectorAll(containers);    }    if (containers.length === undefined) {      // dom对象      containers = [containers];    }    for (var c = 0; c < containers.length; c++) {      var container = containers[c];      // 先append上一页      var prevElement = document.createElement('li');      prevElement.innerHTML = '«';      if (this.current == 1) {        prevElement.classList.add('disabled');      }      container.appendChild(prevElement);      for (var i = this.begin; i < this.end; i++) {        var liElement = document.createElement('li');        liElement.innerHTML = '' + i + '';        if (i == this.current) {          // 此时是当前页          liElement.classList.add('active');        }        container.appendChild(liElement);      }      var nextElement = document.createElement('li');      nextElement.innerHTML = '»';      if (this.current == this.total) {        nextElement.classList.add('disabled');      }      container.appendChild(nextElement);    }  };  module.exports = Pagination;});

RequireJS

转载地址：http://snxmi.baihongyu.com/