前端的小技巧与黑科技（干货）
前端的小技巧与黑科技（干货）
前言
面试官：你在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') 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事件。
最后
都看到这里了不点个赞吗？
欢迎大佬们提出建议与想法。
腾讯云开发者
