前言
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群 今天继续对前端知识的小结
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事件委托</title>
</head>
<body>
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
</ul>
<script>
// 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
// ul有一万个li 进行事件绑定
// var itemli = document.getElementsByTagName('li')
// for (var i = 0; i < itemli.length; i++) {
// itemli[i].onclick = (function (n) {
// return function () {
// console.log(n + itemli[n].innerHTML)
// }
// })(i)
// }
var ul = document.querySelector('ul')
ul.onclick = function (e) {
e = e || window.event //这一行及下一行是为兼容IE8及以下版本
var target = e.target || e.srcElement
if (target.tagName.toLowerCase() === 'li') {
var li = this.querySelectorAll('li')
index = Array.prototype.indexOf.call(li, target)
alert(target.innerHTML + index)
}
}
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// alert('点我应有弹框！');
// e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
})
// 点击下面的li变红
</script>
</body>
</html>事件循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件循环</title>
</head>
<body>
<!-- js的事件循环，每次读取一个任务，然后执行这个任务，执行完再继续获取下一个，
如果暂时没有任务，就暂停执行，等待下一个任务到来；如果在执行任务的过程中有新的任务到达
，也不会中断现有任务的执行，而是添加到队列的尾部等待 -->
</body>
</html>从浏览器地址栏输入url
// 1 输入 URL 后解析出协议、主机、端口、路径等信息，并构造一个 HTTP 请求。
// 2强缓存。
// 协商缓存。
// 3DNS 域名解析。（字节面试被虐后，是时候搞懂 DNS 了）
// TCP 连接。
// 4总是要问：为什么需要三次握手，两次不行吗？其实这是由 TCP 的自身特点可靠传输决定的。
// 客户端和服务端要进行可靠传输，那么就需要确认双方的接收和发送能力。第一次握手可以确认客服端的发送能力，
// 第二次握手，确认了服务端的发送能力和接收能力，所以第三次握手才可以确认客户端的接收能力。不然容易出现丢包的现象。
// 5http 请求。
// 6服务器处理请求并返回 HTTP 报文。
// 7浏览器渲染页面。代理模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代理模式</title>
</head>
<body>
<script>
// 先申明一个奶茶妹对象
var TeaAndMilkGirl = function (name) {
this.name = name;
};
// 这是京东ceo先生
var Ceo = function (girl) {
this.girl = girl;
// 送结婚礼物 给奶茶妹
this.sendMarriageRing = function (ring) {
console.log("Hi " + this.girl.name + ", ceo送你一个礼物：" + ring);
}
};
// 京东ceo的经纪人是代理，来代替送
var ProxyObj = function (girl) {
this.girl = girl;
// 经纪人代理送礼物给奶茶妹
this.sendGift = function (gift) {
// 代理模式负责本体对象实例化
(new Ceo(this.girl)).sendMarriageRing(gift);
}
};
// 初始化
var proxy = new ProxyObj(new TeaAndMilkGirl("奶茶妹"));
proxy.sendGift("结婚戒"); // Hi 奶茶妹, ceo送你一个礼物：结婚戒
</script>
</body>
</html>使用代理模式预加载图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用代理模式加载图片</title>
</head>
<body>
<script>
var myImage = (function () {
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
return {
setSrc: function (src) {
imgNode.src = src;
}
}
})();
// 代理模式
var ProxyImage = (function () {
var img = new Image();
img.onload = function () {
myImage.setSrc(this.src);
};
return {
setSrc: function (src) {
myImage.setSrc("http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif");
img.src = src;
}
}
})();
// 调用方式
ProxyImage.setSrc("https://img.alicdn.com/tps/i4/TB1b_neLXXXXXcoXFXXc8PZ9XXX-130-200.png");
</script>
</body>
</html>冒泡排序算法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
function bubbleSort(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = arr.length - 1; j > i; j--) {
if (arr[j] < arr[j - 1]) {
var temp = arr[j]
arr[j] = arr[j - 1]
arr[j - 1] = temp
}
}
}
return arr
}
var arr = [32, 55, 66, 77, 18, 20]
console.log(bubbleSort(arr))
//[18, 20, 32, 55, 66, 77]
</script>
</body>
</html>删除数组中的undefine和null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除数组中的null和undefined</title>
</head>
<body>
<script>
function clearNullArr(arr){
for(var i=0; i<arr.length; i++){
if(!arr[i]||arr[i]==''||arr[i]===undefined){
arr.splice(i, 1);
arr.length--;
i--
}
}
return arr
}
var geyao=["","2","3","5",undefined,null,undefined]
console.log(clearNullArr(geyao))//["2","3","5"]
</script>
</body>
</html>删除数组的制定下标元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除数组的指定下标元素</title>
</head>
<body>
<script>
Array.prototype.del=function(index){
if(isNaN(index)||index>=this.length){
return false;
}
for(var i=0,n=0;i<this.length;i++){
if(this[i]!=this[index]){
this[n++]=this[i];
}
}
this.length-=1;
return this
};
var geyao=["1","2","3"]
console.log(geyao.del(1))//["1","3"]
</script>
</body>
</html>前端this指向问题解决方案apply
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端this指向问题普通函数apply</title>
</head>
<body>
<script>
//口诀 谁调用就会指向谁 这边是普通函数 直接报错this.fang is not a function
var name="geyao"
var fangfang = {
name : "fangfang",
fang: function () {
console.log(this.name)
},
fun: function () {
setTimeout( function () {
this.fang()
}.apply(this,fangfang),100);
}
};
fangfang.fun()//fang
</script>
</body>
</html>总结
我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