# 前言面试官：你在xx项目中有哪些亮点或是贡献亦或是小技巧？我：阿巴阿巴卡！停一下，你是不是也有相同或者类似的经历？实际大部分同学们多数情况下都是在使用`vue`或`react`去实现业务代码，跟业务代码打交道比较多，每当面试官一问起，还真是说不出一二，如果常规回答的话显得过于平庸，倘若是有一二处亮点，也能让面试官刮目相看让成功几率也能高出不少，搞不准因为这一答薪资也跟着上升了。 # 自动导入文件假如有如下的`js`文件需要通过`index.js`暴露出去，常规做法是一个个引入，但若是更多文件呢？ ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d5a63b81fe44633be7a2a73bf95e6fb~tplv-k3u1fbpfcp-watermark.image) 好家伙，你不会还一个个导入吧？如果你的项目中使用`webpack`打包，那么你可以利用`webpack`提供的`api` `require.context`。（没有的话就用`node`的api，相对麻烦点） `require.context`是什么？一个`webpack`的`api`,通过执行`require.context`函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个`api`,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用`import`导入模块。 `require.context`函数接受三个参数 1. `directory {String} -读取文件的路径` 2. `useSubdirectories {Boolean} -是否遍历文件的子目录` 3. `regExp {RegExp} -匹配文件的正则` 语法: `require.context(directory, useSubdirectories = false, regExp = /^.//);` 那知道他怎么用的，接下来就开始码起来： ```js const files = require.context('.', false, /.js$/) const obj = {} files.keys().forEach(key => { if (key === './index.js') return Object.assign(obj, { ...files(key).default }) }) export default apiObj ``` 通过`.`遍历当前目录下所有的`js`文件，把除`index.js`之后的文件一起暴露出去再引入`index`即可。 # 前端实现搜索功能前端同学：这不是你后端做的东西吗？我不干。后端同学：我没时间，你来实现吧！老板加钱！前端同学：给我五分钟。以上内容纯属虚构。言归正传，比如你使用的是`vue`实现一个搜索如何做？首先当然要获取用户输入的内容，根据内容来匹配输出内容。有思路后开始写： ```js ``` # 打开新窗口监听其关闭然后刷新当前页面产品：我想从这里跳到那里然后回来的时候这里是最新的，晚上火锅。我：安排。首先，将`window.open`打开的新窗口存到一个变量里，该方法会返回一个对象里面包含`closed`属性代表打开页面是否关闭。之后我们再利用定时器监听该属性是否变化，然后刷新当前页面并销毁定时器。 ```js //打开窗口 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](https://developer.mozilla.org/zh-CN/docs/Web/API/StorageEvent)得知参数。比如监听`sessionStorage`: ```js 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页面： ```js setStorage('watch', val) ``` 在B页面即可获取： ```js window.addEventListener('setItem', () => { newVal = sessionStorage.getItem('watch') }) ``` 事件在同一个域下的不同页面之间触发，即在A页面注册了`storge`的监听处理，只有在跟A同域名下的B页面操作`storage`对象，A页面才会被触发`storage`事件。 # 最后都看到这里了不点个赞吗？欢迎大佬们提出建议与想法。