序

经常上网的人都会很熟悉今天的这个主题，怎么说呢，用户资料，是在我们注册一个网站的时候，需要注册人填写的一些个人信息，这些个人信息会经过加密处理后存储到不同的服务器。那么完整度是什么呢？显而易见，完整度就是网站列出的条目，以及注册人填写的资料的条目的对比度，用户填写了几条，还有几条没有填写（这里只是有效数据）。可以通过这个完整度让用户一目了然，完善自己的用户资料。

背景

简单说一下背景，近几天，公司的设计部给提了几个新的需求，当然，这就是其中的一个（要不也就不在这废话了(*^__^*) 嘻嘻）。刚开始经理让找一找有没有这方面的开源组件，可以直接用上的。通过在网上调研之后，发现现在并没有什么现成的开源组件，不过倒是有不少简单的实现思路。这篇文章就简单的讨论一下这几个思路，下一篇文章再写详细的实现。

正文

用户资料完整度的前端显示问题，一般有两种解决思路，其中第一种就是请求后台服务器，查找某一用户的资料信息，根据查询到的信息进行判断，当然还要加上相应的权重，这个根据公司的需要，某个属性的具体权重进行相应的设置。需要注意的是，各个属性的总和必须是100%。否则，用户资料完整度就不够真实了。

而第二种解决思路是，不用请求后台服务器，直接在页面上查找用户已经填写的信息，当然，这种思路会受一些因素的影响。比如，用户的主要信息没有全部显示在页面上，或者是，页面是使用框架加载的，需要显示的页面和需要查找的页面不是同一个，这种情况也是受限制的。

那么，下面就详细的说说这两种方案。

方案一

首先需要把查找的属性、以及属性相应的权重加以确定，当然，这个是需要设计部给出的。考虑到将来的变化，我们可以把它单独的抽象出来，放到配置文件中，如果以后的权重需要修改，这也是很方便的。

对于前端的页面显示，其实这个有很多种方案，就看公司里怎么要求了。我这里采用的是进度条，Bootstrap 的进度条组件，不仅方便简单，而且也不失美观。简单的说一下实现原理，通过请求后台服务器，后台服务器计算出该登录用户的资料完整度，比如说计算后的结果是 50%，那么将这 50% 返回给前端的 Ajax 函数。前端的 Ajax 函数通过设置 Div 的宽度，以及样式来改变进度条的显示。

前端说完了，那么该说说后台服务器了，后台服务器通过查找登录用户的用户信息，当然可能会涉及到多张表，然后查询用户信息对应的权重，并与之进行匹配，将匹配好的权值进行计算，并把结果以 Json 的形式返回给前端。

方案二

第二种方案其实很简单，就是查找加载到页面的用户信息，然后读取各信息属性的权重，并计算信息的完整度，最终通过改变 Div 的宽度和样式来显示进度条。

很显然，这种方法虽然简单，而且不用请求后台服务器，但是，这种方法有很大的限制，那就是页面如果没有显示全部的信息属性的话，信息完整度的计算还是要请求服务器的。还有就是如果前端用的是框架加载的局部页面，那么显示用户信息的页面与显示信息完整度的页面没有在一块的话，那么就无法进行查找，这也是一大限制。

我的方案

通过对比以上两种方案，以及现有系统的特点，我还是选择了第一种方案，采用灵活的方式设置属性的权重，通过读取配置文件获取权重。然后，前端用的是 Bootstrap 的进度条组件。

结束语

很多时候，我们都是想着怎样方便、怎样省事怎么做，孰不知，这些看似省事的组件其实也是一把双刃剑，固然我们用上了，功能也实现了，但它的原理你还是不知道，你只能去依赖他做的组件。因此，在用这些开源组件的时候，我们也要多问一句，到底他是怎么实现的，如果是我，我应该怎么去实现。

当然，如果没有现成的组件的时候，那我们不得不去自己写了，其实这也是一种好事，虽然在某种程度上麻烦了点，但是搞明白了原理，就简单多了。

好了，理论说了一大堆，枯都枯死了。下一篇文章就来真的。。。