javascript模块化开发

一.什么是模块化开发

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

二.模块化开发好处

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

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

三.实现规范

• 服务器端规范
  CommonJS—nodejs
• 浏览器端规范
  AMD—RequireJS 国外相对流行
  CMD—SeaJS 国内相对流行

四.具体实现(SeaJs为例)

RequireJS 与SeaJs实现方式大同小异,这里就以SeaJs为例介绍了

1. 在页面中引入sea.js文件

<script src="node_modules/seajs/dist/sea.js"></script>

2.定义一个主模块如calculator.js, 在主模块文件中通过define的方式定义一个模块，并导出公共成员

// 定义一个模块，遵循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;
});

3. 在页面的行内脚本中通过seajs.use(‘path’,fn)的方式使用模块

  seajs.use('./01-calculator.js', function(calculator) {

    });

五.其他介绍

require

require 用来获取指定模块的接口。

define(function(require, exports, module) {
  var convertor = require('./01-convertor.js');
  }

require.async

用来在模块内部异步加载一个或多个模块。

导出成员的方式

• module.exports
• exports.xxx
• return

配置

seajs.config({
  // 别名配置
  alias: {
    'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
    'json': 'gallery/json/1.0.2/json',
    'jquery': 'jquery/jquery/1.10.1/jquery'
  },

  // 路径配置
  paths: {
    'gallery': 'https://a.alipayobjects.com/gallery'
  },

  // 变量配置
  vars: {
    'locale': 'zh-cn'
  },

  // 映射配置
  map: [
    ['http://example.com/js/app/', 'http://localhost/js/app/']
  ],

  // 预加载项
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ],

  // 调试模式
  debug: true,

  // Sea.js 的基础路径
  base: 'http://example.com/path/to/base/',

  // 文件编码
  charset: 'utf-8'
});

这里举一个别名的例子

    seajs.config({
      alias: {
        // 变化点封装
        calc: './modules/calc.js',
      }
    });
    seajs.use('calc');

SeaJS和RequireJS对比

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