Vue全家桶实践项目总结(推荐)(3)

有了这些约定，程序就可以通过目录文件得到所有组件的信息，组件的获取、展示、检索也就可以实现了。

组件里最关键的是config.json文件，这里面包含该组件的可配置项及其默认值，平台在展示组件时会读取这个配置文件，根据配置信息生成配置面板，这里面可以定义组件界面、样式、脚本中的所有变量，配置文件大概长这样：

{
 "cssConfig": {
 "fontSize": {
  "name": "字号",
  "value": "12px",
  "type": "text"
 },
 ...
 },
 "jsConfig": {
    ...
 },
 "showConfig": {
 "viewWidth": {
  "name": "栅格宽度",
  "value": 12,
  "type": "number"
 },
 ...
 }
}

配置文件里的cssConfig、showConfig、jsConfig三个分支，就是组件中所有可以修改的变量集合，想将这些变量应用到组件上，需要借助前端模板引擎，所以组件的三大件在开发的时候是用模板语法写的，经过模板引擎的解析，就能得到配置后的实际html/css/js内容，例如样式模板大概是这样的：

.widget-bread-1 {
  font-size: ${fontSize.value}; 
  color: ${textColor.value}; 
}
.widget-bread-1 a { 
  color: ${textColor.value};
}
.widget-bread-1 a:hover{
  color:${hoverColor.value};
}
.widget-bread-1 .ion { 
  font-size: ${iconSize.value}; 
  margin: 0 ${iconMargin.value};
}

在得到组件实际代码后，只要将结果插入页面中并适时更新就行了，其中HTML和css可以直接替换文本内容，js因为是模块化引入的，只替换模块内容不会重载模块，必须将整个模块重命名后进行整体替换，因此js模块的名称是随机的。

这里会有一个问题，有的组件需要在页面里多次使用，那么这个组件的js选择器就会发生冲突，这个问题的解决正好可以借助js模块的那个随机名称，我们约定在组件开发中id作为保留变量，由平台自动赋值一个随机字符串，这个字符串在组件实例内部相同，多次调用则不同，这样只要将${id}作为组件父节点的id或class，就解决了选择器冲突问题，同时也可以作为组件的css命名空间，使可能发生的css命名冲突也解决于无形。

以上是项目核心功能。

此外还用localStorage作为存储方式实现了单机版的数据统计，可以收集当前浏览器的组件使用记录，以及每个使用时的配置情况，这里主要是对本地存储的操作，但是项目自身的开发也用到了前端模板，加上组件的模板，都会在第一次加载后用localStorage缓存起来，这些内容的缓存策略不同，用户数据应该是永久存储，项目模板应该可以手动更新，组件模板需要视情况而定，存储的内容多了就需要清理，清理的时候一条一条的去删除就不现实了，全部删除可能误伤其他应用的存储，这里的做法是将localStorage操作封装，存储方法会在在key前加上一个特殊前缀，删除时只要遍历本地存储的key并且判断是否匹配前缀就知道是否是应用内的存储了，对应的取值方法也要逆向的先给key加上前缀再去取值。