立即执行函数
不需要调用,铁锅炖自己,能立马自己执行
注意:两个立即执行函数写在一起需要加分号 表示结尾
写法
- (function(){})()
第二个小括号可以看作是调用函数
(function(){
console.log(2);
})();
(function(a,b){
console.log(a+b);
})(1,2)//3,可以传递参数
- (function(){}())
(function sum(a,b){//给它一个名字也可以
console.log(a+b);
}(1,2))
立即执行函数最大的作用就是独立创立一个作用域,里面所有的变量都是局部变量,不影响命名冲突。
对于淘宝flexibleJS源码分析的笔记
下面三种情况刷新页面的时候会触发load事件
- ①a标签的超链接
- ②f5或者刷新按钮
- ③前进或者后退按钮
- 在火狐中有一个“往返缓存”,这个缓存不仅保存着页面数据,还保存着DOM和js的状态,实际上将整个页面都保存在了内存里。此时的后退按钮不能刷新页面,但是可以使用pageshow事件来触发,这个事件在页面显示的时候触发,无论页面是否来自缓存,。
- 在重新加载页面中,pageshow会在load事件触发后触发,根据事件对象中的persister来判断是否是缓存中的页面触发的pageshow事件。注意这个事件给window触发
<script>
(function flexible(window,document){
//获取html的根元素
var docE1 = document.documentElement
//dpr物理像素比,在pc端是1,就是先看一下当前浏览器的像素比,如果没有就后面的结果,当1来看
var dpr = window.devicePixelRatio || 1
//adjust body font size 设置body的字体大小
function setBodyFontSize() {
//如果页面中有body 这个元素 就设置body的字体
if(documnet.body) {
document.body.style.fontSize = (12*dpr) + 'px'
} else {
//如果页面中没有body这个元素 等到页面中的主要元素加载完毕后执行此函数 设置字体大小
document.addEventListener('DOMContentLoader',setBodyFontSize)
}
}
setBodyFontSize();
//set 1rm = viewWidth /10 设置html中元素和文字的大小
function setRemUnit() {
//是我们前面已经设定好了的html的宽度/10,相当于把元素划分成为十等分
var rem = docEl.clientWidth/10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
//reset rem unit on page resize 当我们页面尺寸大小发生变化的时候,重新设置了以下rem的大小
window.addEventListener('resize',setRemUnit)
//pageshow是我们重新加载页面的时候会触发的事件,比onload更兼容
window.addEventListener('pageshow',function(e){
//e.persisted返回的是true,就是说如果这个页面是从缓存取过来的页面,也要重新己算rem的大小
if (e.persisted){
setRemUnit()
}
})
}(window,document)) //把这两个参数传入,我们的立即执行函数就可以使用这两个函数了