最近在学习钉钉（一个协作应用）桌面应用的前端源码时候，发现其js源码是用browserify做模块开发。于是想还原其源码的原本的目录结构，学习它的目录分类以及业务划分。
前言
用过browserify构建工具的应该清楚，在压缩合并后的代码的最前面，有处理模块依赖关系的代码：
function e(t, n, r) { function s(o, u) { if (!n[o]) { if (!t[o]) { var a = typeof require == "function" && require; if (!u && a) return a(o, !0); if (i) return i(o, !0); var f = new Error("Cannot find module '" + o + "'"); throw f.code = "MODULE_NOT_FOUND", f } var l = n[o] = { exports: {} }; t[o][0].call(l.exports, function(e) { var n = t[o][1][e]; return s(n ? n: e) }, l, l.exports, e, t, n, r) } return n[o].exports } var i = typeof require == "function" && require; for (var o = 0; o < r.length; o++) s(r[o]); return s }
目录结构解析
我写了一个处理的方法，在browserify处理依赖关系地方调用。
分析方法：
function anlysePath(t, n, r){ var temp = {}; //收集所有地址 for(var tk in t){ var xx = t[tk][1]; for(var x in xx){ if(!temp[tk]) temp[tk] = {}; temp[tk][xx[x]] = x; } } //解析依赖关系 var after = {}; var doing = {}; function anlyse(num, prefix){ var al = temp[num]; for(var n in al){ if(after[n]) continue; var data = al[n]; if(data.startsWith("./")) data = data.substring(2, al[n].length); var cj = data.match(/\.\.\//g); if(cj) cj = cj.length + 1; else cj = 1; var pf = prefix.split("/"); pf.splice(pf.length - cj , cj); after[n] = pf.join("/")+ "/" + data.replace(/\.\.\//g,""); after[n] = after[n].replace(/\.\.\//g,""); if(after[n].startsWith("/")) after[n] = after[n].substring(1, after[n].length); } for(var n in al){ if(!doing[n]){ doing[n] = true; anlyse(n, after[n]); } } } anlyse(r[0],''); var files = {}; for(var k in after){ files[after[k]] = k; } //合并目录，得出树形结果 var paths = {}; for(var k in files){ var ps = k.split("/"); if(!paths[ps[0]]) paths[ps[0]] = ps.length == 1? ".js":{}; var begin = paths[ps[0]]; for(var i=1;i<ps.length;i++){ if(!begin[ps[i]]){ begin[ps[i]] = (i == ps.length-1)? '.js':{}; } begin = begin[ps[i]]; } } console.log(paths); }
调用地方：
(function e(t, n, r) { anlysePath(t, n, r); //这里调用，后面代码就不重复了。 function s(o, u) { if (!n[o]) { if (!t[o]) {
目录解析效果：
由于篇幅关系，没有显示所有目录结构。
可以看出第一层的目录结构是：
directive filter lib module service unPopModal _process.js es6-promise.js
path.js
PS：一个典型的AngularJS的目录结构。
总结
学习别人前端源码，我觉目录结构已经够用了，毕竟项目的骨架搭好了，其他的也就是添砖加瓦而已。
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
本文地址 ：http://www.cnblogs.com/lovesong/p/5870344.html
本文转自 海角在眼前 博客园博客，原文链接： http://www.cnblogs.com/lovesong/p/5870344.html ，如需转载请自行联系原作者
