专题背景
近几年随着开源在国内的蓬勃发展，一些高校也开始探索让开源走进校园，让同学们在学生时期就感受到开源的魅力，这也是高校和国内的头部互联网企业共同尝试的全新教学模式。本专题会记录这段时间内学生们的学习成果。
更多专题背景参考:【DoKit&北大专题】缘起
系列文章
【DoKit&北大专题】-实现DoKit For Web请求捕获工具（一）产品调研
【DoKit&北大专题】-DoKit For 小程序源码分析
【DoKit&北大专题】-浅谈滴滴DoKit业务代码零侵入思想（小程序端）
【DoKit&北大专题】-滴滴DoKit For Web模块源码阅读
【DoKit&北大专题】-滴滴DoKit For Web模块源码阅读（二）
原文
前序
本学期我们学院开设了开源软件开发基础及实践这门课程,我加入了滴滴团队的DoKit开源项目,并选择了DoKit For Web方向,本文是DoKit For Web源码阅读的简单记录。
一、DoKit项目概述
DoKit诞生于滴滴城运服体验技术部,是一款面向泛前端产品研发全生命周期的效率平台。经过两年的发展,当前DoKit已经发展成了一个相对完整的生态,比如DoKit For Android、DoKit For iOS、DoKit For 小程序、DoKit For Flutter、DoKit For Web。同时我们的项目被BAT以及滴滴、字节、快手、京东等等头部独角兽企业广泛使用并获得良好的口碑。随着dokit.cn平台端的推出,标志着DoKit已经从单纯的效率工具正式进入了效率工具平台的阶段。与此同时我们一直都未停下持续探索的精神,积极地在更多平台领域进行尝试,不给自己设限。我们相信DoKit的未来充满无限可能。
二、DoKit for Web模块介绍
| 功能名称 | 基础功能 | 进阶功能 |
|---|---|---|
| 日志 | 支持所有的console方法;支持日志的筛选和清除;支持执行简易的javascript命令 | 打通平台侧的日志查看,支持查看多个设备 |
| 接口抓取 | 支持抓取常用的接口类型xhr和fetch;展示请求的详细内容;展示响应的详细内容 | 支持拦截请求,修改数据(平台端进行修改);支持根据请求,快捷添加 Mock 接口 (和平台侧打通) |
| 视图元素查看 | 展示整个页面的 Dom树:支持展开、关闭、选择(高亮元素);支持查看特定元素的内容:查看元素的样式、查看元素的盒模型 | 支持切换模式查看元素:考虑移动端的交互,点击区域不宜过小 |
| 资源查看 | 展示javascript资源;展示css资源;展示image等媒体资源 | |
| 应用存储 | 支持查看并修改LocalStorage;支持查看并修改SessionStorage;支持查看Cookie | |
| 接口Mock | 支持无侵入式一键Mock;支持自动同步真实请求数据到平台侧,并与快速创建 |
三、DoKit For Web代码阅读
DoKit For Web展示:
DoKit For Web的整体代码结构:
其主程序为playground目录下的index.html文件,目前其内容比较简洁,除了DoKit For Web和Playground外,只引用了web/dist/dokit.js。
<body>
<h1>Dokit For Web</h1>
<h2>Playground</h2>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script src="../packages/web/dist/dokit.js"></script>
</html>
web文件夹位于packages目录中,packages包括三个部分:core、utils和web。根据每个文件夹的README.md,core负责提供容器,供Dokit Web定制化能力;utils封装了一些工具类;web中主要包括应用接口,其下的index.js引用了同目录下的feature.js,该文件主要的作用是在web页面上的ui界面:
同时,feature.js引用了plugins文件夹下的console、app-info和demo-plugin文件,同时还引用了components文件夹下的ToolHelloWorld。console文件主要决定常用工具中的日志,其代码为:
export default new RouterPlugin({
name: 'console',
nameZh: '日志',
component: Console,
icon: 'https://pt-starimg.didistatic.com/static/starimg/img/PbNXVyzTbq1618997544543.png',
onLoad(){
console.log('Load')
overrideConsole(({name, type, value}) => {
let state = getGlobalData();
state.logList = state.logList || [];
state.logList.push({
type: type,
name: name,
value: value
});
});
},
onUnload(){
restoreConsole()
}
})
引用了js文件夹下的console.js,定义了日志下的功能:
onLoad和onUnload函数定义了日志下的数据的读取和删除。
app-info文件决定了常用工具中的应用信息,其代码为:
export default new RouterPlugin({
nameZh: '应用信息',
name: 'app-info',
icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png',
component: AppInfo
})
引用了ToolAppInfo文件,定义了PageInfo和DeviceInfo:
ToolAppInfo文件引用了common文件夹下的Card.vue,其代码为:
<template>
<div class="dokit-card">
<div class="dokit-card__header">{{title}}</div>
<div class="dokit-card__body">
<slot/>
</div>
</div>
</template>
<script>
export default {
props: {
title: String
}
}
</script>
demo-plugin文件决定了常用工具的测试,其代码为:
export default new RouterPlugin({
nameZh: '测试',
name: 'test',
icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png',
component: HelloWorld
})
目前内容先由ToolHelloWorld代替。
ToolHelloWorld文件的代码为:
<template>
<div class="hello-world">
<div style="font-weight:bold;font-size:30px;font-style:italic;">Hello Dokit</div>
<div>Demo Plugin</div>
</div>
</template>
其应用于feature的其他部分,效果为:
四、总结
根据以上的源码阅读,我了解了Web部分的结构。以及每个部分的具体功能,并从实践的角度进行了验证,在今后的时间,我将对代码进行改动,进一步了解Web部分的结构功能。
作者信息
作者：雨落街角
来源：掘金
