一个小兄弟，想做Web Component，我正好也有空，就答应带他研究，奈何我本人比较懒，总摸鱼，我一摸鱼，他就督促我，也对亏这位老弟的督促，在几天内就实现了，效率惊人。

设计前端组件是最能考验开发者基本功的测试之一,因为调用Material design、Antd、iView 等现成组件库的 API 每个人都可以做到,但是很多人并不知道很多常用组件的设计原理。 我们在学习设计模式的时候会遇到很多种设计原则,其中一个设计原则就是单一职责原则,在组…

前几个月写的一篇文章，还没在掘金发过。 平时在使用 antd、element 等组件库的时候，都会使用到一个 Babel 插件：babel-plugin-import，这篇文章通过例子和分析源码简单说一下这个插件做了一些什么事情，并且实现一个最小可用版本。 antd 和 ele…

最近码良迎来了一波新功能的上线，并毫无保留地继续进行了代码开源。新上线的功能有桌面端页面制作、”楼层模式“、”正宗“布局组件（容器组件）的开发能力、组件封装、word 文档解析、psd 解析等平台功能和能力。 本文将为您详细介绍组件封装。 组件封装就是对具有上下层级关系的组件进…

组件不多，但在搭建过程中掌握了很多知识，再看 antd 等热门组件库，对其中的一些设计也有了更深的感悟，故记录下来，希望能帮助到其他的同学。

1. 库/框架选型 2. 简单构建优化 3. JS/CSS模块化开发 4. 组件化开发（本文重点） 1. Vue.js采用了JSON的方法描述一个组件 2. React.js发明了JSX，把CSS和HTML都塞进JS文件里 不要把分离容器组件和展示组件当做教条，如果你不确定该组…

这篇文章主要是总结一下我们在工作中如何为公司开发内部的第三方UI组件，并通过npm install的方式安装的一些步骤和思路。在学习完这套发布方法后大家也可以快速的发布自己的UI库到npm，供他人使用，就比如elementUI或者Ant Design。 此时我们就可以用npm …

目前主流的前端框架vue和react都采用rollup来打包，为了探索rollup的奥妙，接下来就让我们一步步来探索，并基于rollup搭建一个库打包脚手架，来发布自己的库和组件。 写rollup的文章是因为笔者最近要规范前端开发的业务流程和架构，并提供内部公有组件库和工具库供…

目前按需加载有两种方式实现。 babel-plugin-import是ant-design团队出的一个babel插件，主要用于模块的按需加载。其原理就是将直接引入的方式通过babel转化成按需引入的方式。如果css也需要按需加载，也会注入css引用代码。 babel-plugi…