前端的小技巧与黑科技（干货）

前言

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

我：阿巴阿巴

卡！停一下，你是否是也有相同或者相似的经历？实际大部分同窗们多数状况下都是在使用vue或react去实现业务代码，跟业务代码打交道比较多，每当面试官一问起，还真是说不出一二，若是常规回答的话显得过于平庸，假若是有一二处亮点，也能让面试官另眼相看让成功概率也能高出很多，搞不许由于这一答薪资也跟着上升了。

自动导入文件

假若有以下的js文件须要经过index.js暴露出去，常规作法是一个个引入，但如果更多文件呢？

好家伙，你不会还一个个导入吧？若是你的项目中使用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 = /^.//);

那知道他怎么用的，接下来就开始码起来：

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实现一个搜索如何作？

首先固然要获取用户输入的内容，根据内容来匹配输出内容。

有思路后开始写：

<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得知参数。

好比监听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事件。

最后

都看到这里了不点个赞吗？

欢迎大佬们提出建议与想法。