Fe Interview Czbk

本文是根据多份关于web前端面试试题抽取的企业面试时用到最多的一些试题,仅供参考。 web前端高频面试试题含答案 - 传智播客 怎么去设计一个组件封装? 组件封装的目的是为了重用,提高开发效率和代码质量  2.低耦合,单一职责,可复用性,可维护性  3.前端组件化设计思路 js 异步加载的方式 渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染 defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中出现的顺序加载,多个async 脚本不能保证加载顺序 加载 es6模块的时候设置 type=module,异步加载不会造成阻塞浏览器,页面渲染完再执行,可以同时加上async属性,异步执行脚本(利用顶层的this等于undefined这个语法点,可以侦测当前代码是否在 ES6 模块之中) css 动画和 js 动画的差异 代码复杂度,js 动画代码相对复杂一些 动画运行时,对动画的控制程度上,js 能够让动画,暂停,取消,终止,css动画不能添加事件 动画性能看,js 动画多了一个js 解析的过程,性能不如 css 动画好 XSS 与 CSRF 两种跨站攻击 xss 跨站脚本攻击,主要是前端层面的,用户在输入层面插入攻击脚本,改变页面的显示,或则窃取网站 cookie,预防方法:不相信用户的所有操作,对用户输入进行一个转义,不允许 js 对 cookie 的读写 csrf 跨站请求伪造,以你的名义,发送恶意请求,通过 cookie 加参数等形式过滤 我们没法彻底杜绝攻击,只能提高攻击门槛

Continue reading

读书笔记-心理学 1 章:积极情绪与幸福感 积极情绪的扩展-建构模型: - 激活一般的行动倾向 - 扩展即时的思维-行动空间 - 构建个人发展资源:身体、智力、人际、心理资源。 情感-认知-行为循环 情绪的情感性:体验积极情绪和消极情绪的一般倾向是相对稳定的。 情感强度:体验到某种情感的力量或者强度。高情感强度的人容易反应过度 高、低情感强度的人在测量快乐和幸福感时的得分是一样的。 《情绪强度测量》《积极与消极情感清单》 人们不善于预测什么带来幸福。 构成美好生活的六个核心维度: - 自我接纳:即使认识到自身的局限人们也试图对自己感觉良好 - 积极关系:形成并维持一种温暖而信任的人际关系 - 环境控制:控制周围的环境以满足自身的需要和愿望 - 自主性:在更大的社会背景下保持自我决定和个人自主性 - 生活目标:发现个人所为之奋斗的目标的意义 - 个人成长:使自己大多数的潜能得到实现 真实的幸福: - 快乐主义理论:幸福是一种原始的主观体验,幸福的生活就是最大化快乐,最小化痛苦 - 需求满足理论:需求得到满足的状态 - 目标清单理论:追求真正有价值的事物来实现自己的幸福生活 幸福的测量: “杜乡微笑”:脸颊鼓起,眼角出现皱纹以及嘴巴微翘 生理记录测量:心率;脑区活动 自我报告测量:生活满意度量表 影响因素及其提升: 人口统计学变量与幸福感: - 性别:男女在幸福感上没有明显差异 - 年龄:大多数人会随着年龄增长变得更成熟 - 教育:低收入水平国家受教育水平和幸福感正相关。教育本身的对快乐的影响微乎其微 - 婚姻:婚姻可以使一些人的幸福感出现长期性的增长 - 健康:主观健康感受比可观(实际)的健康状况更重要 - 财富:财富不能保证幸福,但是贫穷一般会带来不幸 - 人格:外向性和神经质能预测人们生活中积极和消极情绪的数量,能很好解释主观幸福感 幸福感的提升: 幸福感=基点+生活情境+意志活动,基点和生活情境不易改变,但是意志活动比较容易改善: - 良好的关系:良好的人际关系对于幸福感的影响超出我们的想象。彼此促进。 建议:1.制定能够与家庭保持亲密接触的生活计划。2.结交几个要好的朋友。3.与熟人合作而非竞争。4.扩大社交圈(多微笑) - 喜爱的工作:工作满意度和幸福感有中上程度的相关性 - 目标与意义:幸福的人更可能有一个明确的人生目标。人的基本动机就是追求卓越。为财富而奋斗的人,幸福感常常偏低 (认识到持久的幸福并不是来自财富上的成功;重视亲密的人际关系;设定目标,努力向前;从事有意义和有成果的工作; 将自己的工作和生活的目标与他人、社会联系起来) - 运动和锻炼:长期的锻炼能让人产生更强的幸福感 - 其他建议:管理好你的时间;关注自我以外的人和事,帮助需要帮助的人;关注当下,投入地生活;表现得快乐;心存感激)

