动态添加css文件

应用场景：

1. 1.换肤功能
2. 2.一套代码不同地区使用，不同地区不同风格
3. 3.一套代码不同用户使用，用户个性化设置功能

那么如何动态添加不同的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` （`http://moxiaofei.com/banner.js`）

//http://moxiaofei.com/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"},
    ]
}

http://moxiaofei.com/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]
})

localStorage 监听

//监听 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.querySeletor('#div')
document.body.addEventListener('DefineMethod', function(){
    alert('自定义方法生效了')
})
function fireEvent(node,type) {
    var event = document.createEvent('Event');
    event.initEvent(type, true, true);
    node.dispatchEvent(event)
}
fireEvent(oDiv,'DefineMethod')

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(1) 打赏
感谢您让我添加个鸡腿！
支付宝
微信
赏 1
感谢您让我添加个鸡腿！
支付宝
微信