前端第27次总结-节点、快捷尺寸、获取样式的方法、键盘事件、面向对象、原型、原型链、安全类、内置的构造函、继承、BOM、Git、touch事件、动画、zepto、touch

前端第27次总结-

节点

快捷尺寸

1、元素：
	clientWidth|Height	内容宽高
	offsetWidth|Height	+padding宽高
	clientLeft|Top		border的宽高
2、jq
	Width|Height	内容宽高
	innerWidth|innerHeight	带padding宽高
	outerWidth|outerHeight	带border宽高
	outerWidth|outerHeight（true）	带margin
3、定位元素
	offsetParent	定位父元素
	parentNode		父元素
	offsetLeft|Top	相对于定位父元素的左上距离
4、jq
	offset（）		距离整个页面的左上
	position（）	距离定位父元素的左上距离
	scrollTop/Left()	卷动
事件对象的属性
5、事件对象的属性
	clientX|Y		视口
	screenX|Y		屏幕
	pageX|Y			页面
	layerX|Y		和page相同
	offsetX|Y		定位父元素
	scrollX|Y		卷动值
scrollTop、scrollLeft都是css方法，滚动条进行位移

获取样式的方法

1、非行间式
	getComputedStyle	和	currentStyle
2、行间式
	box1.style.XXX
3、get/setAttribute（'style', 'borderRadius:20px'）;
4、实现getStyle方法

键盘事件

	onkeydown	键盘放下
	onkeyup		键盘弹起
	onkeypress	字符输入
	tabindex属性，获取离开焦点。focus/blur
事件对象e.key  或者 keyCode

面向对象

普通函数为了实现某一种功能、构造函数为了创建对象。
构造函数new关键字进行调用，函数名、类名首字母大写。
构造函数4步骤：
	开辟空间、改变this指向、执行代码为this赋值、返回this
优点：
	防止全局变量被污染
	复用属性名称和方法
定义类：可以区分类别（人/狗）
	构造函数加原型
简单工厂模式：
	createPerson 函数返回了一个对象，这种创建对象的方法就称之为工厂模式。

原型：

特点：
	1、	定义同名方法时，构造函数里面的优先
	2、constructor属性，代表构造函数
	3、for in循环遍历实例，   hasOwnProperty  判断属性是自己的还是原型的。
	4、instanceof 会查询整条原型链

原型链

安全类

// 安全类   防止this指向全局，污染全局变量
    // 无论怎么调用构造函数，都会返回一个对象
    function Dog(name, age) {
        // 判断怎么调用
        if (this instanceof Dog) {
            this.name = name;
            this.age = age;
        } else {
            return new Dog(name,age);
        }
    }

内置的构造函数

Object Array Function String Number Boolean RegExp Error Date

继承

构造函数继承

类继承

组合式继承 每次创建实例会执行一遍父类语句

寄生式继承

BOM对象 以及其下属的各种对象

Git

https://blog.csdn.net/halaoda/article/details/78661334




分支
checkout 是切换分支

touch事件

移动端一般不会使用click事件，原因：
1、click事件慢
2、长时间不抬起鼠标会被取消
3、点击穿透
使用是为了判断双击

动画

zepto

touch

百度地图API

模块化开发

本地存储

JSON.stringify 转为字符串
JSON.parse 转为原类型

会话存储

WebSql

sql语句 学习
https://blog.csdn.net/a88055517/article/details/6736284

history对象

音频

视频

拖拽

服务器 和 HTTP

多线程Worker函数

线程通信

cavas

绘制图片