模块化
最主要的目的：
1:解决命名冲突
2:依赖管理
其他价值
提高代码可读性
代码解耦，提高复用性
参考：https://github.com/seajs/seajs/issues/547
http://javascript.ruanyifeng.com/nodejs/module.html
http://requirejs.org/
目前通用的js规范有 CommonJS 和 AMD
<script src="./require.js" data-main="main"></script>
//data-main必须和require.js写在同一行
//CommonJS例子（Node端运行）
//a.js
var people = {
name: 'ruoyu',
sayName: function(){
console.log(this.name);
}
}
module.exports = people;
//b.js
var p = require('./a');
p.sayName();
//浏览器端的问题
仔细看上面的代码，会发现require是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。
浏览器端，加载JavaScript最佳、最容易的方式是在document中插入script 标签。但脚本标签天生异步，传统CommonJS模块在浏览器环境中无法正常加载。
解决思路之一是，开发一个服务器端组件，对模块代码作静态分析，将模块与它的依赖列表一起返回给浏览器端。 这很好使，但需要服务器安装额外的组件，并因此要调整一系列底层架构。
另一种解决思路是，用一套标准模板来封装模块定义，但是对于模块应该怎么定义和怎么加载，又产生的分歧：
题目1： 为什么要使用模块化？
1.解决命名冲突
2.依赖管理
3.提高代码可读性
4.代码解耦，提高代码复用性
题目2： CMD、AMD、CommonJS 规范分别指什么？有哪些应用
AMD 异步模块定义 在浏览器端模块化开发的规范
AMD是RequireJS在推广过程中对模块定义的规范化的产出
requireJS主要解决两个问题：
1.多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
2.js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长
//比如定义一个index.js
//AMD
require( ['carousel', 'tab', 'lazy'], function(Carousel, Tab, lazy) {
new Carousel();
Tab.init();
Lazy.init();
})
//CommonJS
var carousel = require();
new carousel('.ct');
var tab = require('./tab')
tab.init();
var lazy = require('./lazy')
lazy.init('', function(){
})
//具体加载时机由支持该语法的框架决定
CMD 通用模块定义 seajs
//CommonJS规范 Node采用CommonJS模块规范
//每个文件就是一个模块，有自己的作用域，在一个
//文件里面定义的变量 函数 类 都是私有的，对其他文件不可见
//CommonJS模块的特点如下：
//所有代码都运行在模块作用域，不会污染全局作用域。
//模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
//模块加载的顺序，按照其在代码中出现的顺序。
//example.js
var x = 5;
var addX = function (value) {
return value + x;
};
//变量 x和函数addX，是当前文件example.js私有的，其他文件
//不可见
//如果想在多个文件分享变量，必须定义为global对象的属性
global.warning = true;
//CommonJS规定，每个模块内部，module变量代表当前模块。
//这个变量是一个对象，它的exports属性(即module.exports)
//是对外的接口。加载某个模块，其实是加载该模块的
//module.exports属性
var x = 5;
var addX = function (value) {
return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
//通过module.exports输出变量x和函数addX
//require方法用于加载模块
var example = require('./example.js')
console.log(example.x) //5
console.log(example.addX(1)) //6
题目3： 使用 requirejs 完善入门任务15，包括如下功能：
7777.png
https://firedearthmusic.github.io/requirejs-demo/src/index.html
网友评论