Introduction: In the use of UI framework, always not the CURIOSITY of UI framework, a good UI framework can always let people use handy, in this respect framework developers

1. Locate the source code

import {Tabs,Tab} from 'vant'
import 'vant/lib/index.less'
Copy the code

This is the most familiar import on demand code step, so import is automatically resolved to [email protected]@vant’s es folder in node_modules, so focus on tabs and tabs

2. Organize the tabs structure

In the tabs index.js, you can see the following code:

Two important functions are shown here: createComponent and bem

1.createComponent

Action: Creates a syntactically specific component for a Vant

function install(Vue) { var name = this.name; Vue.component(name, this); Vue.component(camelize("-" + name), this); } export function createComponent(name) { return function (sfc) { if (isFunction(sfc)) { sfc = transformFunctionComponent(sfc); } if (! sfc.functional) { sfc.mixins = sfc.mixins || []; sfc.mixins.push(SlotsMixin); } sfc.name = name; sfc.install = install; // Install is the key return SFC for vant to import on demand; }; }Copy the code

2.bem

What it does: Generates a specific class name for vant. Note the green part. The comments are clear, so you don’t need to worry too much about the implementation, just what is passed in to generate

3. The render function

In tabs -> index.js, we can clearly see that instead of using the

Render function: render function

“Vue recommends using templates to create your HTML in most cases. However, in some scenarios, you really need the full programming power of JavaScript. You can use it at this pointRendering functionWhich is closer to the compiler than the template.”

The render function performs better than the

Before getting to know the Vue render function, I highly recommend reading the document “Renderers” to give you a deeper understanding of the design and implementation of Vue renderers. (Thank god for his hard work)

Next, go directly to the createElement parameter in the official documentation and have a look at the render code in tabs.

【 digression: at first glance, I handsome words directly, this is too much, too complicated… but, I have never been a person who easily give up, then continue to study! Of course I don’t recommend direct look, my train of thought from the actual rendering of the DOM, bit by bit to understand its generating process.”

3. Tabs DOM structure

<van-tabs V-model ="active"> <van-tab title=" TAB 1"> Content 1</van-tab> <van-tab title=" TAB 2"> Content 2</van-tab> <van-tab title=" tag </van-tab> <van-tab title=" tabs "</van-tab>Copy the code

The generated DOM structure is as follows:

The tabs render Dom structure is divided into two large Dom sections, wrap and content, which correspond to the navigation area (title bound to the TAB) and content area respectively, and are then wrapped by a large div.

1. The generation process of wrap

In wrap, we can see that the outermost DOM is van-tabs__nav, so let’s see how this DOM is generated in render.

If you’ve studied the previous documentation, you know that the h function is used to generate a VNode, equivalent to the createElement function, as shown in the figure below, and that the Nav is created by traversing children, We then assign the bound property in children to Title. So the question is, what type is Title?

Tracking through the introduced title.js, it is not difficult to find:

Title is a component!

So finally, what this Nav represents, is the navigation bar that we want, which is the title value that we’re binding to on the ant-tab. As you can see, it will eventually be wrapped in a wrap.

2. Content generation process

In fact, if you can understand the generation process of wrap, the same is true for Content, which is easy to see through the introduction of Content.js

Content is also a component, but the DOM it renders is just

You have to think, where did it go? Remember, the title is called [Tabs DOM structure], and the rest of the content is rendered in TAB -> index.js

4.mixins

In the source code, I found that Vant uses a lot of mixins, in the previous single-file component development, BUT I rarely use them, which aroused my curiosity, so I first read the official document -> Vue mix

In Content.js, you can see that Vant uses TouchMixin

Find TouchMixin as follows:

You can see that Vant has defined common sliding functions in this mixin, which dramatically improves reusability. Can not help but trigger a thought: in the past when I was encapsulating functions, I would consider using a large number of JS files to encapsulate, once more, it will become difficult to maintain. When you need to call multiple functions on a single page, you can actually put these generic functions into mixins. With mixins, it is actually more convenient

5. To summarize

Anyone can make a TAB, but it takes a lot of work to make a UI framework as reusable as it is, and to define an API that is user-friendly. Predecessors plant trees, I enjoy the shade, but also want to see how predecessors “plant trees” ~