提升效率，记一个内部工具的开发经历
1、开发介绍
做者：leo
更新：2019.03.14
项目源码：githubphp
1.开发背景
因为公司 V2项目 须要作组件化升级，但由于 V2项目 项目历史包袱大， 代码和文件很是多，并且嵌套较多，难以全面了解所须要调整的组件的影响范围，因此须要开发这么一个工具，来实现如下几个功能：html
- 须要能支持 自定义关键词检索 ，便于按不一样的已有组件名搜索；
- 须要能支持检索出该组件的 影响文件范围 ，还有 页面名称路由 等，便于测试按照页面快速测试；
- 须要能支持 数据可视化 ，便于判断全部影响范围的权重；
- 须要能 导出影响范围的路由文件 和 必要数据 ；
基于上面需求，我大概整理思路使用 Nodejs 和 Python 进行需求开发，缘由有这几点：前端
- 需求以操做文件为主，包括读写；
- 需求对数据处理操做比较多，包括过滤，组装数据格式；
- 需求对数据可视化的需求；
起初我准备只使用 Nodejs 完成这个需求，后面开发到一半，发现 数据可视化 方面，实在找不到一个满意的可视化插件，因而想到 Python 的一个2D绘图库—— Matplotlib ，使用起来很是方便，因而便选择了它。node
这也是我用 Nodejs 作的第一个做品，还有不少优化空间，欢迎大佬指点哈，感激涕零。python
2.工具文档
2、开发环境搭建
1.Nodejs环境搭建
对于 Nodejs 环境搭建，相信对于咱们前端开发仔来讲，应该是很简单，但这里考虑到可能原生的同窗还不太清楚，这里我简单介绍：android
- 下载和安装
Nodejs
咱们到 Nodejs官网 ，选择对应系统环境进行下载，而后直接打开安装。git
- 测试
Nodejs环境
打开命令行工具，执行 node -v ，看是是否输出对应 Nodejs 版本号，我这显示：github
v10.8.0
复制代码
另外在 WIN7 系统下可能会出现下面报错，则须要将 nodejs 安装目录，添加全局路径：npm
node : 没法将“node”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，若是包括路径，请确保路径正确，而后再试一次。
复制代码
- 安装完成
2.Python环境搭建
- 下载和安装
Python
在 Python官网 ，选择 3.x 版本下载（因为Python2.x版本已经中止维护，而且即将被淘汰），下载完成直接安装。json
- 测试
Python环境
安装完成，打开命令行工具，执行 python ，看看输出结果是不是版本号和命令行交互模式，我这显示：
PS C:\Users\mi> python
Python 3.6.3 |Anaconda, Inc.| (default, Oct 15 2017, 03:27:45) [MSC v.1900 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>
复制代码
- 安装绘图库
Matplotlib
python 安装其余包是用 pip install packageName 来安装，跟 Nodejs 中的 npm install packageName 是同样的，咱们就这么安装 Matplotlib ：
pip install Matplotlib
复制代码
- 安装完成
3、开发过程
首先先介绍下开发的思路：
1.最终效果
最终我实现的效果是，开发 search_current_file.js 和 search_current_file_python.py 两个文件，并经过执行两个命令，来获取对应数据文件：
- 获取 全部包含关键词的文件的路径、所在文件夹内文件数量和全部文件对应页面的路由/参数/标题等数据 统计的文件和表格。
node search_current_file.js
复制代码
- 获取 全部文件夹中文件数量占总文件数的比例 的饼图结果。
python search_current_file_python.py
复制代码
这里须要输入须要生成的指定文件夹的数据，默认不输入则生成全部文件夹下的数据。
2.Nodejs开发部分
首先定义几个下面主要使用的变量，其余没有写在这里的变量和做用，能够查看源码。
var Excel = require('exceljs');
var XLSX = require('xlsx');
var filterFile = ['.html']; // 须要检索的文件类型
var filterDir = ['lib']; // 须要排除的文件夹
var classArray = [ // 须要检索的类名数组
'search-holder','exe-bar-search','输入搜索内容','<exe-search','learn-search','ion-android-search'
];
var resultArray = []; // 最终结果
var resultAlassify = {}; // 最终结果分类
var excelFileArr = []; // excel文件内容数组
复制代码
2.1获取搜索结果
目的： 搜索包含关键词的全部HTML文件，并保存这些数据。
- 核心方法
getCurrenAllFile()
咱们经过 fs.readdir 方法，来获取路径下全部文件和文件夹名称做为一个集合；
而后遍历该集合，当 stat.isDirectory() 为 true 则表示该结果为一个文件夹，为 false 则继续使用 getCurrenAllFile() 来读取下一层的文件信息。
/** * 获取当前项目的全部HTML文件 * @param {string} paths 文件的路径 */
var getCurrenAllFile = function (paths){
// ... 省略部分
var fileArr = [];// 初始化最终结果分类的对象
fs.readdir(paths, function(err, files){
_.forEach(files, function(item, index){
var c_path = path.join(paths, item);
var stat = fs.lstatSync(c_path);
// TODO 关键
if(stat && stat.isDirectory()){
// .. 省略过滤文件夹的操做
getCurrenAllFile(c_path);
}
}else{
// .. 省略过滤文件夹的操做
getCurrentFile(c_path, item);
}
});
});
return fileArr;
}
复制代码
- 核心方法
getCurrentFile()
读取每一个文件的内容，而后再使用 searchCurrentFile() 方法去检索咱们要搜索的关键词。
/** * 获取当前文件内容 * @param {string} paths 文件的路径 * @param {string} filename 文件名 */
var getCurrentFile = function(paths, filename){
fs.readFile(paths, 'utf8', function(err, data){
// ... 省略部分
if (err) console.log(err);
searchCurrentFile(data, paths);
});
};
复制代码
- 核心方法
searchCurrentFile()
这里遍历咱们定义的 classArray 数组，这是包含咱们所须要检索的全部关键词，若是检索结果为 true 则将结果保存到 resultArray 数组和 resultAlassify 数组。
/** * 检索当前文件内容 * @param {object} data 文件的内容 * @param {string} paths 文件的路径 */
var searchCurrentFile = function(data, paths){
_.forEach(classArray, function(val){
// ... 省略部分
if(data.indexOf(val) >= 0){
resultArray.push(paths);
resultAlassify[val].push(paths); // 保存最终结果（当前关键词下的对象）
}
}
};
复制代码
2.2处理搜索结果
目的： 将获取到的数据，去重，格式化并保存成JSON，做为可视化的数据源。 这里有定义两个简单方法 unique() 用于数据去重，和 setEachDirFileNum() 统计文件数量，不作具体介绍。
这里咱们使用 saveDataToJson() 将数据整理成 JSON 格式，并使用 setJSONFile() 方法，将JSON数据保存为 json 文件，用于可视化操做。
- 核心方法
saveDataToJson()
这一步主要只用 loadsh 的分组函数 _.ground 来处理 JSON 数据，咱们须要的格式是：
result = {
template: [
home:[ {}, {} ],
my: [ {}, {} ]
// ...
],
view: [
// ...
]
}
复制代码
而后还须要处理成保存 Excel 时所须要的格式，再使用 setJSONFile() 方法保存 JSON 文件。
/** * 转成JSON数据，用来数据可视化 * @param {*} data 须要处理的数据 */
var saveDataToJson = function (data){
var result = {};
// 第一层分组 外层文件夹
result = _.groupBy(data, function(item){
item = item.replace(filePath+'\\','');
var list = item.split('\\');
return list[0];
});
// 第二层分组 内层文件夹
for(var k in result){
result[k] = _.groupBy(result[k], function(i){
i = i.replace(filePath+'\\','');
var r = i.split('\\');
return r[1];
});
}
for(var i in result){
for(var m in result[i]){
for(var n in result[i][m]){
var currentPath = result[i][m][n].replace(filePath+'\\','');
currentPath = currentPath.replace(/\\/g, '/');
var current = excelFileObj[currentPath];
result[i][m][n] = {
title : current ? current['路由名称'] : '该文件为模块',
path : current ? current['文件路径'] : currentPath,
url : current ? current['url'] : '该文件为模块',
params: current ? current['路由参数'] : '该文件为模块',
ctrl : current ? current['控制器名称'] : '该文件为模块',
urls : current ? current['url'] : '该文件为模块',
};
}
}
}
setJSONFile(result); // 保存JSON文件
};
复制代码
2.3加入文件标题路由等数据
目的： 解析外部路由Excel表，合并到原有数据
- 核心方法
getExcelFile()
读取 Excel 数据并经过resolve返回。
/** * 读取Excel数据 */
var getExcelFile = function(){
return new Promise(function(resolve, reject){
var excelPath = path.join(__dirname, excelReadName);
fs.exists(excelPath, function(exists){
if(exists){
var workbook = XLSX.readFile(excelPath, {type: 'base64'});// 获取 Excel 中全部表名
var sheetNames = workbook.SheetNames;
resolve({workbook: workbook, sheetNames: sheetNames});
}else{
reject({message:'错误提示：请先获取路由列表文件！（执行node get_router.js）'});
}
});
})
};
复制代码
- 核心方法
getEachSheet()
这里咱们须要将 Excel 中的每一个表的数据，都保存到 excelFileObj 中，另外须要注意，咱们项目的 lodash 不能使用 4.0.0 以上版本的API。
/** * 解析Excel数据 * @param {object} workbook excel工做区数据 * @param {object} sheetNames excel工做表名数据 */
var getEachSheet = function(workbook, sheetNames){
_.forEach(sheetNames,function(item,index){
var sheet = workbook.Sheets[sheetNames[index]];
var json = XLSX.utils.sheet_to_json(sheet); // 针对单个表，返回序列化json数据
excelFileArr = excelFileArr.concat(json); // 不能使用lodash的_.concat 由于lodash版本过低
})
_.forEach(excelFileArr, function(val, key){
excelFileObj[val['文件路径']] = val;
});
}
复制代码
2.4生成结果文件
目的： 将处理后的结果生成对应的 Excel/JSON/TXT 文件：
这里生成 JSON/TXT 文件不作介绍，使用的是 Nodejs 内置的文件存储方法fs.write
- 核心方法
setExcelFile()
主要是整理数据为保存 Excel 的数据格式。
/** * 保存Excel数据 * @param {object} data 须要处理的数据 * return excelFileName.xlsx */
var setExcelFile = function(data){
var workbook = new Excel.Workbook();
workbook.creator = 'EXE';
workbook.lastModifiedBy = 'Leo';
workbook.created = new Date();
workbook.modified = new Date();
workbook.lastPrinted = new Date();
for(var item in data){ // 第一层循环 外层文件夹 templates views
for(var list in data[item]){
var worksheet = workbook.addWorksheet(list.toUpperCase()),
rowData = data[item][list];
worksheet.columns = [
{ header: '页面标题' , key: 'title' , width: 40 },
{ header: '文件路径' , key: 'path' , width: 60 },
{ header: '路由地址' , key: 'url' , width: 40 },
{ header: '路由参数' , key: 'params', width: 40 },
{ header: '控制器名称', key: 'ctrl' , width: 40 },
{ header: 'url' , key: 'urls' , width: 40 },
];
for(var row in rowData){
worksheet.addRow({
title : rowData[row].title,
path : rowData[row].path,
url : rowData[row].url,
params: rowData[row].params,
ctrl : rowData[row].ctrl,
urls : rowData[row].urls,
})
}
}
}
workbook.xlsx.writeFile(path.join(__dirname, excelFileName)).then(function() {
// ... 省略部分
});
};
复制代码
到这里咱们 Nodejs 程序开发完成，咱们最后会有一个文件 search_current_file_json.json 做为 Python 部分的数据源。
3.Python开发部分
Python 部分的内容相对比较简单，作的只有 加载数据，简单处理数据和可视化操做 三部分。
一样在刚开始部分，将几个重要的定义写一下：
# ... 省略一些
import matplotlib.pyplot as plt
keyName = [] # 须要显示的分类图表（按外层文件夹）
selectName = '' # 用户选择的文件夹名称
复制代码
2.1读取数据源
咱们经过使用 python 内置的 open 方法来读取文件，并导入内置方法 json 来读取前面 Nodejs 部分生成的 search_current_file_json.json 文件。
file = open('./search_current_file_json.json','r', encoding='utf-8')
file = json.load(file)
复制代码
2.2设置命令行输入项
设置命令行输入项的目的是：让用户经过输入要查看的文件夹名称，来展现对应文件夹的饼图，默认显示全部文件夹饼图。
在设置以前，咱们须要先经过 getKeyName() 方法获取到全部第一层文件夹的名称：
def getKeyName():
for name in file:
keyName.append(name)
复制代码
而后才能设置命令行输入项：
getKeyName()
select = ','.join(keyName)
selectName = input('检索到的文件夹有：【' + select + '】，请输入要查看的文件夹名称（默认全部）：')
复制代码
2.3绘制单张饼图
接下来绘制单张饼图，这里主要就是设置饼图的参数：
- 核心方法
drawOneChart()
def drawOneChart(name, label, data):
plt_title = name
plt.figure(figsize=(6,9)) # 调节图形大小
labels = label # 定义标签
sizes = data # 每块值
colors = [ # 每块颜色定义 这里省略掉
#...
]
explode = [] # 将某一块分割出来，值越大分割出的间隙越大
max_data = max(sizes)
for i in sizes: # 初始化每块之间间距，最大值分割出来
if i == max_data:
explode.append(0.2)
else:
explode.append(0)
patches,text1,text2 = plt.pie(
sizes, explode = explode, labels = labels, colors = colors,
autopct = lambda pct: pctName(pct, data), # 数值保留固定小数位
frame = 1, # 是否显示饼图的图框，这里设置显示
shadow = True, # 无阴影设置
labeldistance = 1.1, # 图例距圆心半径倍距离
counterclock = False, # 是否让饼图按逆时针顺序呈现；
startangle = 90, # 逆时针起始角度设置
pctdistance = 0.6 # 数值距圆心半径倍数距离
)
plt.xticks(())
plt.yticks(())
plt.axis('equal')
plt.legend()
plt.title(plt_title+'文件夹下文件分布（顺时针）', bbox={'facecolor':'0.8', 'pad':5})
plt.savefig(plt_title+'_'+saveImgName) # 必定放在plt.show()以前
plt.show()
复制代码
2.4绘制多张饼图
最后经过循环调用 drawOneChart() 来生成全部的饼图：
- 核心方法
drawAllChart()
这个方法中须要对以前 JSON 数据再处理，将每一个文件夹中文件数量做为饼图的数据，也就是这里的 values 的值。
def drawAllChart(openName):
for name in keyName:
labels = []
values = []
for view_name in file[name]:
labels.append(view_name)
values.append(len(file[name][view_name]))
if openName == '' or openName == name:
drawOneChart(name, labels, values)
else:
print('输入有误')
复制代码
4、总结
1.Nodejs知识点
这部分用得比较多的是 Nodejs 中的：
- 文件读/写操做
- 正则匹配操做
- 数据格式处理操做
所以为了之后开发相似或者其余类型工具，仍是须要增强这三方面的知识，这部分的代码可能不够简洁，代码也不够美观，但毕竟做为本身的经验积累，对这类工具开发会有更加清晰的思路。
2.Python知识点
这部分用得比较多的，实际上是 Python 中的一些基础语法，这部分代码，其实也是加深本身对 Python 基础语法的使用和理解，练习操做。
3.拓展
接下来会找时间，优化项目代码，而后改造这个项目，将使用 Nodejs 和 Python 分别单独开发一套，并比较二者差距（执行效率/代码量）。 另外 Nodejs 的绘图库还有： node-echarts 和 d3-node。