面试官:你在xx项目中有哪些亮点或是贡献亦或是小技巧?

前言
面试官:你在xx项目中有哪些亮点或是贡献亦或是小技巧?
我:阿巴阿巴
卡!停一下 , 你是不是也有相同或者类似的经历?实际大部分同学们多数情况下都是在使用vue或react去实现业务代码 , 跟业务代码打交道比较多 , 每当面试官一问起 , 还真是说不出一二 , 如果常规回答的话显得过于平庸 , 倘若是有一二处亮点 , 也能让面试官刮目相看让成功几率也能高出不少 , 搞不准因为这一答薪资也跟着上升了 。
自动导入文件
假如有如下的js文件需要通过index.js暴露出去 , 常规做法是一个个引入 , 但若是更多文件呢?
image.png
好家伙 , 你不会还一个个导入吧?如果你的项目中使用打包 , 那么你可以利用提供的api . 。(没有的话就用node的api , 相对麻烦点)
.是什么?
一个的api,通过执行.函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用导入模块 。
.函数接受三个参数
{} -读取文件的路径
{} -是否遍历文件的子目录
{} -匹配文件的正则
语法: .(,= false,= /^.//);
那知道他怎么用的 , 接下来就开始码起来:
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实现一个搜索如何做?
首先当然要获取用户输入的内容 , 根据内容来匹配输出内容 。
有思路后开始写:
名字:

  • {{ item.name }}
复制代码
打开新窗口监听其关闭然后刷新当前页面
产品:我想从这里跳到那里然后回来的时候这里是最新的 , 晚上火锅 。
我:安排 。
首先 , 将.open打开的新窗口存到一个变量里 , 该方法会返回一个对象里面包含属性代表打开页面是否关闭 。之后我们再利用定时器监听该属性是否变化 , 然后刷新当前页面并销毁定时器 。
//打开窗口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);复制代码
监听内的数据
你想监听或内的数据?那你为啥不在框架里监听(如在vue中的watch等)?
面试官:你在xx项目中有哪些亮点或是贡献亦或是小技巧?

文章插图
emm 。。。我也想 , 但是前辈留下来的记号太多了 。没办法 , 不然直接watch或都可以直接实现 。