定义与由来

定义

模块就是实现特定功能的相互独立的一组方法。

由来背景

随着网站逐渐的开发，嵌入网页的js代码越来越庞大，而网页也越来越像桌面程序，需要一个团队去分工协作，进行管理和测试等等。为了更好的管理网页的业务逻辑，也就产生了模块化编程的理念。

为了让开发者方便地加载各种模块，因此需要一套编写模块的规范，而且目前通行的JavaScript的模块规范有两种：CommonJS 和AMD。另外，在模块化开发问题上，一方面以AMD/CMD为代表的规范在过去几年时间及大地提升了前端生产力。另一方面，随着ES6，Web Components的临近，开发者们面临着承前启后的巨大挑战。。。。这也给前端小伙伴带来了新一轮知识学习挑战。。。。呵呵，深入学习吧，且行且珍惜

模块加载器的作用

模块加载器主要是为了解决两个问题：

实现js的异步加载，避免网页失去响应；

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

模块化的核心价值

代码复用；提升维护性也即是：公共模块通常用于促进代码复用；业务模块通常用于提升可维护性
在前端项目中经常使用的如JQuery，underscore.js等库，其实可以看做是公共模块，他们对常用的、工具性的代码提供了抽象。

CommonJS规范

模块化开发对服务器端开发是必须的，nodejs的模块系统就是参照CommonJS规范实现的。因此，可以理解为CommonJS即为服务器端模块的规范。根据CommonJS的规范，一个单独的文件就是一个模块，加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。另外，CommonJS规范加载模块是同步的，只有加载完成，才能执行。由于Node.js主要用于服务器端编程，模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑非同步加载方式，所以CommonJS规范比较适合。但是，如果是浏览器环境，要从服务器端加载模块，这时就需要采用非同步模式，因此，浏览器段一般都是采用AMD/CMD规范。

commonJS期望用其API写出的应用可以具备跨宿主环境执行的能力，这样不仅可以利用js开发富客户端应用，而且还可以编写以下应用：

服务器端js应用程序
命令行工具
桌面图形界面应用程序
混合应用（Titanium 和 Adobe AIR等形式的应用）
commonJS规范涵盖了模块、二进制、Buffer、字符集编码、I/O流、进程环境、文件系统、套接字、单元测试、Web服务器网关接口、包管理等

AMD规范

AMD即能在客户端环境，并且能兼容服务器端模块的一种模块规范。

AMD规范使用define定义模块，例子如下：

define(['package/lib'],funciton(lib){funciton foo (){lib.log("hehe");}return {foo : foo};
});

define的第一个参数表示依赖的模块数组，第二个为加载完依赖的模块数组后，模块执行函数

AMD模块加载定义，require方法

与CommonJS一样，AMD也采用require()语句加载模块，但是不同的是有两个参数：require([module],callback);

第一个参数[module]是一个数组，其成员就是要加载的模块；

第二个参数callback,则是加载成功后的回调函数。

require(['package/moduleA'],funciton(moduleA){moduleA.add(3,4);
});

moduleA.add()与moduleA模块加载不是同步的，十分适合浏览器的环境.引入AMD规范的js库实现目前主要有两个：require.js 和curl.js

requireJS 与SeaJS

(来自玉伯的blog：)

相同之处

两者都是模块加载器，倡导模块化开发理念，核心价值都是让JavaScript的模块化开发变得简单自然。

不同之处

**定位有差异，**RequireJS想成为浏览器段的模块加载器，同时也形成为Rhino/node等环境的模块加载器；SeaJS则专注于web浏览器端，同时通过Node扩展的方式可以很方便地跑在Node环境中。
遵循的规范不同，RequireJS遵循AMD（异步模块定义）规范，seaJS遵循CMD（通用模块定义）规范。规范的不同，导致了两者API不同。SeaJS更贴近 CommonJS Modules/1.1 和Node Modules规范。
推广理念有差异，RequireJS在尝试让第三方库修改自身支持RequireJS，目前只有少数社区采纳。SeaJS不强推，采用自主封装的范式来“海纳百川”，目前已有成熟的封装策略。
对开发调试的支持有差异，SeaJS非常关注代码的开发调试，有nocache、debug等用于调试的插件。RequireJS无这方面的明显支持。
插件机制不同，RequireJS采取的是在源码中预留接口的形式，插件类型比较单一。SeaJS采取的是通用事件机制，插件类型更丰富。

web前端模块化开发相关推荐

web前端模块化开发_真正的模块化Web应用程序：为什么没有开发标准？
web前端模块化开发 OSGI , SpringSource , Jboss模块 ,J2EE和清单永远不会结束.所有这些技术都向他们的最终用户/开发人员保证了相同的东西,或多或少是Java模块化Web ...
前端模块化开发学习之gulpbrowserify篇
随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...
浅析：前端模块化开发规范
浅析:前端模块化开发规范早期的模块化解决方案 NameSpace:命名空间模式匿名闭包:IIFE模式模块模式:IIFE+依赖传参 ES6之前的模块化解决方案 CommonJS模块化规范 AMD模 ...
Web前端设计开发规范
前言本文主要整理了Web前端设计开发的相关规范,主要由网络收集,希望对大家在Web设计和开发的过程中有一些帮组. 目录一.界面设计规范细则二.CSS编写和命名规范三.JavaScript编程规 ...
web中模块化开发理解
web中模块化开发理解一.什么是模块化开发? 1.web开发中将项目的实现划分为许多模块,模块其实就是将功能相关的代码封装在一起,方便维护 ,重用:模块之间通过API进行重组. 二.为什么要通过模块 ...
Web前端工程师开发规范必须要注意的事
Web前端工程师开发规范必须要注意的事规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范 ...
php前端介绍,Web前端的开发前景介绍
"路漫漫其修远兮,吾将上下而求索",这句出自<离骚>. 虽然端午已过,但是还是不影响一个程序员想表(zhuang)达(boy)自己此刻心情的冲动. 偶然路过同事旁边,不 ...
web前端网页开发离不开的三要素：HTML、CSS、JavaScript
前端开发是目前高薪岗位之一,是从最开始的页面开发不断发展优化而产生的一个特定的岗位.现在web前端开发一定会用到的三门技术:HTML.CSS.JavaScript.无论是多么炫酷的页面都是这三门技术的 ...
web前端移动开发必须知道那些基础
web前端必须知道的那些基础--移动开发适配概述流行的移动端布局百分比布局 rem布局 viewport end 骚话概述有一阵子没写博客了,学习了移动开发一段时间,发现从PC网页到Mobi ...

web前端模块化开发