scoped css 设计对比

前言

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

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

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

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

正文

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

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

mpvue-loader

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

mpvue -loader 基于vue-loader13.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

关于小册:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180807G0CI2G00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动