Emmet 语法 速查表
1、前言 Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),可以减少重复编码的工作。再配合上乱数假文(lorem)能够帮助我们快速开发网页。
2、语法使用2.1、 调用方法
Emmet使用Tab作为自动生成HTML代码的触发器。当然也可以按回车键来触发(本人喜欢使用VsCode)
2.2、后代标签生成
Child: >
1234<!-- ul>li --> <ul> <li></li> </ul>
2.3、兄弟标签生成
Sibling:+
1234 <!-- span+span+span --><span></span><span></span><span></span>
2.4、上级元素标签生成
Climb-up: ^
123<!-- p>span+em^span --><p><span></spa ...
如何写一个自己的npm包
1、前言
整天就是乱搞,这不,今天莫名的想写下从无到有的发布一个自己的npm包。下面就是具体的步骤。
2、具体实现2.1、创建自己的npm账户
想要发布npm包,拥有npm账号是必要的。可以直接到npm官网去注册,也可以点击注册npm去注册账户
2.2、创建包
在自己的目录下执行 npm init 根据提示填写信息
123456789101112{ name: 'cq-demo', // 包名 main: 'lib/index.js', // 包加载时的入口文件 version: 0.0.1, // 版本 description: '', // 描述 author: 'pythongyj', // 作者 contributors: '...', // 其他贡献者 dependencies: {}, // 生产依赖 devDependencies: {}, // 开发依赖 r ...
同步console.log();和异步console.log();
今天遇到了一个奇怪的问题可以看到图中,log同时打印这个对象和这个对象的一个属性,打印出的值却不相同!这是怎么哥回事呢?
排查问题原因我当时就特别奇怪,这是为什么呢?这不都是同步的么?没有什么异步啊,怎么值就不一样呢?接下来,你知道的,就开始排查原因,代码看了n遍,也没看出个所以然来!接下来就是各种查资料。也没有找到什么原因(毕竟查的资料和根本原因不同)。什么结果都没有查出来,很显然,也没有找到解决问题的办法。有点怀疑人生了。
找到原因终于,找到问题原因。最终还是一点一点的断点调试。结果发现,log居然不是同步的。当时的我无比的惊奇。开始百度,log是同步的还是异步的。结果发现,WebKit内核下,是异步的。在node.js中是绝对同步的。了解到这,不得不感叹,js真的是奇怪又强大啊!自己的js内功还是差了很多啊!以后多多补补,多多看书吧!
完美形容问题
总结《JavaScript异步编程》书中是这么解释的:
WebKit的console.log并没有立即拍摄对象快照,相反,它只存储了一个指向对象的引用,然后在代码返回事件队列时才去拍摄快照。而chrome的内核正是webkit
Nod ...
sass从零到一不完全解读
SassScript123在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性,允许属性使用变量、算数运算等额外功能。弱类型语言, 对语法要求没那么严格
一、注释
Sass 支持标准的 CSS 多行注释 /* */,以及单行注释 //,前者会被完整输出到编译后的 CSS 文件中,而后者则不会。
将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中,通常用于添加版权信息。
插值语句 (interpolation) 也可写进多行注释中输出变量值
例如:
12345678910111213141516/* hello world!*/// compile scss files to css// it's ready to do it.$pink: #f3e1e1;html { background-color: $pink;}$author: "gdream@126.com";/*! Author: #{$aut ...
读vantUI源码发现的语法(坑了我一把)
真心的吐槽
今天看vant源码,可把我坑了一把,问了好多人,查了好久的东西。先看问题看标记的部分,发现vant源码内用了大量的这种语法。讲真的,我是第一次看到代码这样写。一个特别大的疑问涌上心头。那就是第一个括号里的0是干嘛的呢?自执行函数不应该是()()的么?哪这事什么语法呢? 再看看其他的框架,也到处都是这种语法
解决疑问
结论
终究还是自执行函数,在严格模式下,为了使其在全局范围内执行,改变this指向的作用。
参考https://blog.csdn.net/Winne_Shen/article/details/102684878https://www.jianshu.com/p/c64bfbcd34c3https://www.i-programmer.info/programming/javascript/6524-the-confusing-comma-in-javascript.html
如果能够帮助到你,是小编最大的荣幸
当然 有 不好的地方 请大家帮忙指出 学习永无止境
小编一直认为 人外有人 天外有天 一起学习 共同进步
让我们共同加油吧!
js-cookie
1、整理记录一下 js-cookie 这个库的使用
一个简单,轻巧的 JavaScript API,用于处理 Cookie
适用于所有浏览器
接受任何字符
经过严格测试
无依赖性
不引人注目的 JSON 支持
支持 AMD / CommonJS
符合RFC 6265
有用的维基
启用自定义编码/解码
压缩约 900 个字节!这就是官方的描述,很好用的一个库,了解了这个库的好处,下面开始正式介绍使用。
2、使用2.1、下载安装
OR
OR
1yarn add js-cookie --save / npm install js-cookie -- save
JavaScript Cookie 也可以作为 AMD 或 CommonJS 模块加载
2.2、基本用法
创建一个在整个网站上有效的 cookie1Cookies.set("name", "value");
创建一个在整个网站都有效,但有效期为 7 天但 cookie1Cookies.set("name", "value", ...
react使用antd-mobile的按需加载和自定义主题
前言
练习使用react做移动端h5的时候,选择使用antd-mobileUI库。但是在使用的时候,遇到了一些坑。查询了很多别人遇到类似问题的解决方法。现在记录一下自己的解决方法。
1、创建react项目以及准备工作1.1、创建项目1npx create-react-app [你的项目名称]
1.2、下载需要的UI组件库1yarn add antd-mobile
1.3、整理项目目录
这里放一个本人整理好的项目目录,当然可能有些目录是不需要的,可以不要,暂时先放在这里。
2、antd-mobile按需引入配置
这里是按需加载的操作,可以按照官网上的提示一步一步的做。
2.1、 引入 react-app-rewired
由于新的 react-app-rewired@2.x 版本的关系,你需要还需要安装 customize-cra。
1yarn add react-app-rewired customize-cra --save-dev
2.2、 修改 package.json 里的启动配置12345"scripts": { "star ...
Css 取值于单位
1、Css 的长度
+长度单位
特殊值0可以省略单位。例如:margin:0px可以写成margin:0
一些属性可能允许有负长度值,或者有一定的范围限制。如果不支持负长度值,那应该变换到能够被支持的最近的一个长度值。
长度单位包括包括:相对单位和绝对单位。
相对长度单位包括有:em、ex、ch、rem、vw、vh、vmax、vmin、
绝对长度单位包括有:cm、mm、q、in、pt、pc、px
1.1、em
概念:
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸
1.2、 ex
概念:
相对长度单位,相对于字符“x”的高度。通常为字体高度的一半。
如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
1.3、 ch
概念:
数字“0”的宽度
1.4、 rem
概念:
相对长度单位,相对于根元素(即html元素)font-size计算值的倍数
1.4、vw
概念:
相对于视口的宽度,视口被均分为100单位的vw
1.5、 vh
概念:
相对于视口的高度。视 ...
css常用特效
前言
本文主要记录的是一些css的特效,一些在日常开发中使用到的css效果,记录在此,方便日后用到的时候直接拿来使用。当然,很多都是在网上看到的效果,自己根据效果实现的。也会有一些是抄的。不论怎样,目的只为学习。如侵犯了您的权益,请告知!必定立即删除。
1.按钮系列1.1、 霓虹特效
先看效果图
查看效果
颜色值
主题色:#031628
按钮一的颜色: #4cc9f0
按钮二的颜色: #f038ff
按钮三的颜色: #b9e769
Html 代码
12345<div class="base-btn"> <button class="btn one">Hover one</button> <button class="btn two">Hover two</button> <button class="btn three">Hover three</button></div>
...
色调平衡
色调平衡
色彩三要素 HSB:色相,饱和度,明度饱和度和明度决定色调七个色调:纯色调 刺激直接活力 廉价明色调 明朗干净阳光 廉价淡色调 天真女性纤细高档 单薄软弱白色调 文艺干净高档 无趣单调灰色调 成熟稳重 脏暗色调 品质力量厚重古典高档 阴暗危险色调之间平衡,平衡各色调之间优点与缺点深浅平衡,每个颜色都有自己的重量,轻重平衡形成对比才能看清有重点冷暖平衡,红橙黄暖,蓝冷,绿紫中性互补平衡,色环互补色的使用花色与纯色的平衡有彩色和无彩色的平衡面积平衡 主色百分之七十,辅助色百分之二十五,点缀色百分之五
日常学习随笔