Before the order

This semester, our college opened the course of Foundation and Practice of Open source software development. I joined the DoKit open source project of Didi team and chose the direction of DoKit For Web. This article is a brief record of reading the source code of DoKit For Web.

I. DoKit Project Overview

DoKit, born in didi City Transportation Service Experience Technology Department, is an efficiency platform for the whole life cycle of pan-front-end product development. After two years of development, DoKit has developed into a relatively complete ecosystem, such as DoKit For Android, DoKit For iOS, DoKit For applets, DoKit For Flutter, DoKit For Web. At the same time, our project has been widely used by BAT, Didi, Byte, Kuaishou, JINGdong and other head unicorn enterprises and has won a good reputation. With the launch of dokit.cn platform, DoKit has officially entered the stage of efficiency tool platform from simple efficiency tool. At the same time, we have never stopped exploring, actively experimenting in more platform areas, without limiting ourselves. We believe that the future of DoKit is full of possibilities.

DoKit for Web module introduction

The name of the function Basis function Advanced features
The log Support allconsoleMethods; Support log filtering and clearing; Support for simple executionjavascriptThe command Enables you to view logs on multiple devices
Interface to grab Supports fetching common interface typesxhrandfetch; Display the details of the request; Displays the details of the response Support interception request, modify data (modify platform); Support quick Mock interface addition on request (platform side connection)
View element View Display the Dom tree of the entire page: expand, close, select (highlight elements); Support for viewing the content of a specific element: view the style of the element, view the box model of the element Support switching mode view elements: considering mobile terminal interaction, the click area should not be too small
Resource view showjavascriptResources; showcssResources; showimageAnd other media resources
Application of storage You can view and modify informationLocalStorage; You can view and modify informationSessionStorage; Support the viewCookie
Interface Mock Support for non-intrusive one-click mocks; Support automatic synchronization of real request data to platform side and with fast creation

DoKit For Web code reading

DoKit For Web Showcase:

The overall code structure of DoKit For Web:

Its main program is the index.html file under playground directory. Currently, its content is relatively simple. Besides DoKit For Web and playground, it only references 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>Copy the code

The Web folder is located in the Packages directory, which includes three sections: Core, utils, and Web. According to the readme. md for each folder, Core is responsible for providing containers for Dokit Web customization capabilities; Utils encapsulates some utility classes; The web mainly includes application interfaces, and the index.js file under it references feature.js in the same directory, which is mainly used for UI interface on the Web page:

At the same time, feature.js references console, app-info, and Demo-plugin files in the plugins folder, and ToolHelloWorld in the Components folder. The console file determines the logs in common tools. The code reads:

Export default new RouterPlugin({name: 'console', nameZh: 'log ', 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() } })Copy the code

Console. js is referenced in the js folder to define the logging function:

The onLoad and onUnload functions define the reads and deletions of data from a log.

The app-info file determines the application information in common tools. The code is:

Export default new RouterPlugin({nameZh: 'app-info', name: 'app-info', icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png', component: AppInfo })Copy the code

The ToolAppInfo file is referenced and PageInfo and DeviceInfo are defined:

The ToolAppInfo file references card.vue in the common folder and has the following code:

<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>
Copy the code

The demo-plugin file, which determines tests for common tools, has the following code:

Export default new RouterPlugin({nameZh: 'test', name: 'test', icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png', component: HelloWorld })Copy the code

The current content is replaced by ToolHelloWorld.

The code for the ToolHelloWorld file is:

<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>Copy the code

When applied to other parts of feature, the effect is:

Four,

Based on the above source code reading, I understand the structure of the Web part. And the specific functions of each part, and verified from the perspective of practice. In the future, I will make changes to the code to further understand the structure and functions of the Web part.