归档: 2018

Menu

antd 中的 Menu 组件用于绘制菜单栏,其实现基于 rc-menu。本文第一部分介绍菜单栏实现的整体结构;第二部分介绍 rc-menu;第三部分介绍 Menu 组件。 需要声明的是,本文使用 RcMenu 指代 rc-menu 输出的 Menu 组件或其实例,使用 Menu 指代 antd 输出的 Menu 组件或其实例、或抽象意义的菜单栏组件,余同。 整体结构在视图上,菜单栏分为水平布局和

Radio, Checkbox

antd 中的 Radio, Checkbox 组件均基于 rc-checkbox 实现。本文第一部分将介绍 rc-checkbox,余下两部分再介绍 Radio, Checkbox 组件。 rc-checkboxrc-checkbox 输出 Checkbox 组件。其处理逻辑较为简单,包含样式类转换、多余 props 剔除等。元素层级上,rc-checkbox 使用 span 包裹 input

Grid 栅格

antd 提供的 24 栅格系统由 Row, Col 组件实现。 Row栅格布局组件 Row 用于设定整行 row 内各组 col 的布局风格。当 props.type 为 ‘flex’ 时,意味着整行采用 flex 布局。在 flex 布局的基础上,props.justify 通过 justify-content 样式影响各 col 元素的水平排列方式;props.align 通过 align-

Layout 布局

antd 提供 Layout, Header, Sider, Content, Footer 组件用于划定页面布局。实现上,侧边栏 Sider 组件比较特殊,将在第一部分加以介绍;其余组件均将在第一部分加以介绍。 Layout布局容器 Layout, 顶部布局 Header, 内容部分 Content, 底部布局 Footer 在实现上大体相当:都是通过 generator(props) = Ba

less 使用指南

前言这篇文章本不打算发布在知乎平台。但是在汇总笔者所不常用的 less 语法时,笔者又小小费了点脑筋,推想了一下 less 的实现(这样有助于从更高的维度去看待很多功能实现)。因此,笔者就希望能在一个更开阔的平台上得到一些回馈和纠错性意见。之所以要汇总 less 语法,那是因为要推究网页、组件库改变样式主题的实现。 导入12@import "library"; // library.less@im

antd-Input 组件

Input 组件Input 组件只关乎布局,其余均为常规处理。props.addonBefore 为前置标签,props.addonAfter 为后置标签,props.prefix 前缀图标,props.suffix 后缀图标。参看官方图例: Input 组件在 render 方法执行阶段将绘制出 input 原生组件。鉴于 react 的实现机制,对于 input 原生组件的处理,有受控组件和

http-proxy-middleware 源码解读

概述http-proxy-middleware 库借助于 node-http-proxy,用于将 node 服务器接收到的请求转发到目标服务器,实现代理服务器的功能。 实现原理可以推想,使用 node-http-proxy 创建代理服务器 proxyServer 后,通过全局注册的转发规则获取到客户端请求 req 需要发送到的目标地址,再通过调用 proxyServer.web, proxySer

node-http-proxy 源码解读

概述node-http-proxy 模块用于转发 http 请求,其实现的大致原理为使用 http 或 https 模块搭建 node 代理服务器,将客户端发送的请求数据转发到目标服务器,再将响应输送到客户端。 实现整体流程同 koa 的中间件机制相仿,node-http-proxy 模块内部组装任务队列,在请求转发的过程中,将任务队列中的处理函数逐个执行。处理函数的意义通常是封装消息头,当然,最

代理模式

概述代理模式(proxy pattern) 的主要处理逻辑为,构建代理对象以桥接对实际对象的访问。因此,可以在访问过程中构建附加的间接性操作如请求处理、权限校验、内务处理(housekeeping task)等,也可以为多种实际对象提供统一的接口。 《设计模式:可复用面向对象软件的基础》中的说法是: Provide a surrogate or placeholder for another ob