Continue reading

不少人都有拖延的毛病,考试临时抱佛脚,作业放到最后一晚做,项目延期等等。拖延不光是时间管理的问题,也不仅仅是习惯的问题,它涉及到人深层次的内心世界,所以改变起来有一定困难。

《拖延心理学》

拖延的根源

  • 拖延的情绪根源涉及内心感受、恐惧、希望、记忆、梦想、怀疑以及压力。但是很多拖延者并不能识别所有这些活跃于表面现象之下的情绪波动,因为他们利用拖延来逃避不舒服的感受。
  • 拖延的生物根源包括你的身体、大脑以及你的遗传基因。在你大脑中发生的事情,会影响到你会回避什么样的感受,而你所回避的(或者你所没有回避的),会影响到你大脑的结构和功能。因为这种“神经可塑性”,大脑始终在变化,所以你的生物倾向性并不一定会对你的个人发展构成阻碍。
  • 拖延的另一个根源,是拖延者与时间的纠葛。拖延者常常以一种“期望式思维”来看待时间,或者他们常常将时间看做一个需要制服和取胜的对手。这种对待时间的态度激发了更多的拖延。
  • 拖延的人际关系根源,主要指你的家庭背景和社会关系,以及你在当今社会的地位。你在以往的家庭关系中所受到的影响,很可能会在你的生活中延续下去,并可能在维护你的拖延倾向中起到了一定的作用。对自己在社会角色和文化角色上的忧虑或许也是构成你拖延习性的一个因素,要知道,它会影响到你的自我感觉以及人际关系。

Continue reading

VSCode Extensions

自用 VSCode 插件 - 持续更新 Settings Sync 编辑器设置同步(到github),包括插件,配置等。 Vue 插件 Vetur 目前 VSCode 上面最好用的 Vue 插件。能够实现在 .vue 文件中: 语法错误检查,包括 CSS/SCSS/LESS/Javascript/TypeScript 语法高亮,包括 html/jade/pug css/sass/scss/less/stylus js/ts emmet 支持 代码自动补全(目前还是初级阶段),包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript 配合 ESLint 插件食用效果更佳。 Vue VSCode Snippets Vue语法片段, 增强您的 Vue 工作流程 VueHelper 另一款 Vue 语法片段 Import Cost 引入包大小计算, 对于项目打包后体积掌握很有帮助 代码格式化 AutoFileName // Auto Close Tag // Auto Rename Tag

Continue reading

JS Snippets

一些常用的代码块, JS Snippets // isObject function isObject (obj) { return obj !== null && typeof obj === 'object' } // 判断数据是数字,可能类型是string,但是'123'也算数字 function isNumber(value) { return !isNaN(Number(value)); } // isEmpty const isEmpty = value => { return value === undefined || value === null || (typeof value === "object" && Object.keys(value).length === 0) || (typeof value === "string" && value.trim().length === 0) } ↑ Back to Top 如何判断一个对象是否为数组 如果浏览器支持 Array.

Continue reading

CSS Snippets

一些常用的 CSS 代码块, CSS Snippets 45个值得收藏的 CSS 形状 /* 像素心: box-shadow */ .pxheart { position: absolute; left: 50%; top: 50%; width: 105px; height: 105px; margin: -52.5px 0 0 -52.5px; } .pxheart::before { content: ''; display: block; transition: all 400ms; width: 15px; height: 15px; margin: -15px 0 0 -15px; box-shadow: 30px 15px #8e1a19, 45px 15px #ac0500, 75px 15px #f73f0c, 90px 15px #fa5f27, 15px 30px #740100, 30px 30px #8e0500, 45px 30px #8e1918, 60px 30px #ca1300, 75px 30px #f34f2b, 90px 30px #df351f, 105px 30px #f77c2a, 15px 45px #4b0000, 30px 45px #690100, 45px 45px #8e0f0b, 60px 45px #bf1000, 75px 45px #f84010, 90px 45px #f04222, 105px 45px #fa5724, 15px 60px #451312, 30px 60px #5a0100, 45px 60px #840e0c, 60px 60px #a51d1a, 75px 60px #ed2805, 90px 60px #d9321e, 105px 60px #f44622, 30px 75px #3b0000, 45px 75px #5d1a1b, 60px 75px #8e1a19, 75px 75px #a80700, 90px 75px #b90a00, 45px 90px #3d0000, 60px 90px #551415, 75px 90px #670100, 60px 105px #340000; animation: pulse 1.

Continue reading

Author's picture

xn213

余生 倾尽天下

FE

Peking