前端開發中實用的工具方法

基於最近遇到的問題的部分總結，後續遇到的問題解決方法會繼續補充

動態添加css文件

應用場景：

• 換膚功能
• 一套代碼不一樣地區使用，不一樣地區不一樣風格
• 一套代碼不一樣用戶使用，用戶個性化設置功能

那麼如何動態添加不一樣的css文件呢？

/** * @param {String} cssName : css 名稱 不帶後綴 * @param {String} prefix ：css 前綴 */
function dynamicAddCss(cssName,prefix=""){
    let link = document.createElement('link')
    link.setAttribute('href',prefix+cssName+'.css')
    link.setAttribute('type','text/css')
    document.getElementsByTagName('head')[0].appendChild(link)
}
dynamicAddCss('a','http://www.baidu.com/app/a/')
dynamicAddCss('b','http://www.baidu.com/app/b/')
複製代碼

動態添加 js文件

有時候，咱們前端開發中，有些數據文件是存到咱們的服務器上，須要咱們去獲取這個數據再去作一些操做，好比 banner 配置數據，或是一些其餘數據。

服務器上存放的 banner.js

const Config = {
    banner:[
        {img:'www.baidu.com/1.png',id:"1"},
        {img:'www.baidu.com/2.png',id:"2"},
        {img:'www.baidu.com/3.png',id:"3"},
        {img:'www.baidu.com/4.png',id:"4"},
    ]
}
複製代碼

服務器上存放的 json.js

var list = [1,2,3,4,5]
複製代碼

方法：

/** * @param {Array} scriptUrlArr : 需求動態添加的腳本URL數組 * @param {Function} callback : 回調函數 */
function dynamicAddScript(scriptUrlArr,callback){
    scriptUrlArr.forEach(scriptUrl=>{
        let script = document.createElement('script')
        script.setAttribute('src',scriptUrl)
        document.body.appendChild(script) 
    })
    window.onload = function(){
        callback && callback()
    }
}
複製代碼

使用：

dynamicAddScript(['http://moxiaofei.com/banner.js','http://moxiaofei.com/json.js'],() =>{
    console.log(Config)  //{banner: Array(3)}
    console.log(list)    //[1, 2, 3, 4, 5]
})
複製代碼

存在服務器上的數據文件變量，建議用 let 或是 const 聲明，用 var會覆蓋前面腳本中相同變量

localStorage 監聽

• localStorage.setItem監聽：自定義事件 setItemEvent
• localStorage.getItem監聽：自定義事件 getItemEvent
• localStorage.removeItem監聽：自定義事件 removeItemEvent

//監聽自定義事件 setItemEvent
localStorage.setItem = (Orgin=>{
    return function(key,value){
        let setItemEvent = new CustomEvent('setItemEvent',{detail:{setKey:key,value}})
        window.dispatchEvent(setItemEvent)
        Orgin.call(this,key,typeof value == 'string'? value : JSON.stringify(value))
    }
})(localStorage.setItem)

//監聽自定義事件 getItemEvent
localStorage.getItem = (Orgin=>{
    return function(key){
        let result = JSON.parse(Orgin.call(this,key))
        let getItemEvent = new CustomEvent('getItemEvent',{detail:{getKey:key,value:result}})
        window.dispatchEvent(getItemEvent)
        return result 
    }
})(localStorage.getItem)


//監聽自定義事件 removeItemEvent
localStorage.removeItem = (Orgin=>{
    return function(key){
        let removeItemEvent = new CustomEvent('removeItemEvent',{detail:{removeKey:key}})
        window.dispatchEvent(removeItemEvent)
        Orgin.call(this,key)
    }
})(localStorage.removeItem)
複製代碼

監聽：

//localStorage.setItem監聽
window.addEventListener('setItemEvent',function(e){
    console.log(e.detail)
})

//localStorage.getItem監聽
window.addEventListener('getItemEvent',function(e){
    console.log(e.detail)
}) 

//localStorage.removeItem監聽
window.addEventListener('removeItemEvent',function(e){
    console.log(e.detail)
})
複製代碼

主動觸發DOM身上存在的方法

function trigger(Node,EventType) {
    if(EventType in Node)Node[EventType]()
}
複製代碼

主動觸發自定義方法

let oDiv = document.querySelector('#div')

oDiv.addEventListener('DefineMethod', function(){
    alert('自定義方法生效了')
})

function fireEvent(node,type) {
    var event = document.createEvent('Event');
    event.initEvent(type, true, true);
    node.dispatchEvent(event)
}

fireEvent(oDiv,'DefineMethod')
複製代碼

重寫數組方法

重寫數組原型部分方法

const oldArrayProto = Array.prototype
const newArrayProto = Object.create(oldArrayProto)
const rewriteMethod = ['push','splice']
const instenceArr = []
instenceArr.__proto__ = newArrayProto
rewriteMethod.forEach(method=>{
    let orgin = newArrayProto[method]
    newArrayProto[method] = function(){
        orgin.apply(this,arguments)
        notify(method,...arguments)
    }
})
function notify () {
    let [method,...rest] = [...arguments]
    console.log(method)
    console.log(rest)
}
複製代碼

示例重寫了數組的兩個方法，push 和 splice,並在重寫方法裏面添加執行了一個 通知方法notify,當你對 數組instenceArr 進行 push 或 splice 操做時，notify 會監聽到

重寫console.log

需求：第一個參數若是是對象，就輸出 字符串JSON，不影響其餘功能

console.log = (orgin=>{
    return function(){
        //若是是對象 就轉成 字符串JSON
        arguments[0] =  typeof arguments[0] == 'string'?arguments[0]:JSON.stringify(arguments[0])
        orgin.call(console,...arguments)
    }
})(console.log)
複製代碼

只執行一次函數

2020/4/14 更新

函數重寫置空

function RunOnce(fn){
    fn()
    RunOnce = function(){} 
}

RunOnce(function(){
    console.log(111)
})
RunOnce(function(){//不執行
    console.log(111)
})
複製代碼

函數對象屬性掛載

function RunOnce(fn){
    if(!RunOnce[fn]){
        fn()
        RunOnce[fn] = true 
    }
}

let a1 = function(){
    console.log(11)
}
let b1 = function(){
    console.log(22)
}
RunOnce(a1)//11
RunOnce(a1)//不執行
RunOnce(b1)//22
RunOnce(b1)//不執行
複製代碼

Tip：此種方法不適合匿名函數

持續更新...

結語

若是你有更好的點子，或者沒有找到你想要的工具函數，歡迎留言

文中如有不許確或錯誤的地方，歡迎指出

往期文章：前端代碼優化實用篇