js原生

[numberfan]

监听input表单的事件：

对表单元素的输入进行限制，如不允许输入特殊字符。

1. input事件

inputElement.addEventListener('input', function(event) {
  let regex = /[^1-9a-zA-Z]/g;
  event.target.value = event.target.value.replace(regex, '');
  event.returnValue = false
});

在Android上没有问题，但在ios中，input事件会截断非直接输入（非直接输入：在我们输入汉字的时候，如‘喜茶’，中间过程中会输入拼音，每次输入一个字母都会触发input事件，然而在没有点选候选字或者点击‘选定’按钮前，都属于非直接输入）。

2. compositionstart 和compositionend
   compositionstart 事件在用户开始进行非直接输入的时候触发，而在非直接输入结束，也即用户点选候选词或者点击「选定」按钮之后，会触发 compositionend 事件

var inputLock = false;
function do(inputElement) {
    var regex = /[^1-9a-zA-Z]/g;
    inputElement.value = inputElement.value.replace(regex, '');
}

inputElement.addEventListener('compositionstart', function() {
  inputLock = true;
});


inputElement.addEventListener('compositionend', function(event) {
  inputLock = false;
  do(event.target);
})


inputElement.addEventListener('input', function(event) {
  if (!inputLock) {
    do(event.target);
    event.returnValue = false;
  }
});

添加一个 inputLock 变量，当用户未完成直接输入前，inputLock 为 true，不触发 input 事件中的逻辑，当用户完成有效输入之后，inputLock 设置为 false，触发 input 事件的逻辑。这里需要注意的一点是，compositionend 事件是在 input 事件后触发的，所以在 compositionend事件触发时，也要调用 input 事件处理逻辑

[numberfan]

判断元素是否出现在可视区域：

dom.offsetTop < window.innerHeight + document.body.scrollTop

dom.offsetTop：DOM距离顶部的值
window.innerHeight：视窗高度
document.body.scrollTop：body滚动的高度

窗口高度：

• window.outerHeight:整个浏览器窗口的大小，包括窗口标题、工具栏、状态栏等
• window.innerHeight:视窗高度，包括内容、边框以及滚动条
• document.documentElement.clientHeight:视窗高度，不包括整个文档的滚动条，也不包括元素的边框，也不包括的边框和滚动条
• document.body.clientHeight:视窗高度，不包括整个文档的滚动条，但包括元素的边框
  兼容所有，得到视窗高度：

window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

滚动高度：

• clientHeight: 内部可视区域大小
• offsetHeight：整个可视区域大小，包括border和scrollbar在内
• scrollHeight：元素内容的高度，包括溢出部分
• scrollTop：元素内容向上滚动了多少像素，如果没有滚动则为0

Element.getBoundingClientRect()

返回元素的大小及其相对视口的位置

let obj = Element.getBoundingClientRect()
obj = {width:, height:, left:, top:, right:, bottom:}

obj 的只读属性left、top、right和bottom，单位为像素，除了 width 和 height 外的属性都是相对于视口的左上角位置而言的

[numberfan]

下拉加载

domScroll.scrollTop + domScroll.offsetHeight >= maincon.scrollHeight

[numberfan]

插件编写

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory(root))
  } else if (typeof exports === 'object') {
    module.exports = factory(root)
  } else {
    root.LazyLoad = factory(root)
  }
})(typeof global !== 'undefined' ? global : this.window || this.global, function (root) {
  'use strict'
  function LazyLoad (images, options) {}
  LazyLoad.prototype = {}

  root.lazyload = function (images, options) {
    return new LazyLoad(images, options)
  }
  return LazyLoad
})

[numberfan]

IntersectionObserver

判断某个元素是否进入视口（viewport）

/**
 * 1.实例化观察函数
 * callback 可见性变化时的回调函数（会触发两次，1次为目标元素进入视口——开始可见，1次是完全离开视口——开始不可见）
 * options 配置对象（可选）
 * callback参数：
 * time——可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
 * target——被观察的目标元素，是一个 DOM 节点对象
 * rootBounds——根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
 * boundingClientRect——目标元素的矩形区域的信息
 * intersectionRect——目标元素与视口（或根元素）的交叉区域的信息
 * intersectionRatio——目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
 */
let io = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    console.log(entry)
  })
})

/**
 * 2.开始观察
 * dom 指定要观察的DOM节点
 * 如果要观察多个DOM节点，则要多次调用该方法
 */
io.observe(dom)

/**
 * 3.停止观察
 * dom 要停止观察的DOM节点
 */
io.unobserve(dom)

// 4.关闭观察器
io.disconnect()

[numberfan]

表单

基础文本验证

<input type="text" id="name" required pattern="^1[3|5|8]\d{9}$" minlength="1" maxlength="11" title="请输入正确格式的手机号码">

• required: 标志当前表单必须填值(支持该属性的浏览器会发出警告，并阻止表单提交)
• minlength: 可输入的字数最小值(部分浏览器会给出警告)
• maxlength: 可输入的字数最大值(部分浏览器会给出警告)
• pattern: 对输入的内容进行验证(正则)
• title: 当pattern正则验证不成功时，会显示title内的错误提示文字

验证数字

浏览器会拒绝接收字母或其他字符，以及在使用时发出警告

<input type="number" id="tel" min="1" max="20">

• step: 允许接收的数字类型;(step=any, 能接收任何数字)
• min: 数字的最小值
• max: 数字的最大值

email、url、日期验证

pattern值是为了不支持该表单类型的数据验证

// email
<input type="email" pattern="^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$">

// url
<input type="url" pattern="^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*)(?::\d{2,})?(?:[\/?#]\S*)?$">

// 日期
<input type="date" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))">

[numberfan]

Base64数据编码

用途：把二进制数据序列化转化为ASCII字符序列，用以数据传输
常用场景：

• url编码
• 图片转Base64的字符串

md5加密

解释：将任意长度的信息流散列然后生成定长的摘要过程
作用：

• 一致性校验
• 数字签名
• 安全访问认证
  特点：
• 不可逆性：根据MD5值计算不出原始数据
• 唯一性：不同原始数据会有不同的MD5值（不可靠）

加盐

解释：用户隐私数据加密；一段隐私数据加上一段乱码再进行md5

HMAC

[numberfan]

客户端（浏览器）存储

博文地址：cookie/localStorage/sessionStorage/indexedDB