杂七杂八的笔记

Posted on

获取页面宽高（JS）

1
2
var pageWidth = dociment.documentElement.clientWidth
var pageHeight = dociment.documentElement.clientHeight

ul ol 去除默认样式（CSS）

1
2
3
ul,ol {
    list-style: none;
}

解决相邻元素添加样式布局抖动（CSS）

设置透明边框
border: 2px solid transparent;

添加阴影、元素缩放（CSS）

1
2
box-shadow: 0 0 3px rgba(0,0,0,0.5);
transform: scale(1.2);

图片使用flex布局后拉伸解决

1
2
3
4
.images{
	display: flex;
	align-items: flex-start;
}

设置变形过度时间

transition: all 0.2s;

offset()

可以阻止浏览器合并前后两个紧挨的事件。

1
2
3
4
5
6
7
$slides.css({transform:'translateX(-1600px)'})
	.one('transitionend', function(){
	$slides.hide()
		.offset()
	$slides.css({transform:'translateX(-400px)'})
		.show()
}

上述代码如果直接写，浏览器会忽略掉.hide()，中间加offset()则可以实现CSS 的先隐藏后显示。

解决触屏设备上页面整体跟着手指滑动（未解决）

禁掉页面的滚动条即可

1
2
3
body {
    overflow: hidden;
}

保存canvas图片到本地

1
2
3
4
5
6
7
8
9
downLoad.onclick = function () {
    var url = canvas.toDataURL('image/png')
    var a = document.createElement('a')
    document.body.appendChild(a)
    a.href = url
    a.download = 'myPicture'
    a.target = '_blank'
    a.click()
}

浮动元素内文本不换行

1
2
3
.topNavBar .subMenu > li {
    white-space: nowrap;    
}

判断节点类型 MDN

nodeType 属性可用来区分不同类型的节点，比如 元素, 文本 和 注释。
语法

1
var type = node.nodeType;

常用：
Node.ELEMENT_NODE 一个 元素 节点，例如 \<p> 和 \<div>。
Node.TEXT_NODE Element 或者 Attr 中实际的文字

获取标签中href的两种方式

x 为监听到到的事件，a = x.currentTarget

  1. a.href 获取到的地址是带有 http 协议以及域名的地址（浏览器处理过的）。
  2. a.getAttribute('href') 获取直接地址。

页面元素距离页面（窗口）顶端的数值

  1. element.offsetTop 距离页面顶端的举例，数值这个是常量
    1
    2
    let rect = element.getBoundingClientRect()
    rect.top //举例当前视窗顶端的举例，这是个会随窗口滚动变化的变量。

页面内滚动到指定元素

  1. 设置锚点，但是窗口顶部如果有跟随浮动元素，会有遮挡。
  2. 精确滚动到某个位置，可以解决锚点方法存在的问题。 
    1
    2
    3
    4
    5
    6
    7
    aTags[i].onclick = function(event) {
        event.preventDefault()
        let a = event.currentTarget
        let href = a.getAttribute('href')
        let element = document.querySelector(href)
        let top = element.offsetTop
        window.scroll(0, top - 80) //80为浮动窗口的高度

目前已知常用 API

  1. setTimeout：计时器
  2. window.onscroll：监听屏幕滚动事件。
  3. window.scrollY：获取窗口滚动高度。
  4. documen.querySelecorAll(‘选择器’)：接受一个选择器，返回选择器对应的所有元素，获取到的内容是一个数组
  5. documen.querySelecor：获取第一个元素。
  6. element.onmouseenter：当鼠标进入一个元素会触发一个事件。
  7. element.onmouseleave：当鼠标离开一个元素会触发一个事件。
  8. event.preventDefault：阻止一个事件的默认事件。
  9. event.currentTarget：返回绑定事件的元素。
  10. event.target：返回触发事件的元素
  11. a.getAttribute(‘href’)：获取用户在标签上写的原文。
  12. a.href：获取浏览器处理过的的带有 http 协议以及域名的地址。
  13. window.scrollTo(x, y)：滚动页面到某个位置。
  14. element.offsetTop：获取元素举例页面顶端的位置（常量）。

tween.js库

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.3.0/Tween.js"></script> //cdnjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function animate(time) {
    requestAnimationFrame(animate)
    TWEEN.update(time)
}
requestAnimationFrame(animate)

var coords = {y: 0 }
var tween = new TWEEN.Tween(coords)
        .to({y: 200 }, 1000)
        .easing(TWEEN.Easing.Quadratic.InOut) 
        .onUpdate(function() { 
				
        })
        .start()

函数节流

1
2
3
4
5
6
7
8
9
10
11
12
13
var fn = function() {}
var cd = false
button.onclick = function() {
	if(!cd) {
	 //cd 中
	} else {
		fn()
		cd = true
 		var timerId = setTimeout(() => {
			cd = false
		},3000)		
	}
}

函数防抖

1
2
3
4
5
6
7
8
9
10
11
var fn = function() {}
var timerId = null
button.onclick = function(){
	if(timerId) {
		window.clearTimeout(timerId)
	}
	timeId = setTimeout(() => {
	fn()
	timerId = null
	},5000)
}

AJAX

1
2
3
4
5
6
7
8
9
10
11
12
var request = new XMLHttpRequest()
request.open('GET', '/XXXX')
request.readystatechange = function() {
	if(request.readyState === 4) {
	console.log('请求完成')
		if(request.response.status >= 200 && request.response.status < 300) {
			console.log('请求成功')
		}else{
			}
	}
}
request.send()

this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//1 fn()
this => window

//2 obj.fn()
this => obj

//3 fn.call(xx)
this => xx

//4 fn.apply(xx)
this => xx

//5 fn.bind(xx)
this => xx

//6 new Fn()
this => 新的对象

//7 fn = () => {}
this => 外边的对象

深拷贝

  1. 递归
  2. 判断类型
  3. 检查循环引用（环）
  4. 不可能拷贝原型 __proto__（浪费内存）

正则实现 tirm()

1
2
3
var trim = function() {
	return string.replace(/^\s+|\s+$/g, '')
}

数组去重

  1. hash
  2. set
  3. WeakMap

从 10 - 100 中取 10 个随机数组成数组

1
2
3
4
5
6
7
8
9
10
11
const randomArr = (a, b) => {
    let arr = []
    a = Math.min(a)
    b = Math.max(b)

    for (let i = 0; i < 10; i++) {
        let n = Math.random() * (b - a) + a
        let num = Math.ceil(n)
        arr.push(num)
    }
}

样式分离

HTML：内容
CSS：样式
JS：行为
如果不样式分离，会使代码杂乱无章，不好区分代码的逻辑结构，也不容易维护。

阻止事件冒泡

1
event.stopPropagation()

在冒泡过程中，可以向上级元素添加事件。（常见bug）

1
2
3
4
5
6
7
8
9
10
$(button).on('click', function() {
  console.log('1')
  $(popover).show()
  $(document).one('click', function() {
     console.log('2')
    $(popover).hide()
  })
})
//1
//2

上边代码中，在点击button按钮时，第二个ciick事件会在点击的一瞬间添加到document元素上，同时因为浏览器默认事件冒泡，第二个事件会在第一个事件执行完毕后立即执行（几乎没有间隔）。

解决方法之一：setTimeout(fn(){},0)

1
2
3
4
5
6
7
8
9
$(clicked).on('click', function() {
  console.log('1')
  $(popover).show()
  setTimeout(function(){
    $(document).one('click', function() {
      $(popover).hide()
    })
  },0)
})