kpc 支持 Intact/Vue/React 的前端组件库开源项目

我要开发同款
匿名用户2018年12月14日
90阅读
开发技术JavaScript
所属分类Web应用开发、网页组件
授权协议MIT

作品详情

动机

目前市面上已经存在大量组件库,我们为什么还要造这个轮子呢?下面我们解释下这个组件库开发的动机。

随着公司业务和团队的壮大,我们很难统一全公司的技术栈,或者也没有必要统一全公司技术栈。众所周知,前端单页应用的开发无非基于3大框架:React/Vue/Angular。如果不同框架维护一套自己的组件库,一方面维护成本非常高,存在大量重复劳动力;另一方面,即使大家都按统一的交互设计稿开发组件库,也很难保证各个组件库交互和设计的完全统一。所以这时kpc应运而生,它存在的意义就是:同一套组件库适应不同框架(Writeonce,runanywhere)

特性

支持多框架 Intact / Vue / React

完全可自定义的主题系统

360°全方位定位系统

声明式表单验证

完善的文档和单元测试 文档

安装在Intact下npminstallintactkpc--save在Vue下npminstallkpcintactintact-vue--save

webpack配置

module.exports={...resolve:{alias:{'intact$':'intact-vue',}}}在React下npminstallkpcintactintact-react--save

webpack配置

module.exports={...resolve:{alias:{'intact$':'intact-react',}}}使用在Intact下import{Button}from'kpc';Hello在Vue下Helloimport{Button}from'kpc';exportdefault{components:{Button}}在React下importReactfrom'react';import{Button}from'kpc';classAppextendsReact.Component{render(){returnHello}}链接

官方文档

IntactMVVM框架

Vdt模板引擎

Intact-Vue兼容层

Intact-React兼容层

常见问题1.使用兼容层来兼容不同的框架,是否有性能损失?

性能损失非常小,因为兼容层并不会出来太多的东西,仅仅只是完成不同框架执行上下文的切换,唯一带来的损失可能是框架需要引入兼容层和Intact底层库所带来的打包文件的增大,但只是增大了大概80KB(没有开启gzip)的体积,相比目前前端项目动辄几M的打包文件,增大的并不多

2.兼容层能实现100%的兼容吗?

如上所述,兼容层仅仅完成上下文的切换,本质上还是谁的元素谁去渲染,所以理论上能实现100%的兼容,但目前考虑到实际使用情况并没有实现100%兼容,有些注意事项已在文档中说明,如果有需求后面我们会逐步完善来达到100%兼容性

开发gitclonehttps://github.com/ksc-fe/kpc.gitcdkpcnpminstallnpmrundev:doc#测试npmruntest#更新测试快照npmrunsnapshot#部署文档npmrundeploy:doc#发版npmrunrelease
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论