关键词：
作者 个推高级前端开发工程师沈创
目前前端项目大多基于Vue、React、Angular等框架来实现，这一类框架都有一个明显的特点：基于模块化以及组件化思维。所以，开发者在使用上述框架时，实际上是在写一个一个的组件，并且组件与组件之间呈嵌套的形式。当一个项目中多次出现同一功能时，他们会选择将其提取出来，并且放到components文件夹中，以达到复用的目的，但是这些复用都是基于同一项目的，所以，当写另一个项目时，又要开始写一些重复的代码。
个推拥有多条业务线，在进行前端项目时总会遇到重复写代码的困境，所以，我们做了PCMS项目，主要为了解决跨项目之间的组件复用问题，其中的技术栈是基于Vue的，所以PCMS同时也是基于Vue项目实现的。
接下来我将基于自己在前端工作过程中的实践，跟大家分享基于CMS的组件复用实践。
想要实现跨项目之间的组件复用，需要解决以下问题，
1.组件与组件之间，组件与项目之间需要解耦
2.组件需要给出使用方法（文档）
3.组件需要能够独立运行
4.组件需要有版本管理并且可以按需加载
5.需要一个工具把这些组件管理并且展示出来
在上述五大问题中，首先要解决组件与组件以及项目之间的解耦问题，为此，我们需要将组件内部和其它组件以及项目耦合的部分剔除，然后通过props传入，为了方便区分这些props与普通props，我们把他们放到了一个名为ds的对象中 。通常，这些耦合部分会是一些API或VUEX调用或者前端路由操作等。
同时， 为了方便这些组件的编写和维护，我们给组件制定了更加严格的约束，同时将这些符合约束的复用组件称为“区块”，意思是可以独立于项目的一个功能区域。
在解耦过程中，我们发现这些区块的代码可以有一些重复部分，比如ds的一些优化和mock的注册等，所以我们开发了一个vue插件。在项目使用区块时，为了完成按需加载时的引用方式以及生产环境下Mock数据的剔除，我们又开发了一个webpack插件。
在具体实践过程中，为了实现组件的复用，需要按照固定的结构去写组件，还需要在项目中修改main.js和webpack配置工作，所以，我们开发了CLI工具和GUI工具来生成项目和组件基本文件，同时管理和调试组件。
使用了区块的开发模式后，虽然开发流程与之前相比并没有太大区别，但有效提升了开发的速度，同时还能将任务拆分得更细，对于团队中的初学者来说，一个有使用文档的业务组件更加容易被他们接受，对于业务的上手速度也更快。
本文根据个推高级前端开发工程师沈创在个推TechDay全国巡回沙龙广州站的演讲内容进行整理，略有删减。
接下来，个推TechDay全国沙龙还将走进成都、杭州、上海、深圳几大城市，邀请业内技术大咖跟大家一起交流学习，敬请期待！
写出可复用代码的基本思想与实践
...拆分。具体的技术手段有：工具类；业务辅助类；业务小组件；统一机制封装；制订标准数据格式；共享库。要写出可复用的代码，基本思想是逻辑拆分。具体的技术手段有：工具类；业务辅助类；业务小组件；统一机制封装；... 查看详情
vue组件最佳实践
...打包工具4.让你的代码更容易碎片化以达到复用的目的。基于模块开发用一些功能单一的小模块来组织你的应用Why?对于你自己和你团队的人来说较小的模块更容易看懂 查看详情
AngularJs 1.5 - 基于组件的架构、绑定和良好实践
】AngularJs1.5-基于组件的架构、绑定和良好实践【英文标题】：AngularJs1.5-ComponentBasedArchitecture,BindingsandGoodPractices【发布时间】：2017-03-1805:51:37【问题描述】：按照我的问题Angularjs1.5-CRUDpagesandComponents我还有一些关于基于组件的架... 查看详情
基于angularjs的前端云组件最佳实践
AngularJS是google设计和开发的一套前端开发框架，他能帮助开发人员更便捷地进行前端开发。AngularJS是为了克服HTML在构建应用上的不足而设计的，它非常全面且简单易学习，因此AngularJS快速的成为了javascript的主流框架。 一、A... 查看详情
一个基于rabbitmq的可复用的事务消息方案(代码片段)
原文:一个基于RabbitMQ的可复用的事务消息方案前提#分布式事务是微服务实践中一个比较棘手的问题，在笔者所实施的微服务实践方案中，都采用了折中或者规避强一致性的方案。参考Ebay多年前提出的本地消息表方案，基于RabbitM... 查看详情
[实践篇]13.20qnx进程管理slm学习笔记(代码片段)
【QNXHypervisor2.2用户手册】目录(完结)4.2模块我们可以将组件组合成一个模块。模块中的进程可以组成一个子系统，也可以用于建立一组系统状态，例如基本操作和各种更高级别操作。注意，必须命名模块，以便可以在内部引用它... 查看详情
vue-cli——解决多次复用含有echarts图表组件的问题
...事半功倍效果，但是昨晚在vue-cli项目里组件复用时发现基于Echarts图表的组件不能够复用，昨晚捯饬了很久，终于还是解决了这个问题，在此记录，加深自己理解。 具体来说，问题如下：开发了一个基于Echarts的图表组件，现... 查看详情
antdesignblazor组件库的路由复用多标签页介绍(代码片段)
前言Blazor是.NET最新的前端框架，可以基于WebAssembly或SignalR（WebSocket）构建前端应用程序，基于WebAssembly托管模型的Blazor甚至可以离线运行。再加上可以共用.NET类库，能使代码量比以往的基于JS的前后端分离模... 查看详情
汽车之家unity前端通用架构升级实践
...心想帮助Unity开发人员加速项目开发效率。该架构的设计基于大量的经验和最佳实践，旨在使项目开发更加高效和规范化。通过使用通用架构，开发人员可以轻松地构建高质量、健壮和可扩展的项目，同时降低学习成本和维护成... 查看详情
基于elementui封装可复用的表格组件(代码片段)
<template><sectionclass="ces-table-page"><!--表格操作按钮--><sectionclass="ces-handle"v-if=‘isHandle‘><el-buttonv-for=‘itemintableHandles‘:key=‘item.label‘:size="size||item.size":type="item.type":icon=‘item.icon‘@click="item.handle(that)">item.labe... 查看详情
基于原生的移动跨平台研究和实践
基于原生主要是针对基于webview+h5比较来说的，基于H5的我不想再讨论了，我想尝试的是从UI到功能都是原生，而不是用H5模拟的所谓原生体验。背景我们从开发角度来考虑，但凡想从事长远的开发工作，都有自己的技术积累，最... 查看详情
基于java开发的cms内容管理系统(代码片段)
项目介绍一款Java语言基于SpringBoot2.x、Layui、Thymeleaf、MybatisPlus、Shiro、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建后台管理系统，本着简化开发、提升开发效率的... 查看详情
基于vue和高德地图实现地图组件「实践」
https://www.toutiao.com/i6833366419619447308/?tt_from=weixin&utm_campaign=client_share&wxshare_count=1×tamp=1591169335&app=news_article&utm_source=weixin&utm_medium=toutia 查看详情
前端组件化开发实践总结(代码片段)
...的开发方式之后，在后面的这些年里，对前端的组件化开发有了更全面一点的认识，组件化在我们的前端开发中，对提高开发效率、代码的可维护性和可复用性有很大帮助，甚至对跟设计师沟通的效率和企业... 查看详情
reactnative启动优化实践
参考技术ADiveintoReactNativeperformance阐述了基于RN实现的页面各部分加载时间占比图页面加载流程图（引用）从业务视角可以归纳为四个部分官方推出的FlatList及SectionList的一些问题官方对列表的一些配置推荐和实现建议OptimizingFlatlis... 查看详情
软件复用性
...使用。创造即面向复用编程，开发可复用的软件。使用即基于复用编程，利用已有的可复用软件搭建应用系统。复用是现代软件编写中最重要的概念之一。它具有很多优点，如：适应性，高可靠性，能够降低成本和开发时间等优... 查看详情
对于程序框架的理解
...到面向对象中类的复用（通常以类库的形式体现），再到基于组件编程中二进制组件（.NET中是以IL程序集形式存在的）的复用，人们复用软件的抽象层次越来越高。现在，框架复用是抽象层次的又一提升，框架的复用不仅仅是功... 查看详情
vue.js组件化开发实践
...统一结构的活动，都要码一个重复的轮子。后来接到一个基于模板的活动设计系统的需求，便有了下面的内容。借油开车。 组件化需求一到，接就是怎么实现，技术选型自然成为了第一个问题。鉴于目前web前端mvvm框架以及... 查看详情