「布局技巧」图片未加载前自动撑开元素高度
「布局技巧」图片未加载前自动撑开元素高度在移动端开发中，有一些元素是根据图片高度来自动撑开的 ，高度不能写死（如轮播图的外层元素）。在网络较慢的情况下，图片加载需要一些时间，此时该元素的高度没有被撑开，在网页布局上会有一些不想看到的效果。
这种情况我们可以设置如下样式来设置该元素的高度：
123456.wrapper overflow hidden width 100% height 0 padding-bottom 26.66% // 这个数值是图片的高宽比，即 高/宽 background #eee
上面代码中，padding-bottom 的取值是图片的高宽比（即，高/宽），它会根据 width值的26.66%计算，最终元素的高度会和图片加载完成后的高度一致。
也可以使用vw的方法，但在一些浏览器可能有兼容性问题：
1234.wrapper width 100% height 26.66vw background #eee
vw，viewpoint width，视窗宽度，1vw=视窗宽度的1%
vh，viewpoint height，视窗高度，1vh=视窗 ...
flex布局案例-网格布局
flex布局案例-网格布局
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
::: demo [vanilla]
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182<html> <div class="grid"> <div class="grid-cell">1/2</div> <div class="grid-cell">1/2</div> </div> <div class="grid"> <div class="grid-cell">1/3</div> ...
JSX简介
01. JSX简介什么是JSX？1const element = <h1>Hello, world!</h1>;
以类似模板语法的方式描述UI的一种语法。它是JS的语法糖，本质上也是JS。可以在其中使用变量或表达式、函数等。
为什么使用JSX？将标记与逻辑 共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。
React不强制使用JSX，但在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。
在 JSX 中嵌入表达式1const element = <h1>Hello, {2+2}</h1>;
在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。
JSX 也是一个表达式在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象
可以把JSX当初一个对象来对待，可以使用它赋值给变量、当参数输入函数、返回JSX等。
JSX 特定属性通过使用引号，来将属性值指定为字符串字面量：
1c ...
flex布局案例-圣杯布局
flex布局案例-圣杯布局
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
::: demo [vanilla]
123456789101112131415161718192021222324252627282930313233343536373839<html> <div class="HolyGrail"> <header>#header</header> <div class="wrap"> <nav class="left">left 宽度固定200px</nav> <main class="content">center 宽度自适应</main> <aside class="right">right 宽度固定200px</aside> </div> < ...
ES6面向对象
ES6面向对象123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354//面向对象封装class Student{ //定义类 (尊从首字母大写的约定) constructor(props){ // 构造函数 （构造函数内定于属性） this.name = props.name || '匿名'; // 默认'匿名' this.grade = props.grade || 1; } hello(){ // 在构造函数的原型上定义方法 console.log(`你好,${this.name}同学，你在${this.grade}年级`); }}//使用function createStudent(props) { // 对于new构造函数的封 ...
ES5面向对象
ES5面向对象123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657//面向对象封装function Student(props){ // 构造函数 （构造函数内定于属性。尊从首字母大写的约定） this.name = props.name || '匿名'; // 默认‘匿名’ this.grade = props.grade || 1;}Student.prototype.hello = function(){ // 在构造函数的原型上定义方法 console.log('你好,'+ this.name +'同学，你在'+ this.grade+'年级');}//使用function createStudent(props) { // 对于new构造函数的封装，其优点：一是不需要new来调用，二是 ...
正则表达式-语法
文章参考自https://yanhaijing.com/javascript/2017/08/06/regexp-syntax/，个人学习记录所用
正则表达式教程——语法正则就是用有限的符号，表达无限的序列，殆已！
正则表达式的语法一般如下(js)，两条斜线中间是正则主体，这部分可以有很多字符组成；i部分是修饰符，i的意思表示忽略大小写
1/^abc/i
简单字符没有特殊意义的字符都是简单字符，简单字符就代表自身，绝大部分字符都是简单字符，例如：
123/abc/ // 匹配 abc/123/ // 匹配 123/-_-/ // 匹配 -_-
转义字符\是转义字符，其后面的字符会代表不同的意思，转义字符主要有三个作用：
是为了匹配不方便显示的特殊字符，比如换行，tab符号等
正则中预先定义了一些代表特殊意义的字符，比如\w等
在正则中某些字符有特殊含义(比如下面说到的)，转义字符可以让其显示自身的含义
常用转义字符列表：
符号
含义
\n
匹配换行符
\r
匹配回车符
\t
匹配制表符，也就是tab键
\v
匹配垂直制表符
\x20
2 ...
比typeof运算符更准确的类型判断
比typeof运算符更准确的类型判断不同数据类型的Object.prototype.toString方法返回值如下。
数值：返回[object Number]。
字符串：返回[object String]。
布尔值：返回[object Boolean]。
undefined：返回[object Undefined]。
null：返回[object Null]。
数组：返回[object Array]。
arguments 对象：返回[object Arguments]。
函数：返回[object Function]。
Error 对象：返回[object Error]。
Date 对象：返回[object Date]。
RegExp 对象：返回[object RegExp]。
其他对象：返回[object Object]。
这就是说，Object.prototype.toString可以看出一个值到底是什么类型。
12345678Object.prototype.toString.call(2) // "[object Number]"Object.protot ...
防抖与节流函数
防抖与节流函数防抖和节流的作用都是在高频事件中防止函数被多次调用，是一种性能优化的方案。
区别在于，防抖函数只会在高频事件结束后n毫秒调用一次函数，节流函数会在高频事件触发过程当中每隔n毫秒调用一次函数。
防抖函数触发高频事件后一段时间（wait）只会执行一次函数，如果指定时间（wait）内高频事件再次被触发，则重新计算时间。
封装123456789101112// 防抖函数function debounce(func, wait) { let timeout = null; return function () { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args) }, wait); }}
...
33个非常实用的JavaScript一行代码
一、日期处理1. 检察日期是否有效该方法用于检测给出的日期是否有效：
1234const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());isDateValid("December 17, 1995 03:24:00"); // true复制代码
2. 计算两个日期之间的间隔该方法用于计算两个日期之间的间隔时间：
1234const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)dayDif(new Date("2021-11-3"), new Date("2022-2-1")) // 90复制代码
距离过年还有90天~
3. 查找日期位于一年中的第几天该方法用于检测给出的日期位于今年的第几天：
1234const dayOfYear = (date) => Math.floor ...
