- 博客(51)
- 收藏
- 关注
RSS订阅原创 promise与async、await
promise是一个容器new Promise((resolve,reject) => {});Promise对象特点和三个状态：对象的状态不受外界影响一旦状态改变，就会被凝固pending、Fulfilled、Rejectednew Promise的时候里面内容会立即执行 ，为了实现调用时执行，Promise一般都是作为函数的返回值resolve接收正确结果，导入th...
2019-11-07 16:04:35
130
原创 flex布局
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效容器的属性（父元素container）flex-direction:控制主轴方向flex-direction: row;flex-direction: row-reverse ;flex-direction: column;flex-direction: column-reverse;...
2019-10-31 17:17:28
86
原创 盒子垂直居中
第一种display:flex;justify-content:center;align-items:center;第二种position:absolute;top:50%;left:50%;transform: translate(-50%, -50%); 第三种position: absolute; top:50%; left: 50%;margin-top:...
2019-10-31 16:45:19
64
原创 链表
链表中的元素在内存中不必是连续的空间链表的每个元素由一个存储元素本身的节点和一个指向下个元素的引用组成链表的常见操作append(element):向链表的尾部添加新的元素insert(positon,element)：向链表的特定位置添加元素get(position)：获取对应为位置的元素indexOf(element)：返回元素在链表中的索引，没有则返回-1update(posi...
2019-10-24 23:06:49
63
原创 栈结构
栈的常见操作push(ele)：添加一个新元素到栈顶位置pop()：移除栈顶元素，同时返回被移除的元素peek()：返回栈顶元素，不对栈做任何修改isEmpty()：判断栈是否为空，返回布尔值size()：返回栈里元素的个数toString()：将栈结构的内容以字符形式返回实现栈结构：基于数组//栈的封装function Stack(){ this.items = []...
2019-10-23 22:42:45
58
原创 队列
先进先出 前端删除，后端插入队列的常见操作enqueue(ele) : 向队列尾部添加一个或多个选项dequeue()：移除队列第一项，并返回被移除的元素front()：返回队列中第一个元素–最先被添加的，也是最被删除的。队列不做任何变动。isEmpty()：判断队列是否为空size()：返回队列包含元素的个数toString()：将队列中的内容转成字符串形式队列的实现方式...
2019-10-23 22:42:38
52
原创 优先级队列
实现优先级队列封装元素和优先级放在一起（可以封装一个新的构造函数）添加元素时，将新插入元素的优先级和队列中已经存在的元素优先级进行比较，以获得自己正确的位置//实现优先级队列function PriorityQueue(){ function QueueElement(element,priority){ this.elemennt = element; ...
2019-10-23 22:42:30
62
原创 http协议
HTTP请求信息和响应信息格式请求：1.请求行1.1请求方法：GET POST HEAD DELETE PUT TRACE OPTIONS1.2请求路径:1.3所用协议2.请求头3.请求主体信息头信息结束后有一个空行，以空行区分头信息和主体信息，即使没有头信息，也不能没有空行。响应：1.响应行1.1协议版本：1.2状态码:1.3状态文字2.响应头ke...
2019-10-23 15:35:18
80
原创 正则表达式
作用：匹配特殊字符串或有特殊搭配原则的字符串创建方式：字面量 var reg = /abc/m;var reg = new RegExp(“abc”,“m”);var reg = RegExp(reg);i 忽略大小写g 全局匹配m 多行文本匹配reg.test() 返回true or falsestr.match表达式[ ] ...
2019-10-22 23:53:47
39
原创 异步加载js
defer异步加载 ,等dom文档解析（domTree生成）完成才会被执行，只有IE有，执行时不阻塞页面async异步加载，加载完就执行，只能加载外部脚本，执行时不阻塞页面创建script，插入到DOM中，加载完毕callbackvar script = document.createElement('script')script.type = "text/javascript";s...
2019-10-22 11:52:28
53
原创 json
json是一种传输数据的格式JSON.parse(); string —>jsonJSON.stringify(); json ---->stringdomTree + cssTree = renderTreereflow 重排 ：dom节点的删除，添加，宽高变化，位置变化，display：none---->blockoffsetWidth,offsetLeft(重...
2019-10-22 11:52:15
53
原创 js加载时间线
创建Document对象，开始解析Web页面。遇到link外部css，创建线程加载，并继续解析文档遇到Script外部JS，并且没有设置async.defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档遇到Script外部JS，并且设置async.defer，浏览器创建线程加载，并继续解析文档（禁止使用document.write()）遇到img等先正常解析dom...
2019-10-22 11:52:06
44
原创 其他事件
input //输入框内容改变时触发change //状态改变触发、focus //聚焦blur //失焦scroll //滚动时触发,windowload //window
2019-10-22 11:51:44
97
原创 键盘事件
keydown keyup keypress触发顺序：keydownkeypresskeyupkeydown和keypress区别keydown可以响应任意键盘按键，keypress只可以响应字符类键盘按键keypress返回ASCll码，可以转换成相应字符...
2019-10-21 20:54:55
45
原创 鼠标事件
触发顺序：mousedown 按下mouseup 弹起click 点击contextmenu 右键产生菜单事件mousemove 移动mouseover 进入mouseout 离开mouseenter 进入mouseleave 离开事件对象的button属性：0 ------>左键1 ---...
2019-10-21 20:29:14
63
原创 鼠标拖曳
var div = document.getElementByTagName('div')[0]var disX, disY;div.onmousedown = function(e){ disX = e.pageX - parseInt(div.style.left); disY = e.pageY - parseInt(div.style.top); doc...
2019-10-21 20:06:02
78
原创 事件对象，事件委托
event ||window.event//事件源对象event.target //火狐只有这个event.srcElement //IE只有这个事件委托利用冒泡事件和事件源对象进行处理优点：1.性能，不需要循环所有子元素一个个绑定事件2.灵活， 当有新的子元素时不需要重新绑定事件var li = document.getElem...
2019-10-21 19:14:35
55
原创 事件处理模型
事件冒泡结构上嵌套关系的元素会存在事件冒泡功能，即同一事件，自子元素冒泡向父元素。（自底向上)事件捕获结构上嵌套关系的元素会存在事件捕获功能，即同一事件，自父元素捕获至子元素。（自顶向下）false—>事件冒泡true----->事件捕获一个事件绑定两个事件处理函数，分别捕获和冒泡模型，先捕获再冒泡focus,blur,change,submit,reset,sele...
2019-10-21 18:32:08
76
原创 事件绑定与解除
ele.onclick = function (event){} //一个元素的同一个事件只能绑定一个处理函数，基本等同于写在行间，句柄，this指向dom元素本身obj.addEventListener(type,fn,false); //type-事件类型，fn-处理函数，一个事件可以绑定多个处理函数，IE9以下不兼容，this指向dom元素本身obj.attachEvent('o...
2019-10-21 17:34:07
112
原创 脚本化CSS
dom.style.prop //读写行间样式，float-->cssFloat，复合属性建议拆解，组合单词变成小驼峰window.getComputedStyle(ele,null)[prop]; //获取最终显示的样式，只读，相对值计算成绝对值显示，IE8及以下不兼容window.getComputedStyle(div,after).width //获取伪元素...
2019-10-21 16:36:04
39
原创 查看元素几何尺寸
div.getBoundingClientRect();//返回ClientRect{ bottom: ; //left和top代表该元素左上角的X和Y坐标，right和bottom代表该元素右下角的X和Y坐标，返回的结果不实时 height: ; left: ; right: ; top: ; widt...
2019-10-21 14:41:48
130
原创 可视区窗口尺寸
window.innerWidth/window.innerHeight //IE8及以下不兼容document.documentElement.clientWidth/Height //标准模式document.body.clientWidth/Height //非标准模式//封装兼容函数function getViewportOffset(){ if...
2019-10-21 14:00:05
145
原创 滚动条
window.pageXOffset/window.pageYOffset //横向/纵向滚动条长度，IE8及以下不兼容document.body.scrollLeft/Top+document.documentElement.scrollLeft/Top//封装兼容性方法function getScrollOffset() { if(window.pageXOffset) {...
2019-10-21 13:38:10
38
原创 定时器
//setIntervalvar time = 1000; //无法重新赋值，毫秒var timer = setInterval(function () { //计算时间不准，基于红黑树 console.log('a');} ,time); //每隔time时间执行一次函数,返回一个数字作为它的唯一标识clearInterval(timer) //清除定时器...
2019-10-21 13:19:29
54
原创 日期对象
var date = new Date();date.getDate() //返回一个月的某一天（1-31） date.getDay() //返回一周的某一天（0-6）date.getFullYear() //返回四位数的年份date.getMonth() //返回月份date.getHours() //返回小时（0-23）date.getMin...
2019-10-21 12:47:13
43
原创 封装insertAfter
Element.prototype.insertAfter = function (targetNode,afterNode){ var beforeNode = afterNode.nextElmentSibling; if(beforeNode){ this.appendChild(targetNode); }else{ this.insertBefo...
2019-10-21 00:10:58
48
原创 dom基本操作
document --->HTMLDocument.prototype --->Document.prototype//封装Children方法Element.prototype.Mychildren = function(){ var child = this.childNodes; var len = child.length; var arr =...
2019-10-20 23:56:27
47
原创 dom基本操作
document --->HTMLDocument.prototype --->Document.prototype//封装Children方法Element.prototype.Mychildren = function(){ var child = this.childNodes; var len = child.length; var arr =...
2019-10-20 23:55:04
70
原创 dom选择器，节点
DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作HTML和XML功能的一类对象的集合。也有人称DOM是对HTML和XML的标准编程接口document //整个文档，html是文档的根标签document.getElementById('') //IE8以下不区分大小写，可匹配namedocument.getEle...
2019-10-20 22:19:57
55
原创 ES5.0的严格模式
"use strict" //向后兼容不支持with ,arguments.callee,func.caller变量赋值前必需声明局部的this必须被赋值（Person.call(null/undefined)），赋值什么就是什么（预编译的this不再是window）拒绝重复属性和参数...
2019-10-20 13:53:58
65
原创 ｔｒｙ．．．ｃａｔｃｈ
try{ //try里面发生错误，不会执行错误后的try里面的代码，跳转执行catch}catch(e){ //e为对象，包含e.name,e.message}报错类型：EvalError ： eval() 的使用与定义不一致RangeError ：数值越界ReferenceError ： 非法或不能识别的引用数值SyntaxError ： 发生语法解析错误Typ...
2019-10-20 13:27:39
49
原创 数组去重
Array.prototype.unique = function () { var temp = {}, arr = [], len = this.length; for (var i = 0; i<len; i ++) ｛ if(!temp[this.[i]]){ temp[this[i]] = "a...
2019-10-19 22:24:06
34
原创 封装type
function (target) { var ret = typeof(target) var template = { "[object Array]" : "array" "[object Object]" : "object" "[object Number]" : "number - object" //包装类 ...
2019-10-19 21:51:40
159
原创 数组
var arr = new Array(长度) //长度应为整数数组的方法改变原数组 arr.push() //在数组的最后一位添加，参数逗号分隔 arr.pop() //删除数组的最后一位,不考虑传参 arr.unshift() //在数组的第一位添加 arr.shfit() //删除数组的第一位 arr.reverse...
2019-10-19 21:29:37
47
原创 克隆
function deepClone () { var target = target || {}, toStr = Object.prototype.toString, arrStr = "[object Array]" ; for(var prop in origin){ if(origin.hasOwnproperty(p...
2019-10-19 19:06:14
54
原创 this的指向
1.函数预编译过程 this ——> window2.全局作用域 this ——> window3.call/applyg 改变 this 的指向，指向第一个参数4.obj.function(); function()里面的 this 指向 obj引用值比较 的是地址，原始值比较的是值...
2019-10-19 18:47:42
37
原创 对象的枚举
for in for(var item in obj){ console.log(obj[item]);}1.obj.hasOwnproperty('属性名') 返回true or false2.'属性名' in obj //包括原型上的属性3.instanceofA instanceof B //A 是不是 B构造函数构造出来的，找A的原型链上有...
2019-10-19 14:43:50
50
原创 圣杯模式
function inherit (Target,Origin) { function F () {}; F.prototype = Oringin.prototype; Target.prototype = new F (); Target.prototype.constructor = Target; Target.prototype.uber = Origin....
2019-10-19 13:37:19
53
原创 call/apply
作用：改变this的指向不同：传参列表不同call 需要把实参按照形参的个数传进去apply 需要传一个 arguments（数组）
2019-10-18 22:11:17
31
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人