前端的小技巧與黑科技（乾貨）

前言

面試官：你在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事件。

最後

都看到這裏了不點個贊嗎？

歡迎大佬們提出建議與想法。