JS细节知识点（请求头，rem，事件对象，自定义全局变量）(1)

• JS 有个别特性是分浏览器或者手机环境的，根据这个我们可以判断用户使用安卓还是 ios 设备，做指定的处理

rem 布局

---

移动端因为手机的尺寸不同，分辨率也不同，所以单单使用 px 来作为单位处理就会有很多问题，而使用 rem 计算来设置的单位就可以满足在不同尺寸的手机屏幕上显示效果基本是一致的

(function (win, doc) {

if (!win.addEventListener) return;

var html = document.documentElement;

function setFont() {

var cliWidth = html.clientWidth;

html.style.fontSize = 100 * (cliWidth / 750) + “px”;

}

win.addEventListener(“resize”, setFont, false); // false 默认就是false 代表冒泡

setFont();

})(window, document);

// 这样设置之后单位就可以统一使用rem，因为手机如iphone为例宽度一般是375px 因为代码里是/750 所以我们在计算的时候，举例：

// 原型图上宽度为100px 所以转换成rem是 100*2/100 = 2rem

// 原型图上字体大小为16px的时候 转成rem是 16*2/100 = 0.32rem

总结

• 移动端的布局是基本一定要使用 rem 布局的

• 如果是框架开发，如 vue 的话，我们其实可以不用自己写这个立即执行函数，有一些库是可以帮我们封装好的，只需要在 webpack 文件中配置一下

事件参数 event 与使用细节

---

事件参数 event，或者 e，e 是 c#上是使用 e，代表的也就是事件触发的时候产生的句柄

let btn = document.getElementById(‘app’)

btn.onClick = (e)=>{

// 当btn按钮被点击的时候 , 会给函数默认传递一个形参e,是可以直接接收使用的

}

btn.addEventListener(‘click’,(e)=>{

// 当按钮被点击的时候,这种事监听函数也会默认传递一个句柄 e

})

// 第三种方式

function handle(e){

console.log(e) // e不是我们的事件对象 因为这个是通过html绑定函数添加的事件,html中没有给实参,所以函数中也就接收不到形参

console.log(event) // 成功! 可以收到事件对象,就算没有传递,在事件处理函数的内部也是可以正常的接受到这个句柄

}

总结

• 事件对象 event 就算形参没有写实参没有传,在函数内部也是可以直接访问这个对象

• 如果实参没有传,记得形参就不能用这个默认参数 e 来进行接受

自定义全局变量

---

JS 有全局对象 Global,在浏览器中就是 window 对象,window 对象可以理解是 Global 对象的代理

let str = “jimmy”;

window[no_${str}] = “kkkk”;

/*

这样实际上可以创建全局变量.

因为像如果是var关键字,创建的变量会被自动挂载在全局的window对象中,所以我们就可以基于window这个全局对象来创建它的自定义属性,就相当于是我们创建的全局变量

*/

总结

• 这个方法可以为我们创建全局变量,利用的就是 window 全局对象

• 这样虽然可以解决问题,但是在现实开发中最好不好往 window 上挂载属性,因为这个容易会被覆盖,而且也是容易污染全局属性

其他

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！