为什么要使用模块化
网站越来越复杂，js代码、js文件也越来越多
1.命名冲突
2.文件依赖问题
- 程序中的模块化
- 开发效率高 一次编写多次使用
- 方便维护了（维护的成本更低）模块之间有高耦合低内聚的特点
对象封装
- 用命名空间的方式进行封装
- 先约定命名的规范的形式
- 对象里面的属性和方法很容易被修改掉，很不安全
划分私有空间
-通过匿名函数自执行的方法封装模块，
-可以保护私有变量和方法
模块的维护扩展
- 开闭原则，对修改关闭，对扩展开放。
- 增加了代码的健壮性和容错性
模块的第三方依赖
- 模块职责唯一性
- 把依赖的模块，通过依赖注入的形式，在你的参数上进行体现。
总结
- 最大的问题，规范的问题
- 如果在多人协作开发过程中，会有很大的问题
- 多人协作开发过程中：代码的风格一定要统一
JavaScript模块化实现的三种技术规范
http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html 阮一峰博客
实际上，这三种第三方框架，目前已经很少用了，seajs最近一次更新是在2014年了。因为JS现在的语法越来越完善，正在向强语言进化，强语言本身就自带模块化。
AMD
AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD规范其实只有一个主要接口 define(id,dependencies,factory)，它要在声明模块的时候指定所有的依赖dependencies，并且还要当做形参传到factory中，对于依赖的模块提前执行，依赖前置
//定义模块
define("module", ["dep1", "dep2"], function(d1, d2) {
return someExportedValue;
});
//引入模块
require(["module", "../file"], function(module, file) {
});
优点：
适合在浏览器环境异步加载
并行加载多个模块
缺点：
提高开发成本，代码阅读和书写比较困难
不符合通用的模块思维方式，是一种妥协的实现
实现：
require.js
CMD
CMD规范和AMD相似，尽量保持简单，并且与CommonJS和NodeJS的Modules规范保持了很大的兼容性。
//定义模块
define(function(require, exports, module) {
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ...
})
//导入模块
//第一参数是入口模块的路径
//第二个函数是回调函数
seajs.use('路径',function(回调对象){
//此回调对象就是moudle.exports对象。我们可以使用定义模块中，module.exports对象所有的属性与方法
});
优点：
依赖就近，延迟执行
很容易在node中运行
缺点：
依赖SPM打包，模块的加载逻辑偏重
实现： SeaJS
SeaJS路径配置
//seajs所在的路径为默认根目录
seajs.config({
//配置根目录
base： “../sea-modules/”,
//别名
alias : {
“jquery”: “jquery/jquery/1.10.1/jquery.js(路径)” //方便调用
}
})
CommonJs
CommonJS是在浏览器环境之外构建JavaScript生态系统为目标产生的项目，比如服务器和桌面环境中。CommonJS规范是为了解决JavaScript的作用域问题而定义的模块形式，可以使每个模块在它自身的命名空间中执行。
该规范的主要内容是：模块必须通过 module.exports导出对外的变量或接口，通过require()来导入其他模块的输出到当前模块。
//定义模块
exports.doStuff = function() {};
module.exports = someValue;
//引入模块 -- 同步执行，不用回调
require("module");
require("../file.js");
优点：
服务器端便于重用
NPM中已经将近20w个模块包
简单并容易使用
缺点：
同步的模块方式不适合不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的
不能非阻塞的并行加载多个模块
实现：node.js
nodejs中，原生已经实现了模块化，已经不需要导入第三方库了，可以直接require()
服务器端与浏览器端的技术选型？
服务器端模块化规范 -- CommonJS
老实说，在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。
node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块
浏览器端 -- AMD(requirejs) CMD(Seajs)
因为服务器与APP都是加载的本地的资源，所以，不用回调这种操作，同步依次上下执行即可，导入操作 不会像浏览器端这样，占用太长时间。
因为上面这个原因，浏览器端，只能选择 AMD - CMD 两种规范，异步执行，不阻塞线程。
了解SeaJS，以及Seajs与requirejs之间的区别？
定义模块 define
- 定义模块
define(function(){}) - 函数体内的方法属性都属于这个方法，对外有封装性;解决了命名冲突问题，使js代码有了封装性
- 直接调用 jQuery 插件等非标准模块的方法 http://my.oschina.net/briviowang/blog/208587
//定义模块
/*
require
加载文件依赖、模块依赖的，用于define函数体内
在一个模块系统中，`require` 加载过的模块会被缓存
默认 `require` 是同步加载模块的
exports 和 module.exports
module.exports曝露出一个完整的对象，只能扔一次只能曝露出来一个
exports是module.exports的别名，可以用来单个属性、方法、对象的曝露，用.的形式,exports能做的事情module.exports也可以做
*/
define(function(require, exports, module) {
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ...
})
启动模块 seajs.use
- 加载入口模块，我们把define定义的js就叫模块
- 这个用于在html代码里面的加载
- seajs使用的时候，可以先在配置文件中，修改base设置基本路径，以后加载，都是相对seajs文件所在文件，但是安全起见，最好少用。
导入模块
/*
第一参数是入口模块的路径
第二个函数是回调函数
*/
seajs.use('路径',function(回调对象){
//此回调对象就是moudle.exports对象。我们可以使用定义模块中，module.exports对象所有的属性与方法
});
//seajs.use 和 Document 的 ready 没有任何关系
//要想保证 文档结构加载完毕再执行你的 js 代码，一定要在 seajs.use 内部通过 window.onload 或者 $(function(){})
requirejs与seajs的区别
requirejs是优先加载的
seajs是懒加载的，就是有拖延症，用的时候才加载
网友评论