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严格区分，推崇职责单一