匿名函数

87 阅读4分钟

1、*匿名函数:没有名字的函数,有两种用法: 1、自调:只能执行一次,好处:函数中的没有用的变量是会自动释放的,它可以用于代替全局代码写法,两者很相似,都只会执行一次,但是自调会释放没用的东西 (function(){ 操作; })();

2、回调:匿名函数不是自调,就是回调,所以回调函数,我们往往只需要学习如何使用即可
	elem.on事件名=function(){}
	arr.sort(function(){})
	xxx.api(function(){})
	var obj={
		"方法名":function(){}
	}
	一切的回调函数,都可以简化为箭头函数

2、设计模式:不仅仅局限于前端,它是一种编程【思想】,越来越复杂,对于我们前端人来要求也会越来越高! 如果你对设计模式有兴趣,可以去了解一下21种设计模式

1、单例模式:也称之为单体模式,保证一个类仅有一个实例对象创建,并且提供一个访问它的全局访问点:为了三阶段的Vue做准备:new Vue一个页面只写一次/一个!
	现实举例:一个班级只有一个班主任,只有一个太阳,一个国家只有一个主席,"唯一" 便于访问(全局访问的),行为对象变成做单例
	如何实现:
		最简单的单例模式:利用ES6let不允许重复声明的特性,刚好就符合了单例的特点:
			let obj={
				"name":"袍哥1",
				"getName":function(){return this.name},
			}
		不太推荐这种写法:
			1、污染命名空间(容易变量名冲突,会报错)
			2、维护时不易管控(搞不好就直接覆盖了)

		推荐写法:
		var h52302=(function(){
			let state=null;//state=dll
			return function(name,age){
				this.name=name;//dll.name="邓灵力"
				this.age=age;//dll.age=18
				if(state){//dll->{} -> true
					return state;
				}
				return state=this;
			}
		})();
		
		h52302.prototype.sayHello=function(){
			console.log(this.name);
		}
		
		var dll=new h52302("邓灵力",18);
		var wr=new h52302("王锐",19);
		
		console.log(dll);
		dll.sayHello();
		
		console.log(wr);//其实还是return了dll
		wr.sayHello();
			
2、观察者模式:也有人称呼叫做发布订阅模式:为三阶段vue的bus总监用到的底层原理就是我们的发布订阅模式
	现实举例:QQ空间,朋友圈,微博...
		let obj={};
		
		//创建订阅者
		function on(id,fn){
			if(!obj[id]){//判断有没有此id(有没有这个人),没有我就创建了一个空数组
				obj[id]=[];//obj["袍哥"]=[]
			}
			obj[id].push(fn);//obj["袍哥"]=[(msg)=>{console.log("小胡来了",msg)},(msg)=>{console.log("小罗来了",msg)},(msg)=>{console.log("小向来了",msg)}]
		}
		
		on("袍哥",(msg)=>{console.log("小胡来了",msg)})
		on("袍哥",(msg)=>{console.log("小罗来了",msg)})
		on("袍哥",(msg)=>{console.log("小向来了",msg)})
		on("袍哥",(msg)=>{console.log("小张来了",msg)})
		on("袍哥",(msg)=>{console.log("小王来了",msg)})
		on("袍哥",(msg)=>{console.log("小李来了",msg)})
		
		//发布者的操作
		function emit(id,msg){//id="袍哥"
			obj[id].forEach(fn=>fn(msg));//obj["袍哥"].forEach(fn=>fn("一支穿云箭"))
		}
		
		btn.onclick=()=>{
			emit("袍哥","一支穿云箭");
		}
	

3、*事件轮询:js其实是单线程应用,代码必须是从上向下执行的,一步一步执行的,如果某一块代码非常耗时,可能会导致整个页面都卡住了,尤其如果你把js放在head之中,会看到页面是一个白板! 1、宏任务:不会再卡住我们的单线程应用,可以让后续代码先走,我们慢慢跟着来,但是问题在于,多个宏任务同时存在,到底谁先执行,谁后执行,分不清楚 1、定时器:setInterval和setTimeout() 2、AJAX:

2、微任务:ES6提供了Promise对象 - 可以控制异步代码,依然是异步代码,但是可以控制执行的顺序了
		function ajax1(resolve){
			setTimeout(()=>{
				console.log(1);
				resolve();//放行函数
			},Math.random()*5000)
		}
		function ajax2(){
			return new Promise(resolve=>{
				setTimeout(()=>{
					console.log(2);
					resolve();
				},Math.random()*5000)
			})
		}
		function ajax3(){
			return new Promise(resolve=>{
				setTimeout(()=>{
					console.log(3);
					resolve();
				},Math.random()*5000)
			})
		}
		new Promise(ajax1).then(ajax2).then(ajax3);
		console.log("后续代码");

html5十大新特性:不单单只是有标签组成。h5其实是一个综合概念 1、新的语义标签(nav header section article aside footer) 2、增强性表单(表单2.0); 3、音频和视频(audio 和 video) 4、Canvas绘图 - 统计图,以前18年的大纲里有它,后来淘汰了(不是他不行,是你们不行,你画出来会很丑),我们数据可视化使用echart.js 5、Svg绘图 - 小图标 6、地图 - 百度/高德 7、拖放API事件 8、web worker 9、web storage 10、web socket