![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
ljw1412
这个作者很懒,什么都没留下…
展开
-
[ web前端 ] 使用 CSS Variables 实现主题切换
本文介绍了另一种实现主题功能的思路,简洁,使用原生Css实现。但是请注意兼容性!CSS Variables变量声明使用两根连词线"--"表示变量,"$color"是属于Sass的语法,"@color"是属于Less的语法,为避免冲突css原生变量使用"--"// 声明变量--color:#000;// 读取变量var(--color)兼容性效果展示源代码<!DOCTYPE html><html> <head>..原创 2020-07-10 18:35:32 · 1727 阅读 · 0 评论 -
[ scss | webpack ] 实现页面主题思路(2)
本文介绍了另一种实现主题功能的思路,是前一篇([ scss | webpack ] 实现页面主题思路)的扩展。Demo源代码此方法通过切换style的外部样式表链接实现。效果图Demo项目结构|____src| |____styles # 页面样式| | |____core.scss | |____themes # 主题变量| | |____default.scss| | |____dark.scss| | |..原创 2020-07-10 18:12:44 · 579 阅读 · 0 评论 -
[ scss | webpack ] 实现页面主题思路
1. Demo文件结构|____src| |____styles # 页面样式| | |____core.scss | |____themes # 主题变量| | |____default.scss| | |____dark.scss| | |____blue.scss| |____entry.js # 打包入口|____webpack.config.js|____package.json2. 页面样式与主题变量原创 2020-07-10 11:44:09 · 530 阅读 · 0 评论 -
[ sass/scss ] Sass 函数功能汇总
本文介绍Sass自备的字符串函数、数字函数、列表函数、Introspection函数、三元函数等等。Sass函数1. 字符串函数unquote($string) 删除字符串中的引号quote($string) 给字符串添加引号to-upper-case($string) 将字符串小写字母转换为大写字母to-lower-case($string) 将字符串大写字母转换为小写字2. 数字函数percentage($value):将不带单位的数转换成百分比值round($value):将数值四舍五入,转换成.原创 2020-07-08 18:30:56 · 574 阅读 · 0 评论 -
[ javascript ] 简易表单验证
function checkRule(obj, key, rule) { return rule.valid ? rule.valid(obj[key]) : true}function validator(obj, rules) { for (let key in rules) { const rule = rules[key] // 如果为空 if (o...原创 2020-04-22 16:02:17 · 130 阅读 · 1 评论 -
[ npm ] 配置与Registry管理
npm config首先使用 npm config -h ,查看它的相关信息以及命令行。npm config set <key> <value> # 设置 npm 配置npm config get [<key>] # 获取 npm 指定配置的值npm config delete <key> # 删除 npm 指定配...原创 2020-04-19 17:28:12 · 1220 阅读 · 0 评论 -
[ sass/scss ] 自定义函数 去单位 px转em
在使用scss过程中,一直会有个疑惑它的内部是如何运作的。实际上它的运作与现实生活中一直。如果你想要移除一个值的单位,你想要将它除以1单位。比如 50cm 我想取它的数字,那么我们除以1cm,得到结果是 50。反过来就是 1cm x 50 = 50cm。同理这个原理也适用于scss$length: 50px;$value: $length / 1px;// -> 50...原创 2020-04-06 14:04:01 · 1971 阅读 · 2 评论 -
[ javascript ] 数字类型转换字符串性能测试 (benchmark)
1. 拉取依赖yarn add benchmark2. 编写测试用例const Benchmark = require('benchmark')const suite = new Benchmark.Suite()const a = 123456789suite .add('String', () => { String(a) }) .ad...原创 2020-03-26 18:23:26 · 825 阅读 · 0 评论 -
[ webpack ] 在HTML源代码前加上自动加上备注说明
打包环境:webpack41. 思考如何在打包过程中在<html>标签前自动生成备注说明?使用html-webpack-plugin进行html生成。翻阅源代码,发现有`html-webpack-plugin-before-html-processing`, `html-webpack-plugin-after-html-processing`, `html-webpa...原创 2020-03-10 10:14:00 · 1108 阅读 · 1 评论 -
[ javascript ] 如何判断元素内容被截断。
可以用元素的scrollWidth属性和元素的clientWidth属性进行大小比较就可以判断。高也是同理。Demo代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=...原创 2020-02-19 11:04:12 · 917 阅读 · 0 评论 -
[ javascript ] 推荐调用原型链上真正的方法
// 不推荐obj.hasOwnProperty('a')// 推荐Object.prototype.hasOwnProperty.call(obj,'a')那为什么推荐需要使用原型链上真正的 hasOwnProperty 方法?大概有以下几种原因:1.obj 继承于null 而非 Object.prototype ,那也不存在 hasOwnProperty 方法。2....原创 2019-12-13 09:47:45 · 682 阅读 · 0 评论 -
[ H5 | canvas ] 图像变形和模糊问题
图像变形:当你在支持html5 canvas的浏览器下查看页面的时候,canvas画布的默认大小是300*150,当在css设置画布大小时比如300*300实际是将原画布(300*150)进行了拉伸,所以会导致图像变形解决方法:将想要设置的画布大小直接设置在canvas标签上<canvas id="canvas" width="300px" height="300px">...原创 2019-07-08 14:02:35 · 1225 阅读 · 0 评论 -
[ ES6 ] 扩展运算符(...)与Object.assign()中的部分深拷贝
部分深拷贝个人笔记,学习过程中的发现,不一定正确。如果对象或者数组中包含子数组和子对象,那一部分为浅拷贝原因应该是是...遍历时那部分为对象/数组类型指向原来的地址对象var obj = {a: 1, b: 2, c: { a: 3 },d: [4, 5]}var obj1 = objvar obj2 = JSON.parse(JSON.stringify(obj))//...原创 2018-03-22 11:45:02 · 9338 阅读 · 1 评论 -
[ 微信小程序 ] 使用mpvue绑定微信picker(mode:date)
<!-- picker 组件的绑定 mpvue的使用方式 --><picker mode="date" name="activity.endDate" v-bind:value="activity.endDate" start="2015-09-01" end="2017-09-01" @change="bindDateChange"> <...原创 2018-03-28 15:26:24 · 4019 阅读 · 0 评论 -
[ webpack | moment ] moment精简打包
moment默认导入,会引入全部的语言资源文件。而我们最终使用到的语言资源仅仅是其中的一部分。默认导入打包后文件大小情况:我们现在的目的是精简左边的 locale 语言资源文件。方案一:使用 webpack.IgnorePlugin1. webpack.config.jsconst webpack = require('webpack')// 其他相关配置已省略...原创 2019-08-06 18:30:44 · 1214 阅读 · 0 评论 -
[ javascript | console ] 如何用 console 输出 HTML元素属性,而不是元素文档
如果用 console.log 去输出 DOM 会出现如下图的结果方法一:console.log('%O',DOM)方法二:输出 DOM 数组的形式方法三:使用console.dir原创 2019-08-08 14:42:10 · 5411 阅读 · 1 评论