首先引用我们的今天的主角 ----《前端模块化开发的价值》
1,前端开发最常见的两个问题 ---命名冲突和文件依赖
2,对于命名冲突的基本解决办法就是学习其他语言的习惯,添加命名空间
var org = {};
org.CoolSite = {};
org.CoolSite.Utils = {}; org.CoolSite.Utils.each = function (arr) {
// 实现代码
}; org.CoolSite.Utils.log = function (str) {
// 实现代码
};
但是真正使用的时候,就会带来一个问题就是使用一个方法,需要程序猿记住很长的命名空间,必须使用log方法,就需要写 org.CoolSite.Utils.log,它并不能想其他语言一样,使用import ,using来引用相应的命名空间。
3,对于文件依赖的基本解决办法就是在每个文件的内容定义把依赖的文件都引入。
document.write('<script type="text/javascript" src="../jquery1.4.js"/>'); function myeach(){
return jQuery.each;
}
但是在我们开发过程中,就会出现如果一个页面同时引入两个jquery插件的话,那么就会出现第一个插件怎么都访问不到。原因就是后者又重新引入了jquery文件,那么第一个插件就没有了。
4,以上前端开发过程中出现的文件,就是引用模块开发的意义。
模块开发基本代码:
define(function(require, exports) {
exports.each = function (arr) {
// 实现代码
}; exports.log = function (str) {
// 实现代码
};
});
define(function(require, exports) {
var util = require('./util.js'); exports.init = function() {
// 实现代码
};
});
5,模块加载器目前比较流行的有 Requirejs 和 Seajs