面试官:你在xx项目中有哪些亮点或是贡献亦或是小技巧?
前言
面试官:你在xx项目中有哪些亮点或是贡献亦或是小技巧?
我:阿巴阿巴
卡!停一下,你是不是也有相同或者类似的经历?实际大部分同学们多数情况下都是在使用vue
或react
去实现业务代码,跟业务代码打交道比较多,每当面试官一问起,还真是说不出一二,如果常规回答的话显得过于平庸,倘若是有一二处亮点,也能让面试官刮目相看让成功几率也能高出不少,搞不准因为这一答薪资也跟着上升了。
自动导入文件
假如有如下的js
文件需要通过index.js
暴露出去,常规做法是一个个引入,但若是更多文件呢?
好家伙,你不会还一个个导入吧?如果你的项目中使用webpack
打包,那么你可以利用webpack
提供的api
require.context
。(没有的话就用node
的api,相对麻烦点)
require.context
是什么?
一个webpack
的api
,通过执行require.context
函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api
,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import
导入模块。
require.context
函数接受三个参数
directory {String} -读取文件的路径
useSubdirectories {Boolean} -是否遍历文件的子目录
regExp {RegExp} -匹配文件的正则
语法: require.context(directory, useSubdirectories = false, regExp = /^.//);
那知道他怎么用的,接下来就开始码起来:
const files = require.context('.', false, /.js$/)
const obj = {}
files.keys().forEach(key => {if (key === './index.js') returnObject.assign(obj, { ...files(key).default })})
export default apiObj
复制代码
通过.
遍历当前目录下所有的js
文件,把除index.js
之后的文件一起暴露出去再引入index
即可。
前端实现搜索功能
前端同学:这不是你后端做的东西吗?我不干。
后端同学:我没时间,你来实现吧!老板加钱!
前端同学:给我五分钟。
以上内容纯属虚构。
言归正传,比如你使用的是vue
实现一个搜索如何做?
首先当然要获取用户输入的内容,根据内容来匹配输出内容。
有思路后开始写:
<template><div>名字:<input v-model='keywords'/><ul><li v-for='(item, key) in search(keywords)' :key='key'>{{ item.name }}</li></ul></div>
</template>
<script>
export default {data() {keywords: '',list: [{ name: '张三', id: 1 },{ name: '法外狂徒', id: 2}]},methods: {search(key) {let newList = []this.list.map(item => {if(item.name.indexof(key) !== -1){newList.push(item)}})return newList}}
}
</script>
复制代码
打开新窗口监听其关闭然后刷新当前页面
产品:我想从这里跳到那里然后回来的时候这里是最新的,晚上火锅。
我:安排。
首先,将window.open
打开的新窗口存到一个变量里,该方法会返回一个对象里面包含closed
属性代表打开页面是否关闭。之后我们再利用定时器监听该属性是否变化,然后刷新当前页面并销毁定时器。
//打开窗口
window.name = "origin";
var windowObjectReference;
var strWindowFeatures = "width=1000,height=500,menubar=yes,location=yes,resizable=yes,scrollbars=true,status=true";
function openRequestedPopup(url) {windowObjectReference = window.open(url, "name", strWindowFeatures);
}
//循环监听
var loop = setInterval(() => {if(windowObjectReference.closed) {clearInterval(loop); //停止定时器location.reload(); //刷新当前页面}
}, 1000);
复制代码
监听storage内的数据
你想监听localstorage
或seesionstorage
内的数据?那你为啥不在框架里监听(如在vue中的watch
等)?
emm。。。我也想,但是前辈留下来的记号太多了。没办法,不然直接watch
或useEffect
都可以直接实现。
行吧,办法总是有的。
首先查阅资料我们了解到StorageEvent
:
当前页面使用的storage
被其他页面修改时会触发StorageEvent
事件。
事件在同一个域下的不同页面之间触发,即在A页面注册了storge
的监听处理,只有在跟A同域名下的B页面操作storage
对象,A页面才会被触发storage
事件。
之后通过initStorageEven
来初始化一个storage
对象,再派发该对象即可。
通过查阅MDN[1]得知参数。
比如监听sessionStorage
:
function setStorage(key, val) {if(key === 'watch') {// 创建一个事件var storageEvent = document.createEvent('storageEvent')}const storage = {setItem: (itKey, itVal) => {sessionStorage.setItem(itKey, itVal)// 初始化事件storageEvent.initStorageEvent('setItem', false, false, itKey, null, itVal, null, null)// 派发对象window.dispatchEvent(storageEvent)}}return storage.setItem(key, val)
}
复制代码
使用方法:在A页面:
setStorage('watch', val)
复制代码
在B页面即可获取:
window.addEventListener('setItem', () => {newVal = sessionStorage.getItem('watch')
})
复制代码
事件在同一个域下的不同页面之间触发,即在A页面注册了storge
的监听处理,只有在跟A同域名下的B页面操作storage
对象,A页面才会被触发storage
事件。
最后
都看到这里了不点个赞吗?
欢迎大佬们提出建议与想法。
关于本文
作者:饼干_
https://juejin.cn/post/6994278510189625351
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
面试官:你在xx项目中有哪些亮点或是贡献亦或是小技巧?相关推荐
- 软件测试面试官让你介绍项目你怎么回答?最全模板来了(包含电商项目、在线教育、互联网金融等)
目录 1.自我介绍 2.项目介绍 2.1.最全电商项目介绍 2.2.电商项目介绍 2.3.在线教育项目介绍 2.4.互联网金融项目介绍 3.总结 4.重点:配套学习资料和视频教学 1.自我介绍 以XX ...
- 面试官要你介绍项目,怎么说?
测试人员在找工作中,基本都会碰到让介绍项目的这种面试题,如何正确介绍自己的项目?需要做哪些技术准备? 今天这篇文章,围绕这些问题,跟大家一起聊一聊. 关于介绍自己的项目? 可以从以下几个方面来表述: ...
- 面试官:你做过什么有亮点的项目吗?
前言 面试中除了问常见的算法网络基础,和一些八股文手写体之外,经常出现的一个问题就是,你做过什么项目吗? 面试官其实是想看看你做过什么有亮点的项目, 其实大家日常做的项目都差不多,增删改查,登录注册, ...
- 作为字节跳动面试官,这篇文章可以满足你80%日常工作!附小技巧
前言 下面的题目都是楼主在Android交流群大家在面试字节跳动时遇到的,如果大家有好的题目或者好的见解欢迎分享,楼主将长期维护此帖. 参考解析:郭霖.鸿洋.玉刚.极客时间.腾讯课堂- 内容特点:条理 ...
- 面试中所谈的项目中的亮点
前言 我是从18年11月份入职的,一直做的是Java开发,起初和大部分人一样都是CRUD,直到去年年底一个小项目让我做了技术经理,虽然我在项目上受到了比较大的打击(做己方的话如果真的遇到一个很难对付的 ...
- 面试官:看你项目中用到了Hystrix,具体有什么用?
为什么需要hystrix Hystrix同样是netfix公司在分布式系统中的贡献.同样的也进入的不维护阶段.不维护不代表被淘汰.只能说明推陈出新技术在不断迭代.曾经的辉煌曾经的设计还是值得我们去学习 ...
- 面试官问:你们项目中用Redis来干什么?
你好,我是田哥 面试中,被问到Redis问题的概率非常高,如果问一些理论性的问题,相信你只要背背八股文就能搞定,但,如果结合项目来问就没那么好对付了. 这里给你推荐一个在线刷java面试题的神器: w ...
- java后端简历项目经历_从面试官甄别项目经验的角度,说说如何在简历中写项目经验(Java后端方向)...
在大多的JD(职位介绍)里,会写明该职位需要xx时间的相关经验,换句话说就是需要在简历中看到一定年限的相关商业项目经验,否则估计连面试的机会都没. 在本文里,不讨论这种门槛是否合理,而会以Java相关 ...
- 你的GitHub爆款项目,面试官可能问都不问
选自towardsdatascience 作者:Haebichan Jung 参与:Panda W.张倩 简历上写了一堆成功的项目,在面试官那儿真的管用吗?过来人表示:未必.近日,Towards Da ...
最新文章
- 用CSS写出一个下拉菜单小箭头
- 同步阻塞处理的几种方法
- 资产配置决策系统的MATLAB实现
- idea的logback的getter和setter方法失效
- 在欲而无欲,居尘不染尘
- 双链表嵌套的简单学生信息管理系统
- Java-进阶:多线程2
- 03|复杂度分析(上):如何分析、统计算法的执行效率和资源消耗?
- java语言怎么建立窗口awt,java.awt.Frame类:创建窗口
- C++|STL学习笔记-对STL中关联容器map的进一步认识
- DataBinding 学习系列(3)新增的可见字段来编写对象(bean)
- 探讨下Tag标签的数据库设计(千万级数据量) 转
- 2014年天津市第一批科技计划项目
- VCIP2020:SCC编码工具的优化实现
- 【语义分割数据集】——cityscape数据集类别名称
- 计算机英特尔显卡在哪找,英特尔®显卡和 Windows 7 * 常见问题解答
- CSS样式网页导航条
- python画人脸编程怎么写_如何在Python(GUI)中绘制人脸
- HEU Monkey CC
- html怎样分级显示,小技巧之分级显示详解
热门文章
- 盛极而衰:回顾 Netscape Navigator 浏览器的一生
- Netscape浏览器
- promethues+alertmanager+grafana监控mysql和报警—详细文档
- 第一块能鸿蒙OpenHarmony标准系统的开发板——DAYU200
- web前端基础——第一章
- 手机处理器天梯_手机处理器性能天梯图(SOC天梯图)
- 值得推荐的51.com产品设计实践(值得所有产品经理参考)
- Ubuntu系统上轻松截图的几种方法介绍
- java助教面试自我介绍,面试助教用英语自我介绍篇【1】
- 向idea导入包后,idea却不识别java类文件,无法运行