博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
antd源码解读(1)-index.js
阅读量:5942 次
发布时间:2019-06-19

本文共 1257 字,大约阅读时间需要 4 分钟。

github:

gitbook:

Index.js

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

开始

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

在这个文件里面我首先查了require.context()这个函数的使用,可以参考,以及exportsmodule.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');

既然上面都已经抛出,为什么这里还需要再次抛出,不过好像是跟什么环境和打包之后的一些操作有关,所以这里一两次抛出。这个地方还需要向大家请教。

转载地址:http://wfqtx.baihongyu.com/

你可能感兴趣的文章
Mac最好用的文献管理软件EndNote X9
查看>>
Oracle 重做日志简介
查看>>
Oracle可以处理LOB字段的常用字符函数
查看>>
Oracle RMAN 还原与恢复(一)--还原服务器参数文件
查看>>
linux 下修改日期和时间
查看>>
CentOS安装tomcat
查看>>
[Java] HashMap 源码简要分析
查看>>
PIE SDK影像快速拼接
查看>>
F5 Priority Group Activation
查看>>
我的友情链接
查看>>
用户和用户组的简单总结
查看>>
无线路由器的天线增益骗局及危害
查看>>
TestNG并行测试
查看>>
我的友情链接
查看>>
虚拟机中LINUX系统的安装
查看>>
苏勇老师写的CCIE详解
查看>>
/dev/tty /dev/ttyS0 /dev/tty0区别
查看>>
管理Vim插件的插件——Vundle
查看>>
负载均衡集群LVS模式之DR模型
查看>>
MAP安装使用指南
查看>>