基于px2rpx-loader,探讨一下loader的封装思想
2018-07-19 06:09:46来源:博客园 阅读 ()
本文以px2rpx-loader的源码为学习对象,了解其工作机制以及loader封装的思想。
1.前言
最近在了解mpvue框架的时候,对于其能够实现一套代码兼容web和微信小程序(以下简称小程序)的能力十分着迷,虽然小程序的MINA框架有着Vue的影子,但是无可否认的,小程序做了很多有着自己风格的封装,如rpx单位,WXML中的 view, button, text等标签,与web有着较多的差异。
px2rpx-loader作为支持mpvue实现兼容web和小程序的设施之一,有一定值得我们学习的地方。
2.rpx介绍
对于rpx的概念和作用,此处引用微信官方的话说,就是“在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可”。
rpx可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx。
rpx的确很好用,大大减轻了开发者对于兼容不同设备的工作量,虽然现在有很多移动端设备兼容的方案,如阿里的flexible,但是小程序中用一个单位就能解决这个恼人的问题,也是极好的。
3.px2rpx-loader的使用
让我们回到实际业务中,假设现在设计师以iphoneX的尺寸为基础,出了一套1125px * 2436px的设计图,并且已经完成了以px单位为基础的web移动端页面的还原,现在需要将已经完成了的页面迁移到小程序中,因此需要解决宽高的转换和单位的转换,我们接下来通过一个测试项目对px2rpx-loader的使用进行介绍。
px2rpx-loader可以依靠webpack来实现,过程如下:
( 1 ) npm install px2rpx-loader // 在目标文件夹中安装loader包
( 2 ) 在webpack.config.js中进行相应配置
{ test: /\.css$/, use: [ 'style-loader', 'css-loader', 'px2rpx-loader?rpxUnit=1.5' // px转换为rpx的配置,rpxUnit=1.5为配置参数,后面会介绍 ] }
根据该配置,在webpack进行打包的时候就会对src目录下的 index.css 文件进行预处理。
( 3 ) 此外,我们需要简单写一下index.html和index.css的测试代码
index.html
<body>
<div class=“container”></div>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
index.css
.container { width: 1125px; height: 2436px; background-color: pink; }
( 4 ) 在控制台中通过webpack命令进行打包
$ webpack
最后可以在浏览器调试窗口中看到(之所以被线划掉,是因为浏览器不支持rpx单位的)
此时单位已经转换完成,并且也根据比例调整为750rpx宽,此时的类为container的div元素可以在小程序中适应各个尺寸的设备了(当然在小程序中是没有div标签的,最终的实现还需要mpvue-loader将div标签转换为小程序中的view标签)。
4.px2rpx-loader源码解析
从上面的一个测试中可以看出,其实px2rpx-loader实现的功能并不复杂,主要实现了两个转换:
( 1 ) 将宽度的数字部分按比例缩小
( 2 ) 将px单位改成rpx单位
功能虽然简单,但我们也不妨了解其内部实现的原理,让我们学习封装loader的一些思想。
loader中第一个解决的问题是获取到webpack.config.js中的配置参数,可以借助loaderUtils模块实现。
var loaderUtils = require('loader-utils') // 获取loader的配置项
var options = loaderUtils.getOptions(this) // 获取如上文webpack配置中,'px2rpx-loader?rpxUnit=1.5’中的rpxUnit=1.5
然后,loader中应该预设好默认的配置,这样在使用loader时就可以只写部分配置或者直接使用默认配置,这里借助了extend模块实现。
var extend = require('extend'); // 用于克隆对象 var defaultConfig = { … }; // 默认配置项 var config = { }; extend(this.config, defaultConfig, options); // 在后面进行单位转换的函数中,将config变量作为实参传入,进行相应的处理
extend模块是用来克隆(或者叫做拓展)多个对象的,熟悉jQuery的朋友应该都知道$.extend() 方法,其接受多个对象作为参数,以参数中第一个对象为目标,将参数中其他对象合并到目标对象上,如果第一个参数为true,那么就会实现深克隆。
loader需要处理的对象的是css代码,但是css代码并不是JS能够直接能够进行逻辑处理的对象,因此需要使用css模块进行css代码到css AST(css抽象语法树)的转换,这是loader中关键的一步
var astObj = css.parse(cssText); // 解析css文件,构建css AST树,cssText形参由webpack将css代码作为实参传入
经过转换后,css代码会被转换为JSON格式的对象,举个例子:
//CSS代码 body { background: #eee; color: #888; } //CSS AST { "type": "rule", "selectors": [ "body" ], "declarations": [ { "type": "declaration", "property": "background", "value": "#eee", "position": { "start": { "line": 2, "column": 3 }, "end": { "line": 2, "column": 19 } } }, { "type": "declaration", "property": "color", "value": "#888", "position": { "start": { "line": 3, "column": 3 }, "end": { "line": 3, "column": 14 } } } ] }
在这个JSON对象中,记录了代码的位置(line, column),样式的属性名(property)和属性值(value),样式的类型(type),选择器(selectors)等,通过这个JSON对象,可以很轻易的通过JS实现单位转换了。
但是需要考虑到一个问题,即在一个css文件中,可能并不需要把所有的px都转换为rpx,如字体大小,不应该随着屏幕尺寸的增大而过度增大。所以load中允许通过一个特殊的注释“ /*px*/ ”来进行标记,表明当前的样式不需要转换。以之前的例子举例,我们在index.css中添加一个/*px*/注释,表示height: 2436px; 这个属性不需要转换。
index.css
.container { width: 1125px; height: 2436px; /*px*/ background-color: pink; }
最后可以在浏览器调试窗口中看到结果不出所料,高度部分的样式没有被转换。
单位转换的逻辑很简单,只需要遍历css AST的JSON对象,将没有“ /*px*/ ”标记的样式代码进行数值部分的转换,然后再拼接上“rpx”单位即可。
function _getCalcValue (value, config) { value即JSON中样式属性值,config即上文所说整合过的配置参数 var pxRegExp = /\b(\d+(\.\d+)?)px\b/; // 用来匹配形如“ 24.55px ”的正则 function getValue(val) { return val == 0 ? val : val + ‘rpx’; // 将转换后的数值拼接上’rpx’单位 } return value.replace(pxRegExp, function ($0, $1) { return getValue($1 / config.rpxUnit); // 数值部分按比例转换 }); };
5.loader封装思路整理
下图对整个loader的思路做一个整理:
整个过程大致可以分为3部分,一是对配置参数的获取和整合,二是css代码和css AST的相互转换,三是px单位到rpx单位的处理。举一反三,我们不难想象出,其他的一些css预处理包也应该是遵循着相似的逻辑来进行,譬如px转为rem,rem转为rpx,或者是px转vw等等。
通过深入了解px2rpx-loader,我们总结了其封装的思路,顺带学习了一下css的抽象语法树。在后面的工作或者学习中,我们也是可以尝试封装自己的loader,来进行一些兼容和减少我们重复性的操作的。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:酷炫的SVG 动态图标
下一篇:前端经常遇到的的问题
- 基于原生的 html css js php ajax做的一个 web登录和注册系 2020-02-21
- [开源] 基于Layui组件封装的后台模版,HG-Layui-UI通用后台 2019-12-07
- 【新手向】一个超简单的基于jQuery ajax的天气预报Demo 2019-10-08
- jq动画插件,自制基于vue的圆形时钟 2019-09-17
- formSelects-v4.js 基于Layui的多选解决方案 2019-08-31
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash