共计 2842 个字符,预计需要花费 8 分钟才能阅读完成。
作者:凹凸曼 - 冥冥
小程序的简化版 css-modules,比规范 css-modules 代码量更少的优化计划
介绍
css-modules 是一种 css 模块化计划,它在构建过程中生成一个原类名与新类名的 map,依据 map 援用款式,通过设定 hash 规定,实现了对 CSS 类名作用域的限定,它通常用来解决页面类名抵触的问题。因为微信小程序内组件款式默认隔离,为什么要应用 css-modules 呢?
有以下 2 个起因:
- hash 化后能够实现更短的命名,缩小代码包体积
- 跨端我的项目须要兼顾非小程序环境,防止款式抵触
weapp-css-modules 做了哪些事?
- 新类名单字母编排,缩小代码量
- 移除类名映射 map,替换 js 和 wxml 中变量为编译后类名
规范 css-modules 计划:
import style from './index.wxss'
<view class="{{style.banner}}"></view>
.index_banner_xkpkl {xx}
module.exports ={'banner' : 'index_banner_xkpkl'} // 额定生成的 map 文件
weapp-css-modules 编译后成果:
let style = {}
<view class="a"></view>
.a {xx}
装置
目前只开发了实用于应用 gulp 编译小程序的 gulp 插件,后续打算开发 webpack 可用的插件实现雷同性能
npm i gulp-weapp-css-modules gulp-sort
// gulpfile.js
const {weappCssModule, wcmSortFn} = require('gulp-weapp-css-modules')
const sort = require('gulp-sort');
gulp.task('css-module', () => {return gulp.src('./src/**/*')
.pipe(sort(wcmSortFn)) // 因为解决文件有程序依赖,须要先对文件排序
.pipe(weappCssModule())
.pipe(gulp.dest('./dist'))
})
应用
小程序页面不具备隔离性能,因而只有具备款式隔离的 Component 能够革新应用 weapp-css-modules
1、css 文件改名字: weapp-css-modules 通过 css 文件是否带 module 来辨认须要替换的内容
index.wxss
-> index.module.wxss
// 或者应用 scss/ 其余
index.scss
-> index.module.scss
2、js 内新增款式文件的引入,目标是建设 css-modules 的款式与 js 关系
import styles from './index.module.wxss
data:{
...,
styles:styles
}
3、批改 js 内类名的中央替换为 styles 的间接引入
query.select('.banner')
.boundingClientRect()
.exec(function (res) {...})
// 改为
query.select('.' + styles['banner'])
.boundingClientRect()
.exec(function (res) {...})
4、批改 wxml 内类名的应用
4.1. 一般类名
<view class="banner"></view>
// 改为
<view class="{{styles.banner}}"></view>
// 或者
<view class="{{styles['banner']}}"></view>
4.2. 三目运算符
<view class="banner__dot {{'banner__dot--'+ (index == swiperCurrent ?'cur':'')}"></view>
// 改为
<view class="{{styles['banner__dot'] +' '+ (index == swiperCurrent ? styles['banner__dot--cur'] :'')}}"></view>
// 或者
<view class="{{`${style['banner__dot']} ${index == swiperCurrent ? style['banner__dot--cur'] :''}`}}"></view>
这里须要留神几种有问题的写法:
4.2.1. 类名间未加空格
<view class="{{styles['banner__dot'] + (index == swiperCurrent ? styles['banner__dot--cur'] :'')}}"></view>
4.2.2. 三目表达式未加括号,运算优先级不明
<view class="{{styles['banner__dot'] +' '+ index == swiperCurrent ? styles['banner__dot--cur'] :''}}"></view>
4.2.3. styles 的属性须要是具体的字符串,不能应用变量表达式(这是 weapp-css-modules 须要独自关注的中央,因为编译阶段会对 styles.xx 进行求值,所以不能把表达式写在属性地位)
<view class="{{styles['banner__dot'] +' '+ styles[index == swiperCurrent ?'banner__dot--cur':'']}}"></view>
5、构建过程中关注脚本的红色提醒,相似于这种:
这是因为在 js/wxml 内应用了一个 banner__swiper_2
, 而 css 内并没有定义banner__swiper_2
,css-module 编译的 map 文件是依据 css 内的款式定义来生成 key 名的,因而styles['banner__swiper_2']
是undefined
, 针对这种状况有两种解决形式:
5.1. 如果 js 内须要通过这个类名抉择到某个元素,然而 css 内不须要编写款式,那么能够将它视为不须要编译的类名,即:
query.selector('.banner__swiper_2') // 不改成 styles.xx 的写法
<view class="banner__swiper_2"></view> // 相应的元素也不索引到 styles
// 这样实现了一个组件内不会被编译的款式
5.2. 如果 js 内无援用,那么删掉 wxml 内该类名的定义吧~
6、构建完进行查看,关注款式和交互是否失常
参考示例
- gulp 我的项目:门路
/demo/gulp-project-demo
分割反馈
- 欢送通过邮箱来跟我分割: smile123ing@163.com
- 欢送通过 GitHub issue 提交 BUG、以及其余问题
- 欢送给该我的项目点个赞 ⭐️ star on GitHub ! 点击文末「浏览原文」中转,送出 Star
欢送关注凹凸实验室博客:aotu.io
或者关注凹凸实验室公众号(AOTULabs),不定时推送文章。