scoped css 设计对比

前言

摩拜前端小程序团队最近出了一本掘金小册，感兴趣的可以点击原文地址。

虽然是一本 24 节的电子书，但是我们一直以纸质出版物的标准去要求团队，里面有一个我们花了很多心思的章节《高级篇 2：mpvue 设计细节》：内容很长，大概需要读 39分30秒 – 应该是市面上最详细的源码解析了。

非常荣幸我们邀请到了美团酒旅前端技术专家, mpvue 小程序框架负责人 - 胡成全老师来作为我们的评审老师。

最早和mpvue 作者胡成全老师一直在讨论小程序以后的开发模式，以及 mpvue 的应用实践、源码设计等，对于 vue 和 mpvue 我们团队包括我个人花了很长的时间去通读源码&学习研究内部的设计细节并最终应用到各种业务中。

正文

现诚意放出小册的一些内容出来，做成一个mpvue 的源码分析系列，以一个一个小的设计对比出发。

供喜欢 vue 和 mpvue 的同学参考，也为 mpvue 的传播做出一点小小的贡献，欢迎转发分享。

mpvue-loader

因为后面的内容会提到 mpvue-loader，这里大概介绍一下：

mpvue -loader 基于vue-loader的13.0.4版本进行的修改，具体参考 [commit记录](https://github.com/mpvue/mpvue-loader/commit/11e672234f26e672039c7f6257683e1ae64f6385#diff-b9cfc7f2cdf78a7f4b91a753d10865a2)

style scoped

熟悉 vue 的同学知道在其单文件组件中，支持style scoped，使用方式如下：

模板内容：

样式内容：

.mobike-wrap {

color: #f05b48;

}

编译之后的模板如下所示：

对应的样式如下所示：

原理也很直观了：

通过，给 html 节点增加了，同时也给样式增加了

但是，我们看一下官网中提到的小程序支持的 css 选择器，如图所示：

发现在小程序中不支持属性选择器，所以做了额外的处理：

编译后的结果如下：

对应的样式代码如下：

我们深入对比一下：

mpvue-loader的处理：

selector.insertAfter(node, selectorParser.className({

value: opts.id

}))

vue-loader的处理：

selector.insertAfter(node, selectorParser.attribute({

attribute: id

}))

具体源码修改如图所示：

moduleId 生成原理

我们看一下这个data-v-moduleId 是如何生成的？

注意：

以文件路径为生成标准。

依赖的函数，内部实现如下：有缓存处理

使用hash-sum来做 hash

// mpvue-loader/lib/utils/gen-id.js

var path = require('path')

var hash = require('hash-sum')

通过Object.create创建缓存对象：

var cache = Object.create(null)

约定路径替换的正则：

设计 genId 函数：按路径生成 rootId

关于小册：