<strike id="qaeg2"></strike>

<strike id="qaeg2"></strike>

<abbr id="qaeg2"></abbr>

antd源碼解讀（1）-index.js

zeyu 發布于2019-08-21 16:58 / 3160人閱讀

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源碼解讀

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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