#yyds干货盘点 前端小知识点扫盲笔记记录5
标签： #yyds干货盘点 前端小知识点扫盲笔记记录5 JavaScript博客 51CTO博客
2023-04-07 18:23:54 106浏览
#yyds干货盘点 前端小知识点扫盲笔记记录5，前言我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端巅峰交流群今天继续对前端知识的小结事件委托<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"conten
前言
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群 今天继续对前端知识的小结
事件委托
<!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>总结
我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
暂无评论，快来写一下吧
展开评论
