antd源码解读（1）-index.js

zeyu 发布于2019-08-21 16:58 / 3125人阅读

github: 地址
gitbook: 地址

Index.js

看一个代码的时候首先当然是从他的入口文件开始看起，所以第一份代码我们看的是/index.js文件

开始

打开index.js文件，代码只有28行，其中包含了一个camelCase函数（看函数名就知道这是个给名称进行驼峰命名法的函数），一个req变量，以及这个的变量操作和export操作

在这个文件里面我首先查了require.context()这个函数的使用，可以参考这里，以及exports和module.exports的区别，可以参考这里，这里是一些铺垫，下面进入正题

通过上面两个铺垫，我们知道了req这个变量是用来循环抛出组件的一个对象，并且还抛出了每一个组件的样式文件

  // index.js
  function camelCase(name) {
    return name.charAt(0).toUpperCase() +
      name.slice(1).replace(/-(w)/g, (m, n) => {
        return n.toUpperCase();
      });
  }

  // 抛出样式 这个正则是匹配当前目录下的所有的/style/index.tsx文件
  const req = require.context("./components", true, /^./[^_][w-]+/style/index.tsx?$/);

  req.keys().forEach((mod) => {
    let v = req(mod);
    if (v && v.default) {
      v = v.default;
    }
    // 抛出组件 这个正则是匹配当前目录下的素有index.tsx文件
    const match = mod.match(/^./([^_][w-]+)/index.tsx?$/);
    if (match && match[1]) {
      if (match[1] === "message" || match[1] === "notification") {
        // message & notification should not be capitalized
        exports[match[1]] = v;
      } else {
        exports[camelCase(match[1])] = v;
      }
    }
  });

  module.exports = require("./components");

但是最后不知道为甚还需要加上对吼那一句module.exports = require("./components");
既然上面都已经抛出，为什么这里还需要再次抛出，不过好像是跟什么环境和打包之后的一些操作有关，所以这里一两次抛出。这个地方还需要向大家请教。

GPU云服务器云服务器源码解读 webrtc源码解读 webrtc fec源码解读 js v8源码解读

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88981.html

antd源码解读（二）Tooltip组件解析

摘要：结构项目结构如下，负责外层封装，负责事件绑定与渲染控制。节点通过决定事件绑定情况，即通过属性绑定事件情况，事件控制组件的属性，这里就不详细说了。为隐藏状态下的添加的，并包裹懒加载组件。引言 antd的Tooltip组件在react-componment/trigger的基础上进行封装，而组件Popover和Popconfirm是使用Tooltip组件的进行pop，在react-com...

fanux 2019-08-26 11:52 评论0 收藏0
antd源码解读（2）- Icon

摘要：作为开发当中使用相对频繁的一个组件，其实现也很简单，但是其中比较麻烦的一部分是字体的制作，可以参看这篇文章。接口中的种属性方法，不属于上述六种。为事件属性，可以大家也可以根据上面所提供的制作的方法和这样的方式来实现自己的组件 Icon icon作为开发当中使用相对频繁的一个组件，其实现也很简单，但是其中比较麻烦的一部分是icon字体的制作，可以参看这篇文章。 Antd的Icon组件使用...

fjcgreat 2019-08-21 17:00 评论0 收藏0
antd源码解读（6）- Affix

摘要：这个组件是一个图钉组件，使用的布局，让组件固定在窗口的某一个位置上，并且可以在到达指定位置的时候才去固定。 Affix 这个组件是一个图钉组件，使用的fixed布局，让组件固定在窗口的某一个位置上，并且可以在到达指定位置的时候才去固定。 AffixProps 还是老样子，看一个组件首先我们先来看看他可以传入什么参数 // Affix export interface Affix...

coordinate35 2019-08-21 17:09 评论0 收藏0
antd源码解读（3）- Button

Button Button包括了两个组件，Button与ButtonGroup。 ButtonProps 看一个组件首先看的是他的传参也就是props，所以我们这里先看Button组件的ButtonProps export type ButtonType = primary | ghost | dashed | danger; export type ButtonShape = circl...

miguel.jiang 2019-08-21 17:00 评论0 收藏0
antd源码解析（一）Form组件解析

摘要：引言看过源码的都知道，其实是在一组组件的基础上进行了一层封装，本文主要解读组件的基础组件，另外会略过模式下的代码。解读源码首先要从自己最常用的或者感兴趣的入手，首先组件最主要的还是在这个装饰器入手。引言看过antd源码的都知道，antd其实是在一组react-componment组件的基础上进行了一层ui封装，本文主要解读antd组件Form的基础组件react-componmen...

timger 2019-08-22 16:27 评论0 收藏0