“懒”是第一生产力。

代码复用老是程序员脍炙人口的，前端组件化的终究目标就是复用，本日我们就将深入探讨怎样完成UI组件的复用。

一般我们所说的组件往往是包含营业逻辑的前端组件，而这类组件实际上很难完成广义上的复用，顶多能在统一条营业线上复用一下，但UI组件就不一样了，没有了营业的束缚，只在UI层面上完成复用，那设想空间就很大了，所以这里我们只议论UI组件。

起首界定一下，UI组件就是一个web界面的前端代码片断，虽然说不包含营业，但基本的JS效果是可以有的，比方表单考证、轮播图效果、选项卡效果等等，也就是说UI组件可以包含htmlcssjs。我们复用的目标并非简朴的复制粘贴，而是愿望可以完成肯定程度上的自定义，比方界面内容可以调解、显现款式可以调解，以至JS效果也可以加以设置，如许才算真正有实用价值的组件复用。

那末我们就来构想一下怎样到达以上目标。起首最中心的就是组件自定义功用，自定义意味着一个组件的htmlcssjs代码都可以被修正，而且编辑历程要所见即所得。这个功用我们可以借助模板引擎完成，思绪是，将组件代码悉数用模板语法来写，然后抽出来一份设置数据，模板引擎用这份数据剖析模板，就获得了终究浏览器可以运转的代码。修正设置的历程也就是编辑设置数据的历程，编辑后及时挪用模板引擎，从新剖析获得新的代码，再将代码及时更新到浏览器中，就完成了编辑历程所见即所得。

拆解一下，这个功用大抵须要完成以下几个部份：组件代码的猎取、设置数据的可视化、模板引擎的挪用、设置文件编辑、组件演示、组件html/css/js代码复制。

再延长一下，组件代码的自动猎取想必要依靠肯定的构造规律，那末就要先商定好组件的治理方式。比方商定组件由一个文件夹构成，内部包含temp.html/style.css/script.js三个模板文件，再加上一个config.json设置数据文件。组件应该有一个总的寄存文件夹作为组件库，为了能猎取到组件的信息，组件库还须要一个目次文件，供应一切组件的列表以及每个组件的信息，如许就可以经由过程这个目次猎取到组件的模板、设置以及任何我们须要的信息了。

基于以上剖析已可以动手开辟一个UI组件治理东西了，可以完成组件治理、预览、编辑、代码复制功用。

假如止步于此，那这个东西的实用价值不是很大。缭绕前端代码复用，还可以进一步扩大功用，比方是不是可以从设想环节就最先介入到前端组件治理呢？由设想师宣布并保护公司内部UI组件库，在项目设想阶段，就可以从组件库中遴选基本组件加以调解，并将效果交付给前端，前端只须要将设想师的组件复原，就可以获得能直接用于项目标前端代码了。

回忆一下，这内里须要组件库完成的功用是，将组件的编辑效果天生一个特别代码，这个代码用来在治理东西内复原组件的编辑现场，从而完成设想历程到前端开辟的交代。这个功用的完成道理是将组件原始设置与所修正设置做兼并，获得组件的修正后设置，再用于组件的衬着和展现，就可以复原设想现场了。

到这里我们须要的功用就基本完整了，现在这个东西已开辟完成，并在以上功用的基本上，又增加了用户治理和运用统计，有助于更好的优化组件库建立。

源码：Github
预览：http://refined-x.com/WidgetsPlayground/

假如项目对你有协助，请去Github恣意的star不要客套。